babel-loader
This package allows transpiling JavaScript files using?Babel?and?webpack.
Notes:?Issues with the output should be reported on the babel?issue tracker.
webpack 3.x | babel-loader 8.x | babel 7.x
npminstallbabel-loader@8.0.0-beta.0@babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x
npminstallbabel-loader babel-core babel-preset-env webpack
在 webpack 配置對象中，需要添加 babel-loader 到 module 的 loaders 列表中，像下面這樣：
module: {
rules: [
? ? {
? ? ? test: /\.js$/,
? ? ? exclude: /(node_modules|bower_components)/,
? ? ? use: {
loader:'babel-loader',
? ? ? ? options: {
presets: ['@babel/preset-env']
? ? ? ? }
? ? ? }
? ? }
? ]
}
##
參考?babel?選項。
你可以使用?options 屬性?來給 loader 傳遞選項：
module: {
rules: [
? ? {
? ? ? test: /\.js$/,
? ? ? exclude: /(node_modules|bower_components)/,
? ? ? use: {
loader:'babel-loader',
? ? ? ? options: {
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-transform-object-rest-spread')]
? ? ? ? }
? ? ? }
? ? }
? ]
}
此 loader 也支持下面這些 loader 特定(loader-specific)的選項：
cacheDirectory：默認值為?false。當有設(shè)置時，指定的目錄將用來緩存 loader 的執(zhí)行結(jié)果。之后的 webpack 構(gòu)建，將會嘗試讀取緩存，來避免在每次執(zhí)行時，可能產(chǎn)生的、高性能消耗的 Babel 重新編譯過程(recompilation process)。如果設(shè)置了一個空值 (loader: 'babel-loader?cacheDirectory') 或者?true?(loader: babel-loader?cacheDirectory=true)，loader 將使用默認的緩存目錄?node_modules/.cache/babel-loader，如果在任何根目錄下都沒有找到?node_modules?目錄，將會降級回退到操作系統(tǒng)默認的臨時文件目錄。
cacheIdentifier：默認是一個由 babel-core 版本號，babel-loader 版本號，.babelrc 文件內(nèi)容（存在的情況下），環(huán)境變量?BABEL_ENV?的值（沒有時降級到?NODE_ENV）組成的字符串?？梢栽O(shè)置為一個自定義的值，在 identifier 改變后，強制緩存失效。
forceEnv：默認將解析 BABEL_ENV 然后是 NODE_ENV。允許你在 loader 級別上覆蓋 BABEL_ENV/NODE_ENV。對有不同 babel 配置的，客戶端和服務(wù)端同構(gòu)應(yīng)用非常有用。
注意：sourceMap?選項是被忽略的。當 webpack 配置了 sourceMap 時（通過?devtool?配置選項），將會自動生成 sourceMap。
確保轉(zhuǎn)譯盡可能少的文件。你可能使用?/\.js$/?來匹配，這樣也許會去轉(zhuǎn)譯?node_modules?目錄或者其他不需要的源代碼。
要排除?node_modules，參考文檔中的?loaders?配置的?exclude?選項。
你也可以通過使用?cacheDirectory?選項，將 babel-loader 提速至少兩倍。 這會將轉(zhuǎn)譯的結(jié)果緩存到文件系統(tǒng)中。
babel 對一些公共方法使用了非常小的輔助代碼，比如?_extend。 默認情況下會被添加到每一個需要它的文件中
你可以引入 babel runtime 作為一個獨立模塊，來避免重復(fù)引入。
下面的配置禁用了 babel 自動對每個文件的 runtime 注入，而是引入?babel-plugin-transform-runtime?并且使所有輔助代碼從這里引用。
更多信息請參考文檔。
注意：?你必須執(zhí)行?npm install babel-plugin-transform-runtime --save-dev?來把它包含到你的項目中，也要使用?npm install babel-runtime --save?把?babel-runtime?安裝為一個依賴。
rules: [
// 'transform-runtime' 插件告訴 babel 要引用 runtime 來代替注入。
? {
test:/\.js$/,
exclude:/(node_modules|bower_components)/,
use: {
loader:'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/transform-runtime']
? ? ? }
? ? }
? }
]
注意：?transform-runtime 和自定義 polyfills (比如 Promise library)
由于?babel-plugin-transform-runtime?包含了一個 polyfill，含有自定義的?regenerator runtime?和?core.js, 下面使用?webpack.ProvidePlugin?來配置 shimming 的常用方法將沒有作用：
// ...
newwebpack.ProvidePlugin({
'Promise':'bluebird'
? ? ? ? }),
// ...
下面這樣的寫法也沒有作用：
require('@babel/runtime/core-js/promise').default =require('bluebird');
varpromise =newPromise;
它其實會生成下面這樣 (使用了?runtime?后)：
'use strict';
var_Promise =require('@babel/runtime/core-js/promise')['default'];
require('@babel/runtime/core-js/promise')['default'] =require('bluebird');
varpromise =new_Promise();
前面的?Promise?庫在被覆蓋前已經(jīng)被引用和使用了。
一種可行的辦法是，在你的應(yīng)用中加入一個“啟動器(bootstrap)”步驟，在應(yīng)用開始前先覆蓋默認的全局變量。
// bootstrap.js
require('@babel/runtime/core-js/promise').default=require('bluebird');
// ...
require('./app');
babel?的 node API 已經(jīng)被移到?babel-core?中。
(原文：The node API for?babel?has been moved to?babel-core.)
如果你收到這個信息，這說明你有一個已經(jīng)安裝的?babel?包，并且在 webpack 配置中使用它來作為 loader 的簡寫 (這樣的方式在 webpack 2.x 版本中將不再被支持)。
? {
test: /\.js$/,
loader:'babel',
? }
webpack 將嘗試讀取?babel?包而不是?babel-loader。
要修復(fù)這個問題，你需要刪除?babel?npm 包，因為它在 babel v6 中已經(jīng)被廢除。(安裝?babel-cli?或者?babel-core?來替代它)。
如果你的依賴中有對?babel?包的依賴使你無法刪除它，可以在 webpack 配置中使用完整的 loader 名稱來解決：
? {
test: /\.js$/,
loader:'babel-loader',
? }
https://blog.csdn.net/HansExploration/article/details/82779938
