最簡單的babel+webpack配置

首先先介紹一下2個重要的庫：core-js 和 regenerator

core-js

core-js 是用於 JavaScript 的組合式標準化庫，它包含 es5 （e.g: object.freeze）, es6的 promise，symbols, collections, iterators, typed arrays， es7+提案等等的 polyfills 實現。也就是說，它幾乎包含了全部 JavaScript 最新標準的墊片。不過爲何它不把 generator 也實現了... 😁

regenerator

它是來自於 facebook 的一個庫。主要就是實現了 generator/yeild， async/await。

 

下面咱們看看配置

package.json

{ "name": "babel-test", "main": "main.js", "scripts": { "start": "webpack" }, "devDependencies": { "@babel/cli": "^7.5.5", "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "babel-loader": "^8.0.6", "webpack": "^4.38.0", "webpack-cli": "^3.3.6" }, "dependencies": { "core-js": "^3.1.4", "regenerator-runtime": "^0.13.3" } }

@babel/cli @babel/core 是最基礎的2個依賴，結合使用能夠把js代碼解析成AST，傳給plugins，而後再反解析會來編譯結果

@babel/preset-env 是babel plugins的預設，它能根據配置，很智能的配置須要的plugins

webpack webpack-cli babel-loader 就是配合babel使用的模塊管理器的相關依賴了

core-js regenerator-runtime 上面其實已經介紹過了，是做爲polyfill，供@babel/preset-env使用（適當的配置，能夠把這2個庫的代碼，按需打入bundle）

 

babel.config.js

module.exports = { presets: [ [ "@babel/preset-env", { "corejs": "3", // 指定core-js的版本，2或者3，這裏咱們用最新版3
        "useBuiltIns": "usage", // usage是最佳實踐，會按需把core-js和regenerator引入（所謂按需就是按下面的target和編譯的js用到的es6語法來判斷）
        "targets": { // 目標瀏覽器
          "chrome": "58", "ie": "9", } }, ] ], 　exclude: [/node_modules/] // 不要編譯node_modules，否則會出一些奇奇怪怪的問題
};

 

webpack配置:

const path = require('path'); module.exports = { mode: "development", entry: { app: './main.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname, './dist'), }, module: { rules: [ { test: /\.js$/, use: ['babel-loader'], // exclude: /node_modules/ // exclude寫在babel.config.js，這裏就能夠不寫了
 } ] } };

主要就是配置用babel-loader