Babel 7使用總結
2019-07-08
本文基於Babel 7.4.5。
Babel主要模塊如上圖所示,接下來將分別介紹。
1. @babel/core
@babel/core
主要是進行代碼轉換的一些方法,可以將源代碼根據配置轉換成兼容目標環境的代碼。
import * as babel from "@babel/core";
babel.transform("code();", options, function(err, result) {
result.code;
result.map;
result.ast;
});
2. @babel/cli
@babel/cli
是 babel 提供的命令行工具,用於命令行下編譯源代碼。
首先安裝依賴:
npm install --save-dev @babel/core @babel/cli
新建一個js文件:
let array = [1,2,3,4,5,6];
array.includes(function(item){
return item>2;
})
class Robot {
constructor (msg) {
this.message = msg
}
say () {
alertMe(this.message)
}
}
Object.assign({},{
a:1,b:2
})
const fn = () => 1;
new Promise();
執行轉換:
npx babel index.js --out-file out.js
可以發現輸出代碼沒有變化,這是因爲沒有進行配置來確定怎麼進行轉換。
3. @babel/plugin*
babel是通過插件來進行代碼轉換的,例如箭頭函數使用plugin-transform-arrow-functions
插件來進行轉換。
首先安裝該插件:
npm install --save-dev @babel/plugin-transform-arrow-functions
可以通過@babel/cli傳參或者配置文件的方式使用插件:
-
@babel/cli
npx babel index.js --out-file out.js --plugins=@babel/plugin-transform-arrow-functions
則可以得到out.js文件,可以看到箭頭函數已經被轉換。
let array = [1, 2, 3, 4, 5, 6]; array.includes(function (item) { return item > 2; }); class Robot { constructor (msg) { this.message = msg } say () { alertMe(this.message) } } Object.assign({}, { a: 1, b: 2 }); const fn = function () { return 1; }; new Promise();
-
配置文件babel.config.js(javascript寫法)或.babelrc(json寫法),使用配置文件是更加常用的方式。
module.exports = function (api) { api.cache(true); const plugins = [ "@babel/plugin-transform-arrow-functions" ]; return { plugins }; }
4. @babel/presets
我們在index.js中使用了多種es6的語法,一個個的導入插件很麻煩,presets是一組預設好的插件集合。官方爲常見環境組裝了一些 presets (當然也可以自己配置):
我們使用@babel/preset-env爲例(使用前需npm install @babel/preset-env):
module.exports = function (api) {
api.cache(true);
const presets = [
["@babel/preset-env"]
];
return {
presets
};
}
得到的結果如下, 可以看到箭頭函數被編譯、es6類、let聲明被編譯了。
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
return item > 2;
});
var Robot =
/*#__PURE__*/
function () {
function Robot(msg) {
_classCallCheck(this, Robot);
this.message = msg;
}
_createClass(Robot, [{
key: "say",
value: function say() {
alertMe(this.message);
}
}]);
return Robot;
}();
Object.assign({}, {
a: 1,
b: 2
});
var fn = function fn() {
return 1;
};
new Promise();
但是可以看到數組的實例方法includes、對象的靜態方法,以及promise並沒有被編譯。
這是因爲babel 把 Javascript 語法爲syntax 和 api, api 指那些我們可以通過 函數重新覆蓋的語法 ,類似 includes, map, includes, Promise, 凡是我們能想到重寫的都可以歸屬到api。syntax 指像箭頭函數,let,const,class, 依賴注入 Decorators等等這些,我們在 Javascript在運行是無法重寫的,想象下,在不支持的瀏覽器裏不管怎麼樣,你都用不了 let 這個關鍵字。
@babel/presets默認只對syntax進行轉換,我們需要使用@babel/polyfill來提供對api的的支持。
5. @babel/polyfill
@babel/polyfill由core-js2和regenerator-runtime組成,後者是facebook開源庫,用來實現對generator、async函數等的支持,前者是js標準庫,包含不同版本javascipt語法的實現。
只要在js文件的入口頂部引入@babel/polyfill就可以在後問的代碼中自由的使用es6 api了。
但是整體@babel/polyfill整個包體積較大,我們通常只使用了其中一部分方法,而引入整個庫顯然是不合適的。所以你可以只引入使用的方法:
import 'core-js/features/array/from'; // <- at the top of your entry point
import 'core-js/features/array/flat'; // <- at the top of your entry point
import 'core-js/features/set'; // <- at the top of your entry point
import 'core-js/features/promise'; // <- at the top of your entry point
Array.from(new Set([1, 2, 3, 2, 1])); // => [1, 2, 3]
[1, [2, 3], [4, [5]]].flat(2); // => [1, 2, 3, 4, 5]
Promise.resolve(32).then(x => console.log(x)); // => 32
如果你不想污染全局命名空間(例如在寫一個npm庫時,要保持其隔離性)。可以引入純淨版:
import from from 'core-js-pure/features/array/from';
import flat from 'core-js-pure/features/array/flat';
import Set from 'core-js-pure/features/set';
import Promise from 'core-js-pure/features/promise';
from(new Set([1, 2, 3, 2, 1])); // => [1, 2, 3]
flat([1, [2, 3], [4, [5]]], 2); // => [1, 2, 3, 4, 5]
Promise.resolve(32).then(x => console.log(x)); // => 32
preset-env的配置項中的useBuiltIns
屬性可以方便@babel/polyfill的使用。
-
useBuiltIns:false(default)
:此時不對polyfill
做操作。如果引入@babel/polyfill
,則無視配置的瀏覽器兼容,引入所有的polyfill
。 -
useBuiltIns:"entry"
:根據配置的瀏覽器兼容,引入瀏覽器不兼容的polyfill
。需要在入口文件手動添加import '@babel/polyfill'
,會自動根據browserslist
替換成瀏覽器不兼容的所有polyfill
。 -
useBuiltIns:"usage"
:不需要在文件頂部手動引入@babel/polyfill,會根據代碼中的使用進行按需添加。
在這裏使用useBuiltIns:"usage"
作爲示例,babel.config.js文件如下:
module.exports = function (api) {
api.cache(true);
const presets = [
["@babel/preset-env",
{
"useBuiltIns": "usage",
"targets":{
"browsers":["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]
];
return {
presets,
// plugins
};
}
得到的編譯結果:
"use strict";
require("core-js/modules/es6.promise");
require("core-js/modules/es6.object.to-string");
require("core-js/modules/es6.object.assign");
require("core-js/modules/es7.array.includes");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
return item > 2;
});
var Robot =
/*#__PURE__*/
function () {
function Robot(msg) {
_classCallCheck(this, Robot);
this.message = msg;
}
_createClass(Robot, [{
key: "say",
value: function say() {
alertMe(this.message);
}
}]);
return Robot;
}();
Object.assign({}, {
a: 1,
b: 2
});
var fn = function fn() {
return 1;
};
new Promise();
可以看到實現了polyfill的按需引入。但是在配置文件中未指定core-js版本時,默認會使用core-js2。命令行會出現如下提示:
WARNING: We noticed you're using theuseBuiltIns
option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via thecorejs
option.
這是因爲core-js3已經發布,@babel/polyfill不支持從core-js2到core-js3的平滑過渡,所以在babel 7.4版本中,已經廢棄@babel/polyfill(只能用core-js2),而是直接引入core-js3和regenerator-runtime代替。
import "@babel/polyfill";
// migration
import "core-js/stable";
import "regenerator-runtime/runtime";
使用core-js3有很多優點,首先就是新,包含很多新特性,其次就是可以配合@babel/runtime(後文詳述)。更多優點見core-js@3, babel and a look into the future。
使用core-js3是 babel.config.js如下:
module.exports = function (api) {
api.cache(true);
const presets = [
["@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs":3,
"targets":{
"browsers":["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]
];
return {
presets,
// plugins
};
}
仔細觀察上面的編譯結果可以發現有兩個問題。
- 高階語法向低階語法轉化時引入了了很多helper函數(如_classCallCheck)。當文件數量很多時,每個文件都引入這些helper函數會使得文件體積增大,怎麼這些helper函數抽離到單獨的模塊,然後按需引入呢?
- 雖然polyfill是按需引入的,但是會污染全局命名空間,當你寫的是公共庫時,可能會與使用者本地的方法產生衝突。例如你在你的庫中引入了polyfill中的Promise,使用者自身定義了自己的Promise,這就容易產生衝突。如何將你的公共庫中引入的polyfill api隔離起來呢?
要解決這兩個問題,就要需要使用@babel/runtime和@babel/plugin-transform-runtime了。
6. @babel/runtime
@babel/runtime依賴@babel/helpers和regenerator-runtime,helper函數都可以從這裏面引入,手動的肯定不可能,於是 babel 提供了 @babel/plugin-transform-runtime
來替我們做這些轉換。
babel.config.js文件爲:
module.exports = function (api) {
api.cache(true);
const presets = [
["@babel/preset-env",
{
"useBuiltIns": "usage",
"targets":{
"browsers":["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]
];
const plugins = [
["@babel/plugin-transform-runtime"]
]
return {
presets,
plugins
};
}
得到的編譯結果是:
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
require("core-js/modules/es6.promise");
require("core-js/modules/es6.object.to-string");
require("core-js/modules/es6.object.assign");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
require("core-js/modules/es7.array.includes");
var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
return item > 2;
});
var Robot =
/*#__PURE__*/
function () {
function Robot(msg) {
(0, _classCallCheck2.default)(this, Robot);
this.message = msg;
}
(0, _createClass2.default)(Robot, [{
key: "say",
value: function say() {
alertMe(this.message);
}
}]);
return Robot;
}();
Object.assign({}, {
a: 1,
b: 2
});
var fn = function fn() {
return 1;
};
new Promise();
可以看到我們的第一個問題已經圓滿解決了。
解決第二個問題需要使用@babel/plugin-transform-runtime option中的corejs參數。默認爲false,不對polyfill進行處理。可以設爲不同版本的core-js。
例如使用core-js2時,需要先安裝
npm install --save @babel/runtime-corejs2
配置文件爲:
module.exports = function (api) {
api.cache(true);
const presets = [
["@babel/preset-env",
{
"useBuiltIns": "usage",
"targets":{
"browsers":["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]
];
const plugins = [
["@babel/plugin-transform-runtime",{corejs:2}]
]
return {
presets,
plugins
};
}
得到的結果是:
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
var _assign = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/assign"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/createClass"));
require("core-js/modules/es7.array.includes");
var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
return item > 2;
});
var Robot =
/*#__PURE__*/
function () {
function Robot(msg) {
(0, _classCallCheck2.default)(this, Robot);
this.message = msg;
}
(0, _createClass2.default)(Robot, [{
key: "say",
value: function say() {
alertMe(this.message);
}
}]);
return Robot;
}();
(0, _assign.default)({}, {
a: 1,
b: 2
});
var fn = function fn() {
return 1;
};
new _promise.default();
可以看到polyfill引入時得到了一個別名,可以避免全局變量污染,但是可以發現實例方法includes並沒有得到相應的處理。這是core-js2沒有解決的問題,隨着2019年3月core-js3的發佈,這個問題得到了完美解決。我們將corejs設爲3,得到了結果如下:
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
var array = [1, 2, 3, 4, 5, 6];
(0, _includes.default)(array).call(array, function (item) {
return item > 2;
});
var Robot =
/*#__PURE__*/
function () {
function Robot(msg) {
(0, _classCallCheck2.default)(this, Robot);
this.message = msg;
}
(0, _createClass2.default)(Robot, [{
key: "say",
value: function say() {
alertMe(this.message);
}
}]);
return Robot;
}();
(0, _assign.default)({}, {
a: 1,
b: 2
});
var fn = function fn() {
return 1;
};
new _promise.default();
7. @babel/register
經過 babel 的編譯後,我們的源代碼與運行在生產下的代碼是不一樣的。
babel-register 則提供了動態編譯。換句話說,我們的源代碼能夠真正運行在生產環境下,不需要 babel 編譯這一環節。
我們先在項目下安裝 babel-register:
$ npm install --save-dev @babel/register
然後在入口文件中 require
:
require('@babel/register')
require('./app')
在入口文件頭部引入 @babel/register
後,我們的 app
文件中即可使用任意 es2015 的特性。
當然,壞處是動態編譯,導致程序在速度、性能上有所損耗。(我們在啓動測試腳本的時候可以使用)
7. @babel/node
我們上面說,babel-register 提供動態編譯,能夠讓我們的源代碼真正運行在生產環境下 - 但其實不然,我們仍需要做部分調整,比如新增一個入口文件,並在該文件中 require('@babel/register')
。而 babel-node 能真正做到一行源代碼都不需要調整:
$ npm install --save-dev @babel/core @babel/node
$ npx babel-node app.js
只是,請不要在生產環境中使用 babel-node,因爲它是動態編譯源代碼,應用啓動速度非常慢
參考
http://babel.docschina.org/docs/en/babel-plugin-transform-runtime#technical-details
https://blog.hhking.cn/2019/0...
https://segmentfault.com/a/11...
https://zhuanlan.zhihu.com/p/...