猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 >

Babel

 

官方介绍:将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的  javascript 代码。

简而言之,就是把不兼容的 JavaScript 代码转为可兼容,可以执行的 JavaScript 代码。

 

  功能:

 

    语法转换 

    添加一些兼容性的 polyfill 功能

    源码转换等

 

  简单配置预览:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "plugins": [],  // 插件配置
    "presets": []   // 预设配置
}
 
// 这里 .babelrc 配置的
 
 
// 官网建议用 module 的形式来配置,bable.config.js
 
const presets = []
const plugins = []
module.exports =  { presets, plugins }

  

 

  配置介绍:

 

    presets :是某一类 plugin 的集合,包含了某一类插件的所有功能。

    plugin : 将某一种需要转化的代码,转为浏览器可以执行代码。

 

 

  编译的执行顺序:

 

    1、执行 plugins 中所有的插件

    2、plugins 的插件,按照顺序依赖编译

    3、所有 plugins 的插件执行完成,在执行 presets 预设。

    4、presets 预设,按照倒序的顺序执行。(从最后一个执行)

    5、完成编译。

 

  1、主要插件介绍

 

    babel-preset-es2015 ( ES2015 / ES6 插件集合 )

    将 ES2015(es6) 的 javascript 代码 转化 浏览器兼容 javascript 代码

 

    arrow-functions  :箭头函数

    block-scoped-functions  :函数命名的方式转话,改为赋值的形式

    block-scoping  :let  转为 var

    classes  : es6 的类转化

    computed-properties  :属性命名的转化,如:var obj = { ['x'+a]: 1 }

    destructuring  :析构函数转化

    duplicate-keys  :属性优化

    for-of  :for of 的转化

    function-name  :优化函数命名

    instanceof  :instanceof 转化

    literals  :不同类型复制优化

    new-target  :继承 extends 转化

    object-super  :super 转化

    parameters  :params ,(a=1,b=2)=>{} , 默认参数转化

    shorthand-properties  :对象属性转化 {a,b} => {a:a,b:b}

    spread  :扩展属性转化 {...other}

    sticky-regex  :regex 优化,用 new Regex构建

    template-literals  :字符串模版 

    typeof-symbol  :symbol 转化

    unicode-regex  :将正则的匹配字符串转为 unicode

    

    

    babel-preset-es2016 ( ES2016 / ES7 插件集合 )

    将 ES2016(es7) 的 javascript 代码 转为 浏览器兼容代码

 

    exponentiation-operator  :幂运算转化  x **= 3 ,x的3次幂

 

 

    babel-preset-es2017( ES2017 / es8 插件集合 )

    将 ES2017(es8) 的代码进行转化    

 

    async-to-generator  : 转化 async/await 转为 generator 函数

 

 

    babel-preset-stage-x ( ES2018/stage 插件集合 )

    将 stage 阶段的代码转化

 

    async-generator-function  :将异步函数进行转化

    dotall-regex  :点号正则优化

    object-rest-spread  :解析构优化

    optional-catch-binding  :catch 加 finally 优化

    unicode-proprty-regex  

 

    

    Modules

    modules-amd / modules-commonjs / modules-systemjs / modules-umd

    将不同的 export default x  转为不同的模块形式 amd / commonjs / systemjs / umd

 

 

    Experiental ( 试验阶段 )

 

    class-properties  :class 的静态属性转化

    decorators    :装饰器转化

    do-expressions  

    export-default-from  :export 优化

    export-namespace-from  :export 优化

    function-bind  :bind 函数转化,obj::fun => fun.bind(obj)  ::obj.fun => obj.fun(obj)

    function-sent  

    logical-assignment-operators   

    nullish-coalescing-operaor

    numeric-separator

    optional-chaining

    pipeline-opertor

    throw-expressions    

 

      Minification( babel-minify )

    运用代码压缩优化插件预设

 

    ...

    这里自行可以去官网上查看...

 

    

    babel-preset-react ( react 集合 )

    react 的相关编译转化...

    jsx 和 element 的一下转化

    直接添加 react 的预设就可以了。

 

  

    Other 其他一些插件

    

    jscript  :严格模式命名

    object-assgin  :assgin 转化

    regenerator  :generator 函数的转化

    object-set-prototype-of-to-assign  :setPrototype 转化

    runtime 

 

 

  2、主要 presets 介绍

    

    @babel/preset-dev

 

    是一个智能预设。

    根据浏览器和运行环境,自动的确定 babel 插件和 polyfills 。

    没有任何配置的情况下,和 babel-preset-latest 一样 ( es2015/es2016/es2017一起使用 )。

