目录
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
在您的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