babel-loader配置 @beta版

作用

使用ES6編寫js語法時，由於有些瀏覽器不支持，故需使用babel插件將ES6轉換爲ES5。

安裝

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack --save-dev

webpack 3.x babel-loader 7.x | babel 6.x

npm install babel-loader babel-core babel-preset-env webpack --save-dev

我這裏用第一種。

配置

webpack.config.js

{
	test: /\.js$/,
	loader: ['babel-loader'],
	exclude: /node_modules/
}

新建.babelrc文件，並寫入babel的配置，webpack會依賴此配置文件來使用babel編譯ES6代碼

{
	"presets": ["@babel/preset-env"]
}

或者不使用.babelrc文件，直接加在webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

添加配置
1、babel會在每個文件都插入輔助代碼，使得體積過大，可以引入 babel runtime 作爲一個獨立模塊，來避免重複引入。

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

2、‘modules’:false：設置模塊引用規則，可以設置成"amd" | “umd” | “systemjs” | “commonjs” | false, defaults to “commonjs”,設置了false，就是用es6以上默認的規則。

3、targets.browsers:設置兼容的瀏覽器範圍

4、“comments”: false 刪除已編譯代碼的註釋

.babelrc完整版

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "plugins": ["@babel/transform-runtime"]，
  "comments": false
}

https://www.jianshu.com/p/0dc3bddb6da8?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
https://babeljs.io/docs/en/babel-preset-stage-2/
https://www.webpackjs.com/loaders/babel-loader/