Skip to content

Files

Latest commit

 

History

History
73 lines (57 loc) · 2.93 KB

02-编译ES6.md

File metadata and controls

73 lines (57 loc) · 2.93 KB

babel

babel基础

  1. babel-loader: 负责es6语法转化
  2. babel-preset-env: 包含es6、7等版本的语法转化规则
  3. babel-polyfill: es6内置方法和函数转化垫片。(如Generator、Set、Map、Array.from等) (babel-loader只转化语法)
  4. babel-plugin-transform-runtime: 避免polyfill污染全局变量

babel-loaderbabel-polyfill。前者负责语法转化,比如:箭头函数;后者负责内置方法和函数,比如:new Set()

版本问题和过滤

  • 如果使用 babel-loader@8 以上的版本,需要安装 @babel/core @babel/preset-env @babel/polyfill @babel/runtime -S @babel/plugin-transform-runtime -D 来替代 bable-core babel-preset-env bable-polyfill babel-runtime -S babel-plugin-transform-runtime -D
  • rule.exclude 属性值可以是正则也可以是字符串。 如果是字符串,则该字符串必须为绝对路径,该绝对路径代表的目录被排除在外,例如 exlude: path.resolve(_dirname, 'node_modules'),会排除 __dirname/node_modules/ 这个目录下的所有文件。 如果是正则,则只要路径里的一部分匹配正则表达式,则该目录就被排除在外,例如 exlude: /node_modules/ 会排除 __dirname/node_modules/ 以及 __dirname/src/another_node_modules/ 目录中的所有文件。

Babel Presets

Babel Polyfill 和Babel Runtime Transform

Babel Polyfill

  • 全局垫片
  • 为应用准备
  • npm install babel-polyfill --save
  • import "babel-polyfill"

Babel Runtime Transform

  • 局部垫片
  • 为开发框架准备
  • npm install babel-plugin-transform-runtime --save-dev npm install babel-runtime --save
  • .babelrc

起步

安装 npm i babel-loder (已经是8以上) npm i @babel/core 指定语法 npm i @babel/preset-env

打包

编译 函数和方法 npm i babel-polyfill babel-runtime -S npm i babel-plugin-transform-runtime -D

Babel Runtime Transform

如果使用 babel-loader@8 以上的版本 npm i @babel/runtime -Snpm i @babel/plugin-transform-runtime -D

.babelrc文件

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": { //根据targets 指定哪些语法编译,哪些语法不编译
            "browsers": ["last 2 versions"],
            // "chrome": "52"  //chrome支持大部分ES6语法
          }
        }
      ]
    ],
    "plugins": ["@babel/transform-runtime"]
  }