Babel 如何在 node 和浏览器中使用-JavaScript中文网-JavaScript教程资源分享门户

Babel 如何在 node 和浏览器中使用

JavaScript 的语言标准不断更新，但是并不是所有浏览器和 node 版本都支持最新的 JavaScript 语言特性，这就导致了开发者需要兼容不同环境的问题。 Babel 是一个流行的 JavaScript 编译器和转换工具，它可以将最新的 ECMAScript 标准转换成当前环境能够支持的代码。

在 node 中使用 Babel

在 node 中使用 Babel 很简单，只需要按照以下步骤操作：

安装 @babel/cli 和 @babel/core

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

安装具体的插件，例如将 ES6 转换成 ES5 的插件 @babel/preset-env
```
npm install --save-dev @babel/preset-env
```
创建 Babel 配置文件 .babelrc
```
{
  "presets": ["@babel/preset-env"]
}
```
运行 npx babel <source> --out-dir <output> 进行转换
```
npx babel src --out-dir lib
```
上面的命令将会将 src 目录中的所有源码转换成 ES5 并输出到 lib 目录中。

在浏览器中使用 Babel

在浏览器中使用 Babel 要稍微复杂一些，需要使用构建工具将源码编译成浏览器可以直接执行的代码。

以使用 webpack 为例，按照以下步骤进行设置：

安装 Babel 相关依赖

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

创建 webpack 配置文件 webpack.config.js

// www.javascriptcn.com code example
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }]
  }
};

上面的配置文件指定了入口文件 src/index.js 和输出文件 dist/bundle.js，并且使用 babel-loader 进行转换。

运行 npx webpack 进行构建
```
npx webpack
```
上面的命令将会将所有源码编译打包成一个 bundle 文件并输出到 dist 目录中。

示例代码

下面是一个简单的示例来说明 Babel 在 node 和浏览器中的使用：

// www.javascriptcn.com code example
// src/index.js
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Hi, my name is ${this.name}`);
  }
}

const john = new Person('John');
john.sayHi();

# 在 node 中运行
npx babel src --out-dir lib
node lib/index.js

// www.javascriptcn.com code example
// dist/bundle.js
(function (exports, require, module, __filename, __dirname) { 
  "use strict";
  
  class Person {
    constructor(name) {
      this.name = name;
    }

    sayHi() {
      console.log(`Hi, my name is ${this.name}`);
    }
  }

  const john = new Person('John');
  john.sayHi();
});

# 在浏览器中打开 index.html 查看效果
npx webpack

上述示例中，我们通过 Babel 将一个使用了 ES6 类语法的源码转换为了 ES5 的代码，并且使用 webpack 将源码构建成了可以在浏览器中运行的代码，使得我们可以在不同环境下都能够运行同一份代码，从而提高了开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bed4960c976d473a31ea84

Babel 如何在 node 和浏览器中使用