babel从入门到精通

前言

前面我们写了几篇很长的文章去介绍babel源码、preset-env、runtime，

• babel源码解析一
• babel源码解析之（@babel/preset-env）
• babel源码解析之（@babel/plugin-transform-runtime）

在babel配置中我们可能用过@babel/polyfill、core-js、core-js-pure、@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3、@babel/plugin-transform-runtime、@babel/preset-env，当然这些都有出现在我们的文章中的，并且很详情的说了每个应用场景，所以强烈推荐小伙伴去看一下这几篇文章。

总结

好啦～ 我们今天就总结一下这些babel配置之前的联系，然后最后说一下在实战项目中的一些配置建议。

@babel/polyfill

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

也就是说在babel7.4.0之后是弃用掉的，然后现在由core-js替换，core-js可以用以下代码来替换之前的@babel/polyfill：

//import "@babel/polyfill"; //之前的写法
import "core-js/stable";
import "regenerator-runtime/runtime";

core-js&core-js-pure

core-js出现其实就是为了能让你代码中的一些api（比如：Array.prototype.include）能够运行，等于是在你的代码跟浏览器中加入了一个垫片，所以在babel7.4.0之后所有的polyfill操作都依赖core-js，core-js-pure是core-js的另外一个版本，可以不污染全局变量，比如我们的@babel/plugin-transform-runtime插件就是依赖的core-js-pure，core-js的更多用法跟介绍大家可以看官网https://github.com/zloirock/core-js

@babel/runtime

@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3这几个都叫“@babel/runtime”，只是每一个对应的实现不一样，都是提供给@babel/plugin-transform-runtime插件做依赖，@babel/plugin-transform-runtime插件会根据corejs的配置做不通的runtime依赖，具体用法大家可以参考之前的几篇文章。

@babel/plugin-transform-runtime 和 @babel/preset-env

@babel/preset-env包含了一些基本es语法转换的插件（箭头函数、类转换等等），同时还支持polyfill，有usage跟entry模式，但是preset-env添加polyfill会像之前使用@babel/polyfill一样，会污染全局变量。

@babel/plugin-transform-runtime主要是利用@babel/runtime提取了一些公共的babel帮助函数，同时也支持polyfill的添加，添加的polyfill都是以一个局部变量的形式引入，不会污染全局变量。

如果你做的是一个二方库，然后需要被别人依赖，那么建议使用@babel/plugin-transform-runtime来引入polyfill，因为你要尽可能的专注于做自己的事，而不是说去影响别人，语法转换可以使用preset-env预设，比如以下配置：

module.exports = {
   
    presets: [
        [
            "@babel/preset-env",
        ]
    ],
    plugins: [
        [
            "@babel/plugin-transform-runtime",
            {
   
                corejs: {
   version: 3, proposals: true},
                helpers: true,
                useESModules: true,
                regenerator: true,
                absoluteRuntime: "./node_modules"
            }
        ]
    ]
};

如果你做的是一个普通的业务项目的话，可以用preset-env来转换语法和polyfill，然后再利用@babel/plugin-transform-runtime来引入helpers跟generator做到代码重复利用，比如以下配置：

module.exports = {
   
    presets: [
        [
            "@babel/preset-env",
            {
   
                corejs: 3,
                useBuiltIns: 'usage',
            }
        ]
    ],
    plugins: [
        [
            "@babel/plugin-transform-runtime",
            {
   
                corejs: false,
                helpers: true,
                useESModules: false,
                regenerator: true,
                absoluteRuntime: "./node_modules"
            }
        ]
    ]
};

小伙伴思维也不要被某种方式定死，还是要根据自己项目需要灵活配置，找到自己项目最好的就可以了，说白了不管是runtime还是preset-env还是之前的@babel/polyfill，掌握原理后随意搭配都是可以的，比如我们接下来看一下vue-cli4.1.1中是怎么对babel配置的。

@vue/cli-service@^4.1.1

大家可以安装一下@vue/cli-service@^4.1.1：

npm install -D @vue/cli-service@^4.1.1

然后我们找到vue-cli中对babel的配置文件，

node_modules/@vue/babel-preset-app/index.js：

const path = require('path')

const defaultPolyfills = [
  // promise polyfill alone doesn't work in IE,
  //