最近在做项目的依赖的清理,看到babel 已经升级7.9了,而我对babel的认知还停留在6时代,觉得需要重新学习一下了。
我们都知道, Babel是转译工具,它能把最新的javaScript的语法,转化成旧的js 的语法。转译的核心则在于插件,提供给babel 什么插件,babel 就会转译什么。如果我们提供了转化箭头函数的插件,babel 遇到箭头函数就会把它转化成普通函数。新建一个项目babel-learning, 在其中建一个src目录,在src 下建index.js, (mkdir babel-learning && cd babel-learning && mkdir src && cd src && touch index.js), 最好再建一个package.json 文件(cd .. && npm init -y),管理项目依赖。使用babel 进行转译,要安装哪些依赖呢?
@babel/cli babel 命令集合,在命令行中直接调用babel 命令,对文件进行编译,如果使用webpack,那就不用它,要用babel-loader.
@babel/core, babel的核心,它负责转译js 语法,但单独使用它,却起不到转译的作用,需要你给它提供插件。也就是说,如果只安装@babel/core, 调用babel 命令进行转译,文件会原模原样地进行输出,转译后的文件和原文件一模一样。
npm i @babel/core @babel/cli --save-dev,这里要注意,babel 7 把babel依赖包的名称给重新写了,以前是 babel-,现在是@babel/,安装完成后,在index.js 文件中随便写一个箭头函数,
const sum = (a, b ) => a + b;
然后在命令行中调用babel 命令 npx babel src --out-dir dist,npx可以直接调用node_modules 中的命令,--out-dir 表示转译后的文件输出到什么地方。也可以在package.json 的script 中写入"babel": "babel src --out-dir dist" ,再npm run babel 调用babel 命令。看一下转译后dist目录中的index.js ,没有任何变化。
提供转译箭头函数的插件, npm i @babel/plugin-transform-arrow-functions --save-dev, 调用babel 命令的时候,怎么让babel 使用这个插件呢?有两种方式,一种是在命令行后面加--plugins, 一种是配置文件。最好使用配置文件吧,因为添加和修改插件都比较方便。配置文件的命名也改了,原来是.babelrc, 现在官方建议是babel.config.json. touch babel.config.json
{ "plugins": ["@babel/plugin-transform-arrow-functions"] }
{ "presets": [ "@babel/preset-env" ] }
{ "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugin-proposal-decorators" ] }
.browserslistrc 文件,一个是package.json,一个是@babel/preset-env options,如果使用options, presets中的每一项就要变成数组,数组的第一项是使用的preset, 第二项是该preset的参数配置"presets": [ [ "@babel/preset-env", { "targets": { "chrome": "58" } } ] ]
"targets": { "chrome": "58", "ie": "11" }
const promise = new Promise()
"presets": [ [ "@babel/preset-env", { "targets": { "chrome": "58", "ie": 11 }, "useBuiltIns": "entry", "corejs": 3 } ] ]
使用entry,那就在项目的入口文件index.js 中 import 'core-js'
import 'core-js'; const promise = new Promise();
npm run babel, 编译后的index.js引入了450个小的polyfill . 这时把ie: 11 去掉, 重新npm run babel, index.js只引入了100多个polyfill, 确实是按需要加载。
把entry 改成 usage, 并且把index.js 中的import 'core-js' 去掉
{ "targets": { "chrome": "58", "ie": 11 }, "useBuiltIns": "usage", "corejs": 3 }
npm run build, 在编译后的index.js 中开头部分只引入了2个关于promise 的polyfill。当你再把ie:11 去掉,那就只引入了一个polyfill
"use strict"; require("core-js/modules/es.promise"); const promise = new Promise();
@babel/preset-env 中配置core-js和使用@babel/polyfill一样,会造成全局变量的污染,core-js 下面定义的都是global polyfill. require("core-js/modules/es.promise"); 最终的结果是一个globle.Promise对象的存在,在浏览器中就是window.Promise. 如果不想全局变量的污染,@babel/plugin-transform-runtime. npm install --save-dev @babel/plugin-transform-runtime 和npm install --save @babel/runtime, babel配置如下
{ "presets": [ [ "@babel/preset-env", { "targets": { "chrome": "60",
"ie": 11
} } ] ], "plugins": ["@babel/plugin-transform-runtime"] }
npm run babel, 发现并没有polyfill ,因为@babe/runtime 现在只剩下helpers, 没有polyfill 了。什么是helper ,就是一些辅助函数,为了避免重复的代码,主要是在编译过程中出现的重复代码。简单看一个例子,再在src 下建立 main.js, index.js 和main.js 都写一个class 类, 把babel.config.json 中的plugins暂时删除一下。npm run babel,看一下编译后的代码
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var fn = function fn() { _classCallCheck(this, fn); };
都有一个一模一样的函数__classCallCheck, 如果代码中使用大量的类,就会存在大量重复的代码,最终会影响文件的体积。其实这个函数完全可以抽成一个共用的函数,这些函数是helper. babel 配置文件中的plugins 加回去, npm run babel
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var fn = function fn() { (0, _classCallCheck2.default)(this, fn); };
require("@babel/runtime/helpers/classCallCheck"), 这个函数就是__classCallCheck了, babel 把编译过程中需要的函数都抽成公用的,这些公用的函数都放到了@babel/runtime/ helpers 中.所以称之为helper 函数。 @babel/runtime 不提供polyfill 之后,babel 重新提供了两个包@babel/runtime-core2, @babel/runtime-corejs3, 它们分别对应 core-js@ 和core-js@3, 直接使用3 就可以了 npm install --save @babel/runtime-corejs3, 同时babel 的配置改一下
"plugins": [["@babel/plugin-transform-runtime", {"corejs": 3}]]
把index.js 改回promise, 可以看到成功编译了
"use strict"; var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault"); var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise")); var promise = new _promise.default();
@babel/runtime-corejs3/core-js-stable/promise,在vscode,安装ctrl,点击它,找到这个文件,module.exports = require("core-js-pure/stable/promise"); 它引用的core-js-pure 下的文件。core-js-pure 是core-js 不污染全局变量的版本,我们只是在index.js引用了这个promise. 如果使用打包工具webpack的话,这个promise 的实现最终会打包到 最终的bundle文件中。简单看一下这个polyfill 的过程,@babel/runtime-corejs3, 这个包其实不包含任何代码,它只是把core-js 和regenator-runtime 列为了依赖项(githup仓库可以看到)。真正起作用的是 @babel/plugin-transform-runtime, 它把@babel/runtime-core3 node_modules中的 polyfill 插入到要polyfill的文件。这也就是index.js 中为什么会有 @babel/runtime-corejs3/helpers or @babel/runtime-corejs3/core-js-stable。 @babel/plugin-transform-runtime 同样也有一个问题,那就是它不能按需polyfill, 可能会使你的polyfiil 后的文件代码增大。
作为一个应用开发者,我们并不关心全局变量污染的问题,可以使用@babel/preset-env 加上 core-js@3, 同是使用@babel/runtime 中的helper 函数。npm i @babel/preset-env @babel/plugin-transform-runtime -- save-dev, npm i core-js@3 @babel/runtime --save,
{ "presets": [ [ "@babel/preset-env", { "targets": { "chrome": "60", "ie": 11 }, "useBuiltIns": "entry", "corejs": 3 } ] ], "plugins": ["@babel/plugin-transform-runtime"] }
useBuiltIns: "entry", 要在项目的入口文件 import 'core-js' 和 import "regenerator-runtime/runtime";(如果项目中使用async/await).
useBuiltIns 也可以设置成"usage",
{ "presets": [ [ "@babel/preset-env", { "targets": { "chrome": "60", "ie": 11 }, "useBuiltIns": "usage", "corejs": 3 } ] ], "plugins": ["@babel/plugin-transform-runtime"] }
但这里有一种case 需要考虑,把index.js 改成
async function f() {}
npm run babel, 转译后的文件如下
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); require("regenerator-runtime/runtime"); var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); function f() { return _f.apply(this, arguments); } function _f() { _f = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() { return _regenerator.default.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: case "end": return _context.stop(); } } }, _callee); })); return _f.apply(this, arguments); }
可以看到有
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
在node_modules 中找到这个文件,可以发现它依赖Promise, 如果像我们现在这样,Promise 并没有polyfill, 所以对于不支持promise 的浏览器来说,项目运行就会报错。useBuiltIns 设置为"usage",有的时候,不太好配置,但是绝大部分情况下没有问题。
如果你是一个库的作者,最好不要污染使用者的全局变量,那就用@babel/plugin-transform-runtime 和 @babel/runtime-core@3 进行polyfill ,使用@babel/preset-env 进行语法转译。 npm i @babel/preset-env @babel/plugin-transform-runtime -- save-dev, npm i @babel/runtime-corejs3 --save,
{ "presets": ["@babel/preset-env"], "plugins": [["@babel/plugin-transform-runtime", {"corejs": 3}]] }
如果你的库指定支持的浏览器,也可以对@babel/preset-env 进行设置