webpack打包（八）--babel

接上一篇webpack打包（七）--使用sass

在webpack打包（三）--使用loader中就使用过了babel-loader的预设编译react,babel能处理的事情还有很多，比如处理es6代码。

安装CLI和预设

npm i -D babel-cli babel-preset-es2015

es2015依赖于babel-cli

配置

在webpack.cnofig的babel-loader中加入es2015

use: [{
        loader: "babel-loader",
        options: {
                    presets: ["react","es2015"]
                }
      }]

使用es6

在app.js中添加一些es6语法的代码进行测试

import React from "react";
import ReactDOM from "react-dom";

import "./common/style/sass_main.scss"

let a = "haha";
console.log(a);

() => 3.14

let b = () => { console.log("ddd") }
b();

ReactDOM.render(
    <div>
        React
        <span>span</span>
    </div>,
    document.getElementById("root")
);

npm start运行，在浏览器中查看源代码发现已经把es6代码转换为es5

关于env预设

es2015只能处理es6代码，要是里面有es2016,es2017的语法，可以使用env处理，使用npm i -D babel-preset-env安装下载，直接把babel-loader里面的es2015改成env就可以了

关于.babelrc

.babelrc是babel的一个配置文件，当使用很多babel-loader预设的时候，可以把预设提取出来放到.babelrc里面，比如把上面的babel-loader预设删掉

 use: [{ loader: "babel-loader"}]

在根目录下面新建.babelrc文件，内容：

{
  "presets": ["react","env"]
}

更多.babelrc用法看这里
更多babel使用看这里