babel的学习

1. babel主要用于将ECMAScript2015+代码转换为当前和较老的浏览器,从而在现有的环境做兼容的javascript版本。
2. 配置文件.babelrc(放在项目的根目录)：

在项目中有个.babelrc文件或者可以在package.json文件中配置"babel":{};

配置的参数参考网址： www.babeljs.cn/docs/core-p…

主要配置预设（presets）和插件（plugins）。

1. presets：需要加载和使用的presets（一组插件）列表（设定转码规则）； || presets（env/stage-0/stage-1/stage-2/stage-3/flow/react/minify/typescript...）:

• env 可以配置兼容(Example environments: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.)

npm i -D @babel/preset-env

{ "presets": [ [ "@babel/preset-env", { "targets": { "chrome": "58", "ie": "11" } } ] ] };
/* browserslist 支持的写法有 ："last 1 version", "> 1%", "maintained node versions", "not dead";比如: "targets": "> 0.25%, not dead" */

• stage-0 ~ stage-3 四个阶段（stage-0包含stage1-2-3 ,stage1包含stage2-3） "presets": ["@babel/preset-stage-1"]
• flow (一个javascript静态类型检查器)
  

npm i -D @babel/preset-flow

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

• react
  npm i -D @babel/preset-react
{ "presets": ["@babel/preset-react"] }
  

带参数
{ "presets": [ ["@babel/preset-react", { "pragma": "dom", // default pragma is React.createElement "pragmaFrag": "DomFrag", // default is React.Fragment "throwIfNamespace": false, // defaults to true "development": process.env.BABEL_ENV === "development", }] ] }

• typescript
  npm install --save-dev @babel/preset-typescript
{ "presets": ["@babel/preset-typescript"] }

---

2. 相关依赖：

1. Polyfill(需要在源码之前运行); Babel默认只转换新的javascript语法，而不转换新的API(比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。) npm i -S babel-ployfill

3. plugins插件
   

• 1.ES3
• 2.ES5
• 3.ES2015
• 4.ES2016
• 5.ES2017
• 6.ES2018
• 7.Modules
  

1. modules-amd
2. modules-commonjs
3. modules-systemjs
4. modules-umd

• 8.React
• 9.other

1. flow-strip-types;
2. runtime
   npm i -D @babel/plugin-transform-runtime
   或者npm i -S @babel/runtime { "plugins":["@babel/plugin-transform-runtime"] }
   携带options
   { "plugins":[ ["@babel/plugin-transform-runtime",{ "corejs":false, "helpers":true, "regenerator": true, "useESModules": false }] ] }

3. Plugin/Preset 排序

• 1.Plugin会运行在Preset之前;
• 2.Plugin会从第一个开始顺序执行;
• 3.Preset从最后一个开始执行与Plugin相反;

参考文献：

1. www.ruanyifeng.com/blog/2016/0…
2. babeljs.io/docs/en/