1
2
3
{
  "presets": [ "dev" 
}

  

  配置及其详解:

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "presets": [
    [
      '@babel/preset-env',
      {
        'target':{
          "browser":["ie>=8","chrome>=62"],
          "node":"8.9.0",
          "safari":"tp"
        },
        "modules":false,
        "debug":true,
        "uglify":true
        "useBuiltIns":true
      }
    ]
  ]
}

  

  target : 描述您为项目配置的 支持/定位 的环境

    browsers :浏览器的支持情况,将返回支持浏览器列表。 会被 target.ie 覆盖

      [ 'ie>=8' ]    支持 ie8 的环境

      "default"     默认

    node :指定是 node 环境,且可以指定版本

    safari : safari 版本

  modules : 启用将 es6 转为其他模块

  debug : 是否启用 console.log 

  include / exclude : 必须启用的 plugin 功能 / 不启用的 plugin 功能

  uglify : 压缩代码

  useBuiltIns : 

    false : 引用所有的 babel-polyfill , 在 webpack 中添加 babel-polyfill 入口处:

          entry:[ 'babel-polyfill' , 'index.js' ] , 引用所有的 polyfill,体积变大

    true : 引用部分,根据配置的 preset-env 环境,引用 polyfill ,

         在入口文件中要引用 babel-polyfill

 

 

  @babel/preset-react

  这都是一些 react 相关的集合

  不需要介绍了,有需要自己去官网浏览下.

    

   

  Stage-x

  草案中的预设..

  该插件集合不存在 preset-env 集合中,所以需要引用....

 

 

  3、babel-polyfill 兼容方法

 

  babel的 preset-dev 中只会转化新的 Javascript 语法,不会转化新的 api。

  例如:Generator / Set / Map 等 

  就是实现 babel 转化后的代码中,仍有不兼容的代码的转化。

 

  原理:

  babel-folyfill 是修改全局的对象的原型,添加不兼容的 api 方法,或者修改不兼容的 api 方法。

  

 

  用法:

 

  1、在入口文件的顶部添加:

1
2
3
require('@babel-polyfill');
 
import '@babel-polyfill'

  

  2、webpack 中添加

 

1
2
3
{
  entry:['@babel-polyfill','./app.js']
}

  在 webpack 的配置文件中添加。

 

  3、直接在 html 中引用,在打包 js 的文件之前

 

1
<script src = './babel-polyfill.js' ></script>

  

 

  4、transform-runtime 插件

 

  对 babel 转化后的代码,进行再次转化,与 babel-polyfill 一样,解决不兼容的全局 api 。

  与 babel-polyfill 不同是它不是添加/修改全局对象。

  它是对不兼容的方法进行特殊处理,也就是添加辅助方法来做兼容。

  并且 transform-runtime 是在需要进行兼容转化时候引用。

  transform-runtime 是依赖 babel-runtime ,且辅助方法都是引用的 babel-runtime

  

 

  特点:

  不会污染全局变量,因为不会修改全局对象

  没有修改实例的方法,所以有些方法不能实现。

 

1
2
3
4
5
6
["transform-runtime", {<br>    "corejs":false,
     "helpers"false,
     "polyfill"false,
     "regenerator"true,
     "moduleName""babel-runtime"
}]

  

  helpers : 是否使用 @babel-runtime/helpers 来代替内部的 helpers

  coresjs : 是否用 @babel-runtime/corejs 中的辅助方法来替换 Map / Set 等方法

  polyfill : 是否用 @babel-runtime 的辅助函数来代替 polyfill

  regenerator : 是否用 辅助函数来代替 async / generator 函数

  moduleName : 引用时候名字

 

 

  5、@babel-register

 

  通过 @babel-register 来注册当前所有的代码需要转码

 

1
2
3
var fs = require('fs');
var babelConfig = JSON.parse(fs.readFileSync('./.babelrc'));
require('babel-register')(babelConfig);

  

  很显然,这里可以传入一个 .babelrc 配置文件来进行转码时候的配置。

  只需要添加到入口文件中。

  node 端就可以这这样实现 babel 的转码。

 

  6、tools

  babel-parser  : babel 的解析器,用于解析 Javascript / jsx / Typescript / flow 等代码

  babel-core : babel 的核心文件,用于转码的

  babel-generator : 代码的转化,源码和转化代码

  babel-code-frame : 代码转化位置等转码映射

  babel-helpers : 辅助器方法

  babel-runtime : 提供了一些列的辅助方法,与 polyfill 类似

  ...

 

 

@bable/babel-cli 命令行工具

 

  用于命令行编译文件,可以进行配置以及输出等操作。

 

  用法:

1
2
babel  input.js -options
// 编译 input.js  文件

  

  配置 :

  -o : 输出路径

  -w :监听编译文件,实时编译

  -s  :输出source-map ,可以内敛

  -d  :当编译一个目录时候,-d 输出目录

  --ignore : 忽略的文件

  --plugins : 使用插件,用 , 隔开

  --presets : 使用预设,用 , 隔开

  --config-file : 使用 .babelrc 文件路径

  

 

 

.babelrc 配置详解

 

  配置转化起 babel 三种不同作用:

  

    1、用于语法转义的配置。 preset-env / stage-x 主要用于 es 的语法转义,

    2、用于补丁的配置,即 polyfill 的配置。主要是 transform-runtime 。

    3、用于不同框架的配置,如:react的jsx /flow 等

 

  例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "presets":[
    "react",
    ["env",{...}],
    "stage-0"
  ],
  "plugins":[
    "pluginName",
    ["transform-runtime",{...}]
  ],
  "ignore":["path",'file'],
  "miniied":boolean,
  "comments":boolean,
  "env":{
    "test":{
      "presets":[],
      "plugins":[]
    }
  },
  ...
}

  

  

  主要几个配置

    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)

  

  

  transform-es2015-modules-commonjs :es6 module 在 node 使用


凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词:
0

网友评论