babel插件

@babel/cli
@babel/core
@babel/preset-env
@babel/polyfill
@babel/runtime
@babel/plugin-transform-runtime
@babel/plugin-transform-xxx
以上几个插件是我们常用的bable插件
@babel/cli
命令行工具，可以直接在在命令行使用babel xxx.js进行编译
@babel/core
这是一个非常重要的包，基本上用到babel就会安装这个插件,因为babel编译的时候会依赖@babel/core，所以如果项目要使用babel一定要先安装此依赖
@babel/preset-env
是bable的核心包，是一系列插件的集合主要是识别es6+的代码然后转化成浏览器可执行的代码。如果不使用此插件，我们就要以此安装
@babel/plugin-transform-arrow-functions
@babel/plugin-transform-block-scoping
@babel/plugin-transform-classes等一系列包，因为babel7把很多模块插件单独抽出来了，比如把剪头函数转成普通函数、let const转成var都单独抽出来了，babel也为我们考虑很多，不可能项目中每个es6语法都要去安装一下，于是提供了一个@babel/preset-env预设包，把很多基础插件都包含在里面了。这样只需要安装该插件就可以用一些基础的es6语法。主要有以下参数
targets（string | Array<string> | { [string]: string }）：转码过后需要支持的环境, 如果不指定目标将默认转换所有ECMAScript 2015+代码官网不建议直接这样使用
{ "presets": ["@babel/preset-env"] }
可以指定支持的浏览器

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

targets.esmodules (boolean): 默认为commonjs，如果设置为true话，用于支持es6的浏览器使用，设置为true后前面指定的浏览器版本降无效
@babel/polyfill
主要解决的是不同环境下，方法差异性的问题。主要是做API的转换，比如Promise，Set，Map还有静态方法Object.assign，这些API就需要用到@babel/polyfil来转换，而@babel/preset-env只是单纯转换语法，而不能够转换API
@babel/runtime、@babel/plugin-transform-runtime
@babel/polyfill解决了转化API,@babel/preset-env解决了转化语法的问题，但是在使用@babel/polyfill转化代码后会生成Helper函数。比如

const key = 'babel'
const obj = {
    [key]: 'polyfill',
}

转化后会变成

function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
    } else {
        obj[key] = value;
    }
    return obj;
}
var key = 'babel';
var obj = _defineProperty({}, key, Object.assign({}, { key: 'polyfill' }));

此处引用
这样会污染全局的问题，假如全局下也有个_defineProperty函数就会互相污染；还有就是不同模块都引用了该模块，该helper函数都会插入，从而影响了整个体积。此时就需要@babel/runtime、@babel/plugin-transform-runtime这两个插件来处理。这两个插件一般都是一起使用，babel-runtime用以提供编译模块的工具函数，启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数。这样上面代码就会变成

var _defineProperty2 = __webpack_require__("./node_modules/babel-runtime/helpers/defineProperty.js");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _assign = __webpack_require__("./node_modules/babel-runtime/core-js/object/assign.js");

var _assign2 = _interopRequireDefault(_assign);

function _interopRequireDefault(obj) { 
    return obj && obj.__esModule ? obj : { default: obj }; 
}

var key = 'babel';
var obj = (0, _defineProperty3.default)(
            {}, key, (0, _assign2.default)({}, { key: 'polyfill' })
          );

通过引用的方式从而避免了全局命名空间的污染和体积变大的问题。
@babel/plugin-transform-xxx
各种其他插件，比如@babel/plugin-transform-react-jsx转换jsx语法的插件