Babel基础知识整理

Babel是一个JavaScript编译器

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可以运行在当前和旧版本的浏览器或其余环境中。下面列出的是 Babel 能为你作的事情：

• 语法转换
• 经过 Polyfill 方式在目标环境中添加缺失的特性 (经过 @babel/polyfill 模块)
• 源码转换 (codemods)

Presets（预设）

 

1、@babel/preset-env （官方preset）

 

 做用：预设目标环境，添加咱们须要的预设环境

        

     babel-preset-env将基于你的实际浏览器及运行环境，自动的肯定babel插件及polyfill，编译ES2015及此版本以上的语言，在没有配置项的状况下， babel-preset-env表现的同 babel-preset-latest同样(或者能够说同 babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017结合到一块儿，表现的一致)。

 

1 {
2     "presets": ["@babel/preset-env"]
3 }
4  
5 {
6     "presets": ["@babel/preset-env”,option]
7 }

 

经常使用配置字段：

 

一、targets: String | Array | { [String]: string } 。默认为{}

 

          这一属性说明了当前的项目的适用环境。能够编写字符串的内容，做为boswerlist的遍历条件。例如："targets": "> 0.25%, not dead" 或者也可使一个对象。来设置对于每个浏览器最低版本的控制。例如：{ "targets": { "chrome": "58", "ie": "11" } }，其中的浏览器关键字从以下之中选取：chrome, opera, edge, firefox, safari, ie, ios, android, node, electron

 

二、 boswerlist：

    是在不一样的前端工具之间共用目标浏览器和 node 版本的配置工具， browserslist能够在babel之中配置，来告诉babel具体转化代码的规则。有三种配置方式：

• 在.babelrc或者babel.config.js中去配置

 1 {
 2   "presets": [
 3     [
 4       "@babel/preset-env",
 5       {
 6         "targets": {
 7           "node": "4",
 8           "chrome": "58",
 9           "ie": "11"
10         }
11       }
12     ]
13   ]
14 }

• 在package.json 里面增长以下配置        

1 { 
2     "browserslist": [ 
3         "last 1 version", "> 1%",
4          "maintained node versions", "not dead" 
5     ]
6 }        

• 在工程的根目录下存在.browerslistrc配置文件

　　

# 注释是这样写的，以#号开头 
last 1 version 
> 1%
maintained node versions 
not dead

 

配置文件来源：

browerslist 将使用以下配置文件限定的的浏览器和 node 版本范围：

• 工具 options，例如 Autoprefixer 工具配置中的 browsers 属性。
• BROWERSLIST 环境变量。
• 当前目录或者上级目录的browserslist配置文件。
• 当前目录或者上级目录的browserslistrc配置文件。
• 当前目录或者上级目录的package.json配置文件里面的browserslist配置项（推荐）。
• 若是上述的配置文件缺失或者其余因素致使未能生成有效的配置，browserslist 将使用默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。

 

 

实践经验：

• 仅仅当你在特定浏览器上开发相似于信息亭之类的 web app 的时候，才能够用相似last 2 Chrome versions的查询条件来锁定特别具体的浏览器品牌和版本。市面上有各类各样的浏览器，同时浏览器的版本碎片化也很严重，若是你在开发一款通用的 webapp，那就应该考虑浏览器多样性致使的兼容问题。
• 若是你不想用 browserslsit 的默认设置，推荐使用last 1 version, not dead 和 > 0.2%(或者> 1% in US,> 1% in my stats).仅仅使用last n versions 将添加太多的废弃浏览器到工程里面来，同时也并无有效的覆盖那些占有率仍然很高的老版本浏览器。
• 不移除某些浏览器，是由于你不了解它们的分布。Opera mini 在非洲有一亿用户，全球范围内，它也比 微软的 Edge 浏览器更加流行。QQ 浏览器的使用量比桌面端的火狐和 Safari 浏览器加起来还多。

 

查询条件列表：

能够用以下查询条件来限定浏览器和 node 的版本范围（大小写不敏感）：

• > 5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=一样适用。
• > 5% in US : 同上，只是使用地区变为美国。支持两个字母的国家码来指定地区。
• > 5% in alt-AS : 同上，只是使用地区变为亚洲全部国家。这里列举了全部的地区码。
• > 5% in my stats : 使用定制的浏览器统计数据。
• cover 99.5% : 使用率总和为99.5%的浏览器版本，前提是浏览器提供了使用覆盖率。
• cover 99.5% in US : 同上，只是限制了地域，支持两个字母的国家码。
• cover 99.5% in my stats :使用定制的浏览器统计数据。
• maintained node versions :全部还被 node 基金会维护的 node 版本。
• node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。
• current node :当前被 browserslist 使用的 node 版本。
• extends browserslist-config-mycompany :来自browserslist-config-mycompany包的查询设置
• ie 6-8 : 选择一个浏览器的版本范围。
• Firefox > 20 : 版本高于20的全部火狐浏览器版本。>=,<,<=一样适用。
• ios 7 :ios 7自带的浏览器。
• Firefox ESR :最新的火狐 ESR（长期支持版） 版本的浏览器。
• unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。
• last 2 major versions or last 2 ios major versions :最近的两个发行版，包括全部的次版本号和补丁版本号变动的浏览器版本。
• since 2015 or last 2 years :自某个时间以来更新的版本（也能够写的更具体since 2015-03或者since 2015-03-10）
• dead :经过last 2 versions筛选的浏览器版本中，全球使用率低于0.5%而且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。
• last 2 versions :每一个浏览器最近的两个版本。
• last 2 Chrome versions :chrome 浏览器最近的两个版本。
• defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。
• not ie <= 8 : 浏览器范围的取反。
• 能够添加not在任和查询条件前面，表示取反

 

            注意事项：

                Browserslist 会处理浏览器的每一个版本，因此应该避免配置这样的查询条件Firefox > 0.多个查询条件组和

            在一块儿以后，其之间的的覆盖是以OR 的方式，而是否是AND,也就是说只要浏览器版本符合筛选条件里面的

            一种便可。

                全部的查询条件均基于 Can I Use的支持列表。例如：last 3 ios versions 可能会返回8.4, 9.2, 9.3(混合了

            主版本和次版本)，然而last 3 Chrome versions可能返回50, 49, 48（只有主版本），总之一切以 CanIUse网

            站收集的浏览器版本数据为准。

    

            不一样环境的差别化配置：

"browserslist": {
    "production": [
      "> 1%",
      "ie 10"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ]
  }

 

三、useBuiltIns ： "usage"| "entry"| false，默认为false。

 此选项配置 @babel/preset-env如何处理 polyfill。 usage和 entry选项配置上都是增长按需引入的功能。

• “useBuiltIns”: “usage"

　　　　在文件须要的位置单独按需引入，能够保证在每一个bundler中只引入一份。当前模式相似于@babel/plugin-transform-runtime，polyfill局部使用，制造一个沙盒环境，不形成全局污染

• “useBuiltIns”: “entry”

　　　　在项目入口引入一次（屡次引入会报错），插件@babel/preset-env会将把@babel/polyfill根据实际需求打散，只留下必须的，例如：

　 　　　In

　　　　import "@babel/polyfill”;

 

　　 Out (实际引入取决于环境不一样)

　　import "core-js/modules/es6.promise";

　　import "core-js/modules/es7.string.pad-start";

　　import "core-js/modules/es7.string.pad-end";

　　import "core-js/modules/es7.array.includes";

 

 

四、modules

        选项用于模块转化规则设置，可选配置包括："amd" | "umd" | "systemjs" | "commonjs" | false, 默认使用 "commonjs"。即，将代码中的ES6的import转为require。

        若是你当前的webpack构建环境是2.x/3.x，推荐将modules设置为false，即交由 Webpack 来处理模块化，经过其 TreeShaking 特性将有效减小打包出来的 JS 文件大小。这部分参考这里的回答： ECMAScript 6 的模块相比 CommonJS 的require (...)有什么优势？

 

五、include ：Array<string|RegExp>，默认为[]

转译时必须包含的插件

 

六、exclude： Array<string|RegExp>，默认为[]

转译时排除在外的插件

 

2、@babel/preset-react（官方preset）

 

做用：react 语法转译

 

一、默认包含的插件

此 preset 始终包含如下插件：

• @babel/plugin-syntax-jsx
• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-display-name

以及如下开发环境下的选择辅助开发插件:

• @babel/plugin-transform-react-jsx-self
• @babel/plugin-transform-react-jsx-source

 

PS:通常使用该预设都是默认值，不须要单独配置插件

 

配置参数：

• pragma

　　string 类型，默认值为 React.createElement。编译 JSX 表达式时替用于换所使用的函数（function）。

• pragmaFrag

　　string 类型，默认值为 React.Fragment。编译 JSX 片断时用于替换所用的组件。

• useBuiltIns

　　boolean 类型，默认值为 false。当插件须要某项功能时，此参数用于肯定是使用内置功能仍是经过 polyfill 来模拟。

• development

　　boolean 类型，默认值为 false。用于肯定是否开启用于辅助开发的插件，例如  @babel/plugin-transform-react-jsx-self 和  @babel/plugin-transform-react-jsx-source。当与  env 参数 配置或  js 配置文件 一同使用时会很是有用。

• throwIfNamespace

　　boolean 类型，默认值为 true。若是使用了 XML 命名空间标签，此参数用于设置是否抛出错误。例如：<f:image />。虽然 JSX 规范容许这样作，可是默认状况下是被禁止的，由于 React 的 JSX 目前并不支持这　　种方式。

 

 

3、@babel/preset-stage-x

 

做用：能够将处于某一阶段的js语法编译为正式版本的js代码

 

一、stage-X: 指处于某一阶段的js语言提案。

    提案共分为5个阶段：

•  stage-0：稻草人-只是一个大胆的想法
•  stage-1：提案-初步尝试
•  stage-2：初稿-完成初步规范
•  stage-3：候选-完成规范和浏览器初步实现
•  stage-4：完成-将被添加到下一年发布

　　若是不知道须要哪一个stage-x的话，直接引入stage-0，stage-0包含全部stage-1全部插件，stage-1包含全部stage-2全部插件，stage-2包含全部stage-3全部插件（每一个stage包含的插件就不列了，感兴趣能够自行百度，能够参考看下 http://www.bubuko.com/infodetail-1895965.html）

 

PS: babel-preset-stage-4已经整合入Presets不单独发布了

 

plugins（插件）

    Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其余编译器同样，编译过程分为三个阶段：解析、转换和打印输出。

    如今，Babel 虽然开箱即用，可是什么动做都不作。它基本上相似于 const babel = code => code; ，将代码解析以后再输出一样的代码。若是想要 Babel 作一些实际的工做，就须要为其添加插件。

    除了一个一个的添加插件，你还能够以  preset 的形式启用一组插件。

 

1、转换插件

 

做用：这些插件用于转换你的代码。（转换插件将启用相应的语法插件，所以你没必要同时指定这两种插件。）

 

一、ES3

• member-expression-literals
• property-literals
• reserved-words 

二、ES5

• property-mutators

三、ES2015(ES6)

• arrow-functions
• block-scoped-functions
• block-scoping
• classes
• computed-properties
• destructuring
• duplicate-keys
• for-of
• function-name
• instanceof
• literals
• new-target
• object-super
• parameters
• shorthand-properties
• spread
• sticky-regex
• template-literals
• typeof-symbol
• unicode-regex

四、ES2016

• exponentiation-operator

五、ES2017

• async-to-generator

六、ES2018

• async-generator-functions
• dotall-regex
• named-capturing-groups-regex
• object-rest-spread
• optional-catch-binding
• unicode-property-regex

七、Modules

• modules-amd
• modules-commonjs
• modules-systemjs
• modules-umd

八、Experimental

• class-properties
• decorators
• do-expressions
• export-default-from
• export-namespace-from
• function-bind
• function-sent
• logical-assignment-operators
• nullish-coalescing-operator
• numeric-separator
• optional-chaining
• partial-application
• pipeline-operator
• private-methods
• throw-expressions

九、Minification

• inline-consecutive-adds
• inline-environment-variables
• member-expression-literals
• merge-sibling-variables
• minify-booleans
• minify-builtins
• minify-constant-folding
• minify-dead-code-elimination
• minify-flip-comparisons
• minify-guarded-expressions
• minify-infinity
• minify-mangle-names
• minify-numeric-literals
• minify-replace
• minify-simplify
• minify-type-constructors
• node-env-inline
• property-literals
• regexp-constructors
• remove-console
• remove-debugger
• remove-undefined
• simplify-comparison-operators
• undefined-to-void

十、React

• react-constant-elements
• react-display-name
• react-inline-elements
• react-jsx
• react-jsx-compat
• react-jsx-self
• react-jsx-source 

十一、其余

• external-helpers
• flow-strip-types
• jscript
• object-assign
• object-set-prototype-of-to-assign
• proto-to-assign
• regenerator
• runtime
• strict-mode
• typescript

2、语法插件

    

　　这些插件只容许 Babel 解析（parse） 特定类型的语法（而不是转换）。（注意：转换插件会自动启用语法插件。所以，若是你已经使用了相应的转换插件，则不须要指定语法插件。）

    

{ 
    "parserOpts": { 
        "plugins": [
            "jsx", 
            "flow"
         ] 
    } 
}            

 

3、插件/Preset路径

    

    若是插件再 npm 上，你能够输入插件的名称，babel 会自动检查它是否已经被安装到 node_modules 目录下

{ "plugins": ["babel-plugin-myPlugin"] }

    你还能够指定插件的相对/绝对路径。

{ "plugins": ["./node_modules/asdf/plugin"] }

 

4、插件的短名称

    

    若是插件名称的前缀为 babel-plugin-，你还可使用它的短名称：

1 { "plugins": [ 
2         "myPlugin”,
3         "babel-plugin-myPlugin" // 两个插件实际是同一个
4     ] 
5 }

   

     这也适用于带有冠名（scope）的插件：

　　

1 { "plugins": [ 
2         "@org/babel-plugin-name”, 
3         "@org/name" // 两个插件实际是同一个 
4     ] 
5 }

 

5、插件顺序

• Plugin 会运行在 Preset 以前。
• Plugin 会从第一个开始顺序执行。ordering is first to last.
• Preset 的顺序则恰好相反(从最后一个逆序执行)。

 

经常使用插件说明

 

一、babel-core //必备的核心库

二、babel-loader //webpack loader配置必备

三、babel-preset-env //有了它，你再也不须要添加201五、201六、2017，全都支持

四、babel-preset-stage-0 //有了它，你再也不须要添加stage-1,stage-2,stage-3,默认向后支持

五、babel-plugin-transform-runtime 、babel-runtime   //支持helpers，polyfill，regenerator配置

     

　　 babel-plugin-transform-runtime该插件主要作了三件事

• 自动转换generators/async
• 使用core-js来按需给内置类型打上polyfill。(这一点和useBuiltIns:'usage'同样)
• 经过helpers 选项自动移除嵌入的babel helper,而且用module引用来代替。不然每一个文件中都会加入这些inline babel helper,形成代码冗余。默认为ture。

      @babel/runtime 和 @babel/polyfill 虽然都是为内置类型打上垫片，可是 @babel/runtime是在模块内起做用，不会污染全局的Promise,Map...。因此实例的方法不会被 polyfill。

     可是若是运行环境很low，好比好比说Android一些老机子，而你有须要大量使用 Promise、Object.assign、Array.find之类的全局对象或者其所属方法，那么使用 babel-polyfill，绝对是一劳永逸。

     接着，再来讲说 babel-runtime，相对而言，它的处理方式比较温柔，套用步步高的广告词就是哪里须要加哪里，好比说你须要 Promise，你只须要 import Promise from 'babel-runtime/core-js/promise'便可，这样不只避免污染全局对象，并且能够减小没必要要的代码。

     不过，若是N个文件都须要 Promise，难道得一个个文件的加 import Promise from 'babel-runtime/core-js/promise'么，显然不是，Babel已经为这样状况考虑过了，只须要使用 babel-plugin-transform-runtime就能够轻松的帮你省去手动import的痛苦，并且，它还作了公用方法的抽离，哪怕你有100个模块使用了 Promise，可是 promise的 polyfill仅仅存在1份，全部要的地方都是引用一地方，具体的配置参考以下：

 1 // .babelrc
 2 {
 3   "presets": [
 4     "env",
 5     "stage-0"
 6   ],
 7   "plugins": [
 8     "transform-runtime"
 9   ],
10   "comments": false
11 }

    

　　 @babel/plugin-transform-runtime 还能够和 preset-env中的 useBuiltIns一块儿使用，做用的顺序按照plugins --> presets 的顺序，也就是先使用 @babel/plugin-transform-runtime 打上垫片，而后再使用 @babel/polyfill 再打上一次垫片。

 

若是使用react:

一、babel-plugin-transform-decorators-legacy //支持修饰符语法 @connect

二、babel-preset-react //支持解析react语法,若是使用vue把react替换成vue就好

 

若是须要热更新：

一、react-hot-loader //虽然它长得不像babel，可是它也须要在babelrc作配置

 

 

最后总结

 

主要几个配置

• presets ： 预设，插件的集合，倒序执行
• plugins ： 插件，先执行插件，在执行预设，顺序执行
• ignore ： 忽略的文件
• minify ： 压缩代码
• common : 是否须要注释
• env ： 设置不一样的环境，应用不一样的配置，配置取值：BABEL_ENV，如若没有取 NODE_ENV 的值，默认为 development.

常见预设

• env  ： 用于替换 es2015 /  es2016 / es2017 的预设。根据环境引入插件
• react ：react的插件集合
• react-optimize ： react 代码优化，如去除 propsType 减小生产上面代码
• stage-x ：草案代码插件集合
• flow ： flow 插件集合
• minify ： 代码优化的集合
• typescript ： typescript 插件集合

经常使用插件

• transform-async-to-generator ： 异步函数 async/await 插件
• transform-decorators-leagacy : 装饰器插件
• syntax-dynamic-import ：import() 插件
• transform-runtime ： 辅助器插件，用于ployfill
• transform-object-rest-spread : 用于合并 var test = {a:1,b2};var t = {...test,n:1}
• transform-funciton-bind : 用于编译 obj::fun => fun.bind(obj)

 

资料来源：

http://www.javashuo.com/article/p-urppycsz-h.html

http://www.javashuo.com/article/p-oocbgzib-mb.html

http://www.javashuo.com/article/p-kjsezjno-km.html

https://blog.csdn.net/weixin_34409703/article/details/88659503

http://www.javashuo.com/article/p-ppjleyvr-dt.html

https://www.babeljs.cn/docs/

http://www.javashuo.com/article/p-pksgcres-gr.html

https://browserl.ist/