【译】如何在用 Babel 设置 Webpack

Babel 可以让用户编写浏览器还不支持的 JavaScript 特性代码。也许你已经听说过 JavaScript ES6（ES2015），ES7和其他版本的ECMAScript规范，他们都是JavaScript语言的最新版本。在阅读本文时，JavaScript可能已经包含了这些版本。

通过使用 Babel ，还不支持的代码被转换为普通的JavaScript，这样每个环境（例如：浏览器）都可以支持它。为了让Babel运行，你需要在命令行上安装它的两个主要依赖项：

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

此外，如果你有 Webpack 在适当的位置打包你的JavaScript应用程序，你需要为Babel安装一个 Webpack Loader。

现在，所有的库（node packages）都准备好了，你需要调整你的package.json和webpack.config.js（如果必要的话）来响应Babel的变更。这些变更将包括你以前安装的所有包。首先，在package.json里，包含Babel的预设：

{
  ...
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  ...
}

“@babel/preset-evn是一个智能预置，允许你使用最新的JavaScript，而不要去微管理什么样的环境使用什么样的语法转化。这不仅使你更加轻松并且JavaScript 包也更小。”

其次，你的webpack.config.js文件也需要在其构建过程中包含Babel。在这儿，使用之前安装的Babel加载器。你需要告诉Webpack在哪些文件上使用加载器（例如：.js文件）以及可选地从进程中排除哪些文件夹（例如：node_modules）:

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

你可以重新启动应用程序。除了现在可以为JavaScript使用即将到来的ECMAScript特性外，不应该做任何更改。一个可选的步骤是将您的Babel配置提取到一个单独的.babelrc配置文件中。您可以在命令行上的项目根目录中创建这个文件:

touch .babelrc

然后，添加Babel的配置 - 你之前已经在package.json里面添加了 - 现在放到.babelrc中，不要忘记删除package.json里的配置。它应该只配置一次。

{
  "presets": [
    "@babel/preset-env"
  ]
}

Babel允许您在浏览器中使用将来的JavaScript特性，因为它将其转换为普通的JavaScript。你可以自己安装第一个插件试试。确保JavaScript特性一开始在src/index.js文件中不起作用，但是一旦为该特性安装了插件并将其集成到.babelrc文件中，就应该可以运行JavaScript源代码了。