如何在Node.js中设置Babel

69 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情

什么是Babel?

Babel是一个JavaScript编译器。这是一个流行的工具,可帮助你使用JavaScript编程语言的最新功能。

为什么要在Node.js中使用Babel?

你是否打开过使用Node.js/Express构建的后端回购协议——你首先看到的是ES6导入和导出语句以及其他一些ES6语法功能?

好吧,巴贝尔让这一切成为可能。请记住,Babel是一个流行的工具,允许你使用JavaScript的最新功能。今天,许多框架在引擎盖下使用Babel来编译他们的代码。

例如,如果没有Babel等编译器的帮助,Node就无法使用ES6导入和导出语句以及ES6语法的其他一些很酷的功能。

因此,在本教程中,我将向你展示如何快速设置节点应用程序,使其与大多数ES6语法兼容。 让我们为我们的应用程序初始化并创建一个package.json文件:

npm init

此命令将显示一些我们希望保持原样的设置步骤。因此,在整个设置过程中按回车键或回车键将正常工作。

现在,完成后,创建一个名为“index.js”的新文件,该文件将作为我们的切入点。

如何设置和安装Babel

现在,我们将安装Babel家族的三个软件包,它们是:

@babel/cli, @babel/core and @babel/preset-env

要安装,我们使用以下命令来安装软件包:

npm install --save-dev @babel/cli @babel/core @babel/preset-env

我们希望使用**--save-dev**将它们安装为模块开发的依赖项。

因此,完成安装后,创建一个名为 .babelrc的新文件,用于配置babel。

touch .babelrc

此文件将托管我们想要添加到Babel的所有选项。因此,现在,让我们使用我通常用于应用程序开发的设置。你可以复制它并添加到你的:

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

上面的配置是我用来告诉Babel的,是的,我不仅想使用我的导入和导出语句,还想使用类功能以及ES6的其余和点差运算符。

如何设置一个简单的服务器

现在打开我们之前创建的“index.js”文件,并添加此代码以生成一个简单的服务器:

import http from 'http';

const server = http.createServer((req, res) => {
  res.end('Hello from the server');
}).listen(4001);

console.log('Server is up and running');

export default server;

使用上面的示例代码,我们的服务器将在端口4001上监听,然后每当我们访问端口时向我们发送响应。

Package.json脚本配置。

我们现在有一个简单的服务器。要运行此操作,我们必须在使用Node运行之前转换代码。为此,请打开 “package.json” 文件并添加此构建并开始脚本:

  "scripts": {
+   "build": "babel index.js -d dist",
    "start": "npm run build && node dist/index.js"
  }

很好-所以让我们用以下命令启动我们的服务器:

npm start

一旦你访问本地主机,你应该会收到此回复:4001

屏幕截图_16

如何使用Nodemon和重新启动服务器

为了防止每次你更改应用程序时自己重新启动服务器,我们需要安装nodemon。你可以使用以下命令将nodemon安装到应用程序中,将其安装为开发依赖项:

npm install --save-dev nodemon

然后我们重新配置我们的package.json脚本:

  "scripts": {
    "build": "babel index.js -d dist",
    "start": "npm run build && nodemon dist/index.js"
  }

太棒了,现在这是我们节点应用程序的最终代码,也是当你运行“npm start”启动服务器时应该得到什么。

屏幕截图_13

正如你从上面的图像中看到的,我们的服务器已启动并运行。你现在可以使用es6语法中的导入和导出语句,以及es6提供的其他很棒的功能,就像节点应用程序中的其余和扩展运算符一样。

结论

在本教程中,我们学习了如何使用Babel在节点应用程序中使用的ES6语法。