Skip to content

使用Babel处理ES6语法

https://www.babeljs.cn/

https://www.babeljs.cn/setup#installation

npm install --save-dev babel-loader @babel/core

1
2
3
4
5
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

npm install @babel/preset-env --save-dev

1
2
3
4
5
6
7
8
rules: [{ 
  test: /\.js$/, 
  exclude: /node_modules/, 
  loader: "babel-loader",
  options: {
    "presets": ["@babel/preset-env"]
  }
},

npm install --save @babel/polyfill

index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import "@babel/polyfill";

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
]

arr.map(item => {
  console.log(item);
})

1
2
3
     Asset       Size  Chunks             Chunk Names
index.html  197 bytes          [emitted]  
   main.js    934 KiB    main  [emitted]  main

打包后的main.js特别大

useBuiltIns

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
rules: [{ 
  test: /\.js$/, 
  exclude: /node_modules/, 
  loader: "babel-loader",
  options: {
    "presets": [["@babel/preset-env", {
      useBuiltIns: 'usage'
    }]]
  }
},

1
2
3
 Asset       Size  Chunks             Chunk Names
index.html  197 bytes          [emitted]  
   main.js    165 KiB    main  [emitted]  main

transform-runtime

上面的适合写业务代码，但是如果写的是类库需要用下面的方式(因为presets会污染全局环境)

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

npm install --save @babel/runtime-corejs2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
options: {
  // "presets": [["@babel/preset-env", {
  //   targets: {
  //     chrome: "67",
  //   },
  //   useBuiltIns: 'usage'
  // }]]
  "plugins": [["@babel/plugin-transform-runtime", {
    "corejs": 2,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
  }]]
}

.babelrc

.babelrc

1
2
3
4
5
6
7
8
{
  "plugins": [["@babel/plugin-transform-runtime", {
    "corejs": 2,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
  }]]
}

.babelrc

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  "presets": [
    [
      "@babel/preset-env", {
        targets: {
          chrome: "67",
        },
        useBuiltIns: 'usage'
    }]
  ]
}