ES6和Babel

參考資料：

1. 快樂動起來呀 的 ES6和Babel你不知道的事兒'
2. babel官網

babel-loader babel-core

只配置babel-loader babel-core是無法知道用什麼規則來打包的，需要安裝Babel Presets 新版 裝npm install -save-dev babel-loader@8.0.0-beta.0 @babel/core

老版 裝npm install –save-dev babel-loader babel-core

---

Babel Presets有很多的版本

es2015

es2016

es2017

新版 env

babel-preset-react

babel-preset-stage 0-3

如果上面裝的新版的就用npm install @babel/preset-env –save-dev

如果是普通版的就用npm install babel-preset-env –save-dev

裝好後要給loader指定presets引數

還可以設定目標，比喻哪些瀏覽器可以轉換 targets

targets.browsers

targets.browsers: "last 2 versions" 大於版本2的主流瀏覽器

targets.browsers: "> 1%" 大於全球1%的瀏覽器

browserslist 具體可以參考這個模組

can i use

var path = require('path');
module.exports = {
    entry: {
      app: "./app.js"
    },
    output: {
      filename: "[name].[hash:8].js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: '/node_modules/',
          // exclude: path.resolve(__dirname, 'node_modules'), //編譯時，不需要編譯哪些檔案
          //include: path.resolve(__dirname, 'src'),//在config中檢視 編譯時，需要包含哪些檔案
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                ['@babel/preset-env', {
                  targets: {
                    browsers: ['> 1%', 'last 2 versions']
                  }
                }]//給loader指定presets引數
              ]
            }
          },
        }
      ]
    }
  };
複製程式碼

---

Babel Polyfill, Babel Runtime Transform

以上的只是轉換了es6的語法，對於一些方法和函式是沒有轉換的，所以要用到Babel Polyfill, Babel Runtime Transform 如：Generator、Set、Map、Array.from、Array.prototype.includes等

npm install --save-dev babel-polyfill

在寫es6的頁面中引用 import "babel-polyfill"

npm install @babel/plugin-tra9)nsform-runtime @babel/runtime -–save-dev

.babelrc 檔案

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      }
    }]
  ],
  "plugins": [
    "@babel/transform-runtime"
  ]
}

複製程式碼