webpack4 Babel 处理es6 es7

版本:  webpack 4.x | babel-loader 8.x | babel 7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

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

//使用Polyfill或Runtime Transform 转换es6/7 api

//Babel Polyfill 全局垫片,会在全局进行变量定义 污染全局变量
npm install @babel/polyfill --save
在入口文件中引入import @babel/polyfill

//Babel Runtime Transform 局部垫片,不会污染全局
npm install @babel/runtime --save
npm install @babel/plugin-transform-runtime --save-dev

root目录下新建.babelrc文件,配置:
{
  "presets": [
    ["@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions"]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

 

你可能感兴趣的:(webpack4 Babel 处理es6 es7)