babel的学习

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

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

配置的参数参考网址&＃xff1a; www.babeljs.cn/docs/core-p…

主要配置预设&＃xff08;presets&＃xff09;和插件&＃xff08;plugins&＃xff09;。

1. presets&＃xff1a;需要加载和使用的presets&＃xff08;一组插件&＃xff09;列表&＃xff08;设定转码规则&＃xff09;&＃xff1b; || presets&＃xff08;env/stage-0/stage-1/stage-2/stage-3/flow/react/minify/typescript...&＃xff09;:

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

npm i -D &＃64;babel/preset-env

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

• stage-0 ~ stage-3 四个阶段&＃xff08;stage-0包含stage1-2-3 ,stage1包含stage2-3&＃xff09; "presets": ["&＃64;babel/preset-stage-1"]
• flow (一个Javascript静态类型检查器)
  

npm i -D &＃64;babel/preset-flow

{ "presets":[&＃39;&＃64;babel/preset-flow&＃39;] }

• react
  npm i -D &＃64;babel/preset-react
{ "presets": ["&＃64;babel/preset-react"] }
  

带参数
{ "presets": [ ["&＃64;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 &＃61;&＃61;&＃61; "development", }] ] }

• typescript
  npm install --save-dev &＃64;babel/preset-typescript
{ "presets": ["&＃64;babel/preset-typescript"] }

2. 相关依赖&＃xff1a;

1. Polyfill(需要在源码之前运行); Babel默认只转换新的Javascript语法&＃xff0c;而不转换新的API(比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象&＃xff0c;以及一些定义在全局对象上的方法&＃xff08;比如Object.assign&＃xff09;都不会转码。) 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 &＃64;babel/plugin-transform-runtime
   或者npm i -S &＃64;babel/runtime { "plugins":["&＃64;babel/plugin-transform-runtime"] }
   携带options
   { "plugins":[ ["&＃64;babel/plugin-transform-runtime",{ "corejs":false, "helpers":true, "regenerator": true, "useESModules": false }] ] }

3. Plugin/Preset 排序

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

参考文献&＃xff1a;

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