Babel 7 初探

时间：2020-05-30 19:07:56 阅读：47 评论：0 收藏：0 [点我收藏+]

　　最近在做项目的依赖的清理，看到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 命令。看一下打包后的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"]
}

　　再执行babel 命令，可以发现箭头函数已经转译了，这时你再想，要不要把const 再转译一下，那就需要提供另外一下babel插件了，随着转译的语法越来越多，你要在babel 的config 文件中添加的插件也就越来越多，如果一个一个手写添加进去，有点麻烦了。有一个插件集合就好了，正好 babel 提供了一个@babel/preset-env。 @babel/preset-env，它是一个插件集合，所以它的作用也是转译新的js 语法到旧的js语法。那么它能转译哪些语法呢？ECMAScript 官方发布的正式版本，如ES2015 ~ES2020 中的新语法和ECMAScript proposals 中stage 4 中的新语法，这也就是下一年要发布的ECMAScript 版本中的新语法。只要官方定稿的语法，@babel/preset-env 都可以进行转译，那这就方便多了，只要安装它这一个，你就可以写一堆的新语法。npm i @babel/preset-env -- save-dev 试一试，相应的babel.config.json 文件就要改成

{
    "presets": [
        "@babel/preset-env"
    ]
}

　　npm run babel, 可以看到const 和箭头函数都转译了。当然有的时候，确实想用最新的语法，比如 decorator, 官方没有定稿，还在stage-2 阶段，那就单独为这个decorator安装一个插件。npm install --save-dev @babel/plugin-proposal-decorators, 然后在babel.config.json 中配置plugins

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-decorators"
    ]
}

　　如果安装的presets 和 plugins 越来越多，最好注意一下babel 的执行顺序。先执行plugins, 再执行presets, 如果plugins有多个，按照书写顺序从上到下(或从左到右) 依次执行每一个plugin. 但presets 确相反，如果有多个pesets，按照书写顺序从下到上或从右到左依次执行。

　　说回@babel/preset-env, 除了它是一个插件集合，能够转译最新语法外，它还集成了browserlist, 能够根据指定的浏览器决定要不要编译最新的语法到旧的语法。默认情况下，如果没有指定browserlist, 它会全部进行转译，就像现在的配置一样。现在指定一下browserlist, 有三种配置方式，一个是 .browserslistrc 文件，一个是package.json，一个是@babel/preset-env options，如果使用options, presets中的每一项就要变成数组，数组的第一项是使用的preset, 第二项是该preset的参数置

"presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "chrome": "58"
                }
            }
        ]
    ]

　　npm run babel 可以发现，任何语法都没有进行转译，因为chrome 58 已经支支持const 和箭头函数了。再把IE 11 加上

"targets": {
                    "chrome": "58",
                    "ie": "11"
                }

　　npm run babel, 所有的语法都重新编译到旧的语法。

　　JavaScript的世界不止新的语法，还有新的对象和方法，如Promise 对象，Map 对象，这些对象和方法是无法进行编译的，把index.js 改成发代码

const promise = new Promise()

　　npm run babel 可以发现, 只有const 转化成了var, promise 没有处理，这需要用到polyfill, 就是把对象和方法用已经实现了的对象和方法实现。原来实现polyfill 的方式有两种，一种是@babel/polyfill, 一种是@babel/plugin-transform-runtime 和@babel/runtime

现在的实现方式有了很大的区别。@babel/polyfill 在7.4 以后被废弃了。@babel/runtime 现在价仅仅剩下helper 函数了，polyfill 的功能被移除了。

　　@babel/polyfill 被废弃的原因是babel直接支持core-js, 更准确的说是支持core-js@3 三版本。 core-js@3 不仅包含了core-js@2，core-js@3 中的stable 就是对应的core-js@2, 且比它更加强大， babel 通过直接支持core-js还可以实现按需polyfill. 而babel/polyfill 正好使用的是core-js@2, 并且无法平滑地升级到core-js@3，而且使用@babel/polyfill 无法实现按需polyfill, 所以直接废弃了。babel 直接支持core-js@3 是通过@babel/preset-env 中的useBuiltIns 和 corejs 实现的。useBuiltIns有三个取值

　　1， false，默认值，表示 @babel/preset-env 不会进行polyfill.

　　2, entry: 我们在项目的最开始部分引入 core-js; 或 regenerator-runtime/runtime, 和@babel/polyfill 用法一致，babel 就会把整个的引入变成一个一个小polyfill的引入，引入哪些小polyfill 是根据browserlist 定义的浏览器目标决定的，这就是按需加载polyfill

　　3，usage: 它是按文件进行polyfill, 如果一个文件中用到了一个对象如promise 对象，而browserlist 中定义的浏览器又不支持这个对象，它就会在这个文件的顶部引入polyfill. 也是按需加载polyfill

　　corejs 有2, 3等，就是指定core-js 的版本。安装core-js@3 体验一下

"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，可以发现引入了450个小的polyfill . 这时把ie: 11 去掉，你会发现只引入了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();

　　但这样使用core-js 会存在一个问题，全局变量的污染，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 把编译过程中需要的函数都抽成公用的，这些公用的函数就是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}]

Babel 7 初探

原文：https://www.cnblogs.com/SamWeb/p/12992110.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)