前端小白入门webpack之ES6转ES5的babel

---

前言

我们学习的前端语法在不断的与时具进，语法有在不断的转变，从我们的ES5到ES6。
这样就会带来一个问题：有些浏览器不兼容ES6，但是我们是用ES6语法写的。
此时我们就要用到webpack中的babel将文件打包的时候，语法设置为ES5。

---

一、操作流程

1.安装我们的babel包

npm install --save-dev babel-loader babel-core bebel-preset-es2015

babel-loader: 我们需要转化的转化装置
babel-core：装置转化时需要的一些依赖
bebel-preset-es2015：es6转化为es5的配置文件

2.到我们的webpack.config.js中去配置打包js文件时，自动将ES6转为ES5

      {
     
        test: /\.js$/,
        // exclude:排除
        // include:包含
        exclude: /(node_modules|bower_components)/,
        use: {
     
          loader: 'babel-loader',
          options: {
     
            presets: ['es2015']
          }
        }
      }

test：将以js结尾的进行转化
exclude：排除我们node_modules 和 bower_components这两个文件夹
loader：匹配的loader包是-babel-loader
presets：预设为我们的es2015

3.好的，现在我们进行npm run build进行打包
打包后的bundle就全部采用ES5的语法啦！

---

总结

今天，学习对于ES6转化为ES5的打包方式，可以为我们后续打包部署项目得到更多的便利。

今日推荐

开发：菜鸟教程-可以查开发文档的网站