如何使用 Babel 编译 ES6 和 ES7 的代码-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，ES6 和 ES7 的新语法不断涌现。然而，这些新特性常常不被普及的浏览器所支持，在实际开发中是无法直接使用的。这时，Babel 就成了我们不可或缺的工具。本文将介绍如何使用 Babel 编译 ES6 和 ES7 的代码，并为大家提供详细的学习及指导意义。

Babel 是什么

Babel 是一个 JavaScript 编译器，可以将 ES6 和 ES7 的代码转换成 ES5 的代码，从而在老旧的浏览器上运行。它不仅可以将新的 ECMAScript 版本转换成 ES5 的语法，还支持一些其他的特性，比如转换 JSX 语法等。同时，Babel 也是一个可配置的工具，我们可以根据自己的需要，选择使用哪些插件来进行编译。

安装 Babel

安装 Babel 需要使用 npm。在命令行中输入以下代码：

npm install babel-cli babel-preset-env --save-dev

其中 babel-cli 是 Babel 的命令行工具， babel-preset-env 是一个用于编译 ES6 和 ES7 代码的预设。我们可以在 .babelrc 文件中配置它，以便告诉 Babel 需要编译哪些特性。.babelrc 文件应该放在项目的根目录下，内容如下：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "last 2 versions",
          "safari >= 7"
        ]
      }
    }]
  ]
}

这里，我们使用了 env 预设，并指定了我们的目标浏览器是最近的两个版本和 Safari 7 以上版本。详细的说明可以参考官方文档 https://babeljs.io/docs/en/babel-preset-env。

使用 Babel

安装完毕之后，我们就可以使用 Babel 编译代码了。

命令行中使用

首先，在项目根目录下创建一个 src 目录，并在其中创建一个 index.js 文件，内容如下：

const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr);

然后，在命令行中输入以下代码：

./node_modules/.bin/babel src/index.js -o dist/index.js

其中，-o 参数指定了输出文件，这里我们将输出文件存储在 dist 目录下。编译完毕后，我们可以在 dist/index.js 文件中看到编译后的代码：

"use strict";

var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
  return item * 2;
});
console.log(newArr);

使用 Grunt

Grunt 是一个 JavaScript 任务运行器，我们可以使用它来自动化编译 ES6 和 ES7 代码。首先，在项目中使用 npm 安装 Grunt：

npm install grunt grunt-babel --save-dev

接着，在项目根目录下创建一个 Gruntfile.js 文件，内容如下：

module.exports = function (grunt) {
  grunt.initConfig({
    babel: {
      options: {
        sourceMap: true,
        presets: ['env']
      },
      dist: {
        files: {
          'dist/index.js': 'src/index.js'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-babel');
  grunt.registerTask('default', ['babel']);
};

然后，在命令行中输入 grunt，就可以自动编译代码了。

使用 Webpack

Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包器。它的优点是可以将多个 JavaScript 文件打包成一个文件，进一步优化应用程序的加载速度。Webpack 也支持使用 Babel 编译 ES6 和 ES7 代码。

首先，在项目中使用 npm 安装 webpack 和 babel-loader：

npm install webpack babel-loader babel-core babel-preset-env --save-dev

接着，在项目根目录下创建一个 webpack.config.js 文件，内容如下：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['env']
      }
    }]
  }
};

然后，在命令行中输入 webpack，打包完毕之后，我们就可以在 dist/index.js 文件中看到编译后的代码了。

总结

使用 Babel 编译 ES6 和 ES7 的代码，可以让我们在老旧的浏览器上运行最新的 JavaScript 特性，从而更好地提高开发效率。本文介绍了如何安装 Babel，并使用命令行、Grunt 和 Webpack 编译代码。同时，我们也介绍了如何在 .babelrc 文件中指定需要编译的特性。希望读者可以根据本文所述，自己尝试使用 Babel 编译代码，并提高自己的编程能力。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b49c27add4f0e0ffd80f29