目录

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 runtimecore.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

上一篇: 下一篇: