babel使用说明

之前项目只是机械的安装，没分清到底安装了哪些文件，各个文件的作用以及基础的配置，不同配置的好处在哪 ？

安装

npm install --save-dev @babel/core @babel/cli
// @babel/core babel解码的主文件
// @babel/cli 用于命令行解码
当不使用webpack，单独解码某js文件可以这样 node node_modules/@babel/cli/bin/babel.js src -d lib, 当然也可以全局安装babel，直接使用babel命令
// src 是需要解码的文件夹 lib是解码后的文件夹

配置

// templete
const test = [1,2,3,4]
console.log(...test)
function testP() {
  return new Promise()
}
const newT = test.map((item) => {
  return item + 1
})
testP()

直接上述代码不会有任何效果，还需要配置文件.babelrc，配置主要有2块presets和plugins

// 1 babel-preset-2015
"presets": ["es2015"]
// 2 babel-preset-env 
"presets": ["env"]
// 3 @babel/preset-env
"presets": ["@babel/preset-env"]
依赖的安装文件都不同
常见的大概这3类，1只转译了某一个版本的新内容，如果有新的版本每次都需要一更新配置（比如：es6，es7 等）
2、3 类似于npm安装的lasted，取最新的版本。 2、3只是版本的区别，处理一样。 

配置好后再执行 node node_modules/@babel/cli/bin/babel.js src -d lib 发下箭头函数和结构都被转译了，promise并没有。这就要说下babel的功能分类了，@babel/core只是对语法进行转译，promise、Map、Set等一些功能需要 babel-polyfill。

// babel-polyfill 需要手动引入（ babel-polyfill 都依赖于corejs）
// polyfill 的使用都需要指定corejs 版本，否则会使用默认的版本2，当后续的版本发生变化，再次安装就会有问题
import "core-js";
这就需要用到 preset-env的 useBuiltIns 属性，useBuiltIns有2个选项entry和usage。entry会把当前支持的所有的全部require进来如：

require("core-js/modules/es.symbol");

require("core-js/modules/es.symbol.description");

require("core-js/modules/es.symbol.async-iterator");

require("core-js/modules/es.symbol.has-instance");

require("core-js/modules/es.symbol.is-concat-spreadable");

require("core-js/modules/es.symbol.iterator");

require("core-js/modules/es.symbol.match");
...
即使并没有用到，这样打包出来文件会很大
usage 会做一个择优的选择，依据浏览器以及当前使用的特性加载相应的：

require("core-js/modules/es.array.map");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.promise");
这个只require了用到的这3个

这样感觉已经很好了，但是工作中发现项目里面并没有直接 import "core-js"，这就要说第3中polyfill的引入方式 @babel/plugin-transform-runtime 插件。

// .babelrc
{
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var _console;

var test = [1, 2, 3, 4];

(_console = console).log.apply(_console, test);

function testP() {
  return new _promise["default"]();
}
Promise，Map名被替换了，之前的都是直接require，Promise 挂载到了全局其他方法也都放到了原型上
插件引入的方式避免了全局变量的引入，SO，这种方式对于插件的开发更适合。

webpack内使用babel

webpack内通过 babel-loader 使用babel

// webpack.config.js
module: {
    rules: [
        { test: /\.js$/, use: 'babel-loader' }
    ]
},