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"
  ]
}