Webpack 2.2 中文文档

babel-loader

Babel是编写下一代JavaScript的编译器。

这个包允许使用 Babel 和 webpack 转换JavaScript文件。

注意：输出问题应该在 babel issue tracker 上提交报告;

安装 Installation

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

或者

yarn add babel-loader babel-core babel-preset-es2015 webpack --dev

注意：由于npm@3，npm不推荐peerDependencies的自动安装自动安装，所以需要对等依赖关系像 babel-core 和 webpack 必须在你的package.json中明确列出。

注意：如果您要从babel 5升级到babel 6，请参阅本指南。

用法 Usage

文档: 使用加载器(loaders)

在您的webpack配置对象中，您需要将 babel-loader 添加到模块列表，如下所示：

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }
  ]
}

选项

请查看 babel 选项。

您可以通过将选项作为查询字符串写入，将选项传递给加载器：

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader?presets[]=es2015'
    }
  ]
}

或者通过使用查询属性(query property):

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }
  ]
}

这个加载器(loaders)还支持以下加载器特定选项：

cacheDirectory：默认值 false。当设置时，给定的目录将用于缓存加载器的结果。未来的webpack构建将尝试从缓存中读取，以避免在每次运行时，需要运行 Babel 重新编译过程可能带来的高昂的开销。如果值为空（loader: ‘babel-loader?cacheDirectory’）或true (loader: babel-loader?cacheDirectory=true)，加载器将使用 node_modules/.cache/babel-loader 中的默认缓存目录，或者如果在任何根目录中找不到node_modules文件夹，加载器将使用默认的操作系统临时文件目录。
cacheIdentifier：默认是由 babel-core 的版本组成的字符串，babel-loader 的版本，.babelrc文件的内容（如果存在）和环境变量 BABEL_ENV 的值，并返回到 NODE_ENV 环境变量。可以将其设置为自定义值，以在标识符更改时强制缓存无效。
babelrc：默认true。当为false时，将忽略.babelrc文件（除了extends选项引用的那些文件）。
forceEnv：默认将解析BABEL_ENV，然后NODE_ENV。允许您在加载器级别覆BABEL_ENV/NODE_ENV。对于同构应用程序，在为客户端和服务器配置不同的babel时有用。

注意： sourceMap选项被忽略，相反，当webpack配置为使用sourceMaps时，会自动启用它们（通过devtool 配置选项）。

发现并排除故障 Troubleshooting

babel-loader 执行很慢！

确保转换尽可能少的文件。因为你可能正在匹配/\.js$/，您可能正在转换 node_modules 文件夹或其他不需要的源文件。

要排除node_modules，请参阅上面所述的loaders配置中的exclude选项。exclude: /(node_modules|bower_components)/。

你也可以使用 cacheDirectory 选项使 babel-loader 加速2倍。它将转换缓存到文件系统中。

babel将在每个文件中注入helpers代码，使代码量增加！

babel使用非常小的 helpers 代码来实现常用功能，例如_extend。默认情况下，这将被添加到需要它的每个文件中。

您可以改为将 babel runtime 作为一个单独的模块，以避免重复。

以下配置将禁止在每个文件中自动注入 babel runtime ，而是需要babel-plugin-transform-runtime并使所有的辅助引用使用它。

有关详细信息，请参阅文档。

注意：您必须运行npm install babel-plugin-transform-runtime –save-dev将其包含在您的项目中，并且babel-runtime本身作为npm install babel-runtime –save 的一个依赖。

loaders: [
  //'transform-runtime'插件告诉babel需要运行时间
  //而不是内联它。
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    query: {
      presets: ['es2015'],
      plugins: ['transform-runtime']
    }
  }
]

注意： transform-runtime和custom polyfills（例如Promise库）

因为babel-plugin-transform-runtime 包括一个 polyfill ，它包括一个自定义的regenerator runtime和core.js，以下常用shimming方法使用webpack.ProvidePlugin将无法正常工作：

// ...
        new webpack.ProvidePlugin({
            'Promise': 'bluebird'
        }),
// ...

以下方法也不会工作：

require('babel-runtime/core-js/promise').default = require('bluebird');

var promise = new Promise;

输出为 (使用 runtime):

'use strict';

var _Promise = require('babel-runtime/core-js/promise')['default'];

require('babel-runtime/core-js/promise')['default'] = require('bluebird');

var promise = new _Promise();

先前的Promise库在被覆盖之前被引用和使用。

一种方法是在应用程序中有一个 “bootstrap” 步骤，首先在应用程序之前覆盖默认全局变量：

// bootstrap.js

require('babel-runtime/core-js/promise').default = require('bluebird');

// ...

require('./app');

node API的babel已经移到babel-core。

如果您收到此消息，这意味着您已安装 npm 包 babel并在 webpack 配置中使用连字符的加载器名称（这在 webpack 2.x 中不再有效）：

  {
    test: /\.js$/,
    loader: 'babel',
  }

Webpack然后尝试加载 babel 包，而不是babel-loader。

要解决这个问题，你应该卸载npm包 babel ，因为它已经在 babel v6 中弃用了。（应该安装babel-cli或babel-core）在这种情况下，你的一个依赖关系是安装babel，并且你不能自己卸载它，在 webpack 配置中使用装载器(loader)的完整名称：

  {
    test: /\.js$/,
    loader: 'babel-loader',
  }

License

原文：https://github.com/babel/babel-loader/blob/master/README.md

上一篇: 第三部分:文档-加载器下一篇: bundle-loader

目录