webpack配置es6、es7转es5

目录

es6高级语法转换一 （箭头函数等）

es6高级语法转换二（class等） 

es6高级语法转换三（装饰器）

es6高级语法转换四（异步语法generater、promise）

es6高级语法转换五（includes等方法）

---

es6高级语法转换一 （箭头函数等）

安装插件

yarn add babel-loader @babel/core @babel/preset-env -D

说明：

babel-loader  转换加载器

@babel/core  Babel的核心模块，可以调用transform方法进行源代码的转换

@babel/preset-env  转换模块，告诉transform 如何转换（es6转换为es5）

配置 

module:{
   rules:[
     {
       test:/\.js$/,
       use:{
          loader:'babel-loader',
          options:{ //用babel-loader 把es6 --> es5
             presets:[
                '@babel/preset-env'
             ]
          }
       }
     }
   ]

}

es6高级语法转换二（class等） 

 安装插件

yarn add @babel/plugin-proposal-class-properties -D

配置 

module:{
   rules:[
     {
       test:/\.js$/,
       use:{
          loader:'babel-loader',
          options:{ //用babel-loader 把es6 --> es5
             presets:[
                '@babel/preset-env'
             ],
             plugins:[
                '@babel/plugin-proposal-class-properties'
             ]
          }
       }
     }
   ]
}

es6高级语法转换三（装饰器）

安装插件

npm install --save-dev @babel/plugin-proposal-decorators

 设置

{
  "assumptions": {
    "setPublicClassFields": true
  },
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties"]
  ]
}

es6高级语法转换四（异步语法generater、promise）

 安装插件

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

生产环境也需要 ，所以不用加 -dev

npm install --save @babel/runtime

 配置

module:{
   rules:[
     {
       test:/\.js$/,
       use:{
          loader:'babel-loader',
          options:{ //用babel-loader 把es6 --> es5
             presets:[
                '@babel/preset-env'
             ],
             plugins:[
               ["@babel/plugin-proposal-decorators", { "legacy": true }],
               ["@babel/plugin-proposal-class-properties"],
               "@babel/plugin-transform-runtime"
             ]
          }
       },
       include:path.resolve(__dirname,'src'),
       exclude:/node_modules/
     }
   ]
}

es6高级语法转换五（includes等方法）

安装插件

yarn add @babel/polyfill

 使用时，只需要在页面引入

import "@babel/polyfill";
//require("@babel/polyfill");

以上就是全部支持高级语法转换低级语法的插件及配置，更详细的配置可以查看babel官网的文档说明。