wabpack babel

babel的编译流程

基本配置：

组件名称	翻译	作用	为什么需要
babel-loader	加载器	1.进行psrse、generate步骤 2.代码的code于AST之间的词法解析
babel-core	核心	提供编译基础的API	node API的babel 以被移出
babel-preset-env	预设环境	1.提供具体的编译规则 2.进行transform步骤具体编译	使其能在指定环境下正常运行

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/, // 忽略目录 提升性能
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'] // 使用babel-preset-nev 的预设环境
        } } } ] } // 出于篇幅考虑而折叠  --源于官网

babel-preset-env

配置语法："presets": ["nev",({option})]

• 包含(es2015|es2016|es2016|stage-0|...)等预设包功能。不包含react
• 默认使用es2015。

参数	翻译	作用
targets	指定目标环境的对象	使用对象的形式设置env参数
targets.browsers	设置目标浏览器的运行环境	通过browserslist格式设置[1]
targets.node	目标node运行环境	具体node版本 | "current" | true
targets.uglify	压缩	默认值为true
spec	规范	使用更规范的编译规则,可能减慢编译速度
loose	宽松	开启宽松模式,配合loader使用
modules	模块机制	使用何种模块机制 默认:commen.js可选:amd,umd,systemjs
debug	开启调试模式
include	白名单	一定进行编译
exclude	黑名单	一定不进行编译
useBuiltIns[2]		是否对babel-polyfill进行分解,只引入所需部分

[1]browserslist 介绍
[2]preset-env包含runtime模块，runtime包含polyfill模块

---

stage-(0|1|2|3|4):ES7不同阶段语法提案的转码规则
env：根据指定环境要求进行编译

babel常见组件 科普

组件名称	翻译	作用	为什么
babel-cli	命令行	通过命令行操作编译文件	不依赖配置文件，方便移植，使用灵活
babel-runtime	执行环境	ps:内置了polyfill 避免每个模块重复出现辅助代码
babel-plugin-transform-runtime		静态编译??
babel-polyfill	软垫片	兼容新的JS API	babel只转换新的js语法，而不转换新的API 例如：iterator,Generator,Set,Maps,Proxy, Reflect,Symbol,Promise等...
其他组件以后再更新

温馨提示：只是个人理解，欢迎纠正