Webpack支持ES6+ES7的语法打包

ES6和ES7出了也有一段时间了，但是市场上主流的浏览器其实支持都还不算太好，有的语法任然是不支持的。

那么我们可以使用weopack来将高级的语法转换成低级语法，也就是将ES6/ES7的代码转换为ES5的代码（JS）。

那么Webpack本身是支持一部分ES6语法的打包的，但是支持的不完整。所以我们需要使用Babel来解决这个问题。

---

1.新建立一个Webpack项目，那么不知道如何使用Webpack的请看我之前写的文章。

 

2.安装Babel所需要使用的库和插件，列举在下面

（注意这里一定不要用最新版本，并且严格按照我文章中给出来的版本号安装！这个很重要！很重要！很重要！）

　　一.babel-core、babel-loader、babel-plugin-transform-runtime、babel-preset-env、babel-preset-stage-0

　　二.安装以上的插件，这里使用对应的版本，命令如下

npm i babel-core@6.26.3

npm i babel-loader@7.1.5

npm i babel-plugin-transform-runtime@6.23.0

npm i babel-preset-env@1.7.0

npm i babel-preset-stage-0@6.24.1

　　三.创建配置文件,在项目根目录下创建一个名为 “.babelrc” 的文件，注意该文件名前面有一个点,填写如下内容

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}

　　四.打开webpack.config.js配置文件(如果没有该文件你需要手动去创建,然后可以去webpack的官网找到相应的配置)填写如下配置

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

exclude这个必须加,如果不加的话在打包的时候会吧node_modules目录下的js文件也一起打包过去，这样的话会耗费电脑的资源，同时打包出来的文件也无法使用。

 

3.这里我使用自定义配置的 npm run dev 命令运行配置！

提示这个就代表你已经可以编译ES6/ES7语法的JS文件了！

转载于:https://www.cnblogs.com/Richard-Tang/p/9875607.html