【webpack新手指南】编译ES6(版本4.35)

715 阅读1分钟

webpack安装babel

01、在webpack 4.2以上安装
npm install --save-dev babel-loader @babel/core @babel/preset-env

02、通过配置webpack.config.js中。module.export中的module字段。


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


03、创建.babelrc配置文件

在项目根目录中创建.babelrc配置并启用一些插件

首先,可以使用env预设,它可以为ES2015 +进行变换

npm install @babel/preset-env --save-dev

要启用预设,必须在.babelrc文件中定义它,如下所示:

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


04、@babel/cli从终端运行Babel,@babel/polyfill以填充所有新的JavaScript功能,env预设只包含我们使用的功能以及目标浏览器中缺少的功能的转换和polyfill。


05、或者在package.json中配置babel字段。

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": ["@babel/preset-env"],
  //  "plugins": ["babel-plugin-myPlugin"],
  }
}

06、现在可以使用ES6、ES7的特性了。