(15/24) 为webpack增长babel支持

Babel是什么？ Babel是一个编译JavaScript的平台，它的强大之处表如今能够经过编译达到如下目的：

使用下一代的javaScript代码(ES6,ES7….)，即便这些标准目前并未被当前的浏览器彻底支持。

使用基于JavaScript进行了扩展的语言，好比React的JSX。

#1.如何让webpack支持babel呢？

Babel实际上是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack能够把其不一样的包整合在一块儿使用，对于每个你须要的功能或拓展，你

都须要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

##1.1.安装 一次性安装这些依赖包（也能够单独安装）,此处使用cnpm安装（也可使用npm安装）：

cnpm  install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

--save-dev：表示将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

此处注意版本兼容问题，若出现版本兼容问题，可先删除node_modules而后安装我此处使用的版本（删除node_modules后直接修改package.json中版本，而后使用npm install 便可（或cnpm install））：

cnpm  install --save-dev babel-core@6.26.3 babel-loader@7.1.4 babel-preset-es2015@6.24.1 babel-preset-react@6.24.1

##1.2配置Babel 在webpack.fonfig.js中进行配置：

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/  //排除node_modules下面的包
}

##1.3 修改entry.js中的js代码：

{
    let test= 'Hello Webpack'
    document.getElementById('title').innerHTML=test; 
}

##1.4 打包 上面的代码使用了ES6的let声明方法。若是不使用Babel来进行转换，咱们打包出来的js代码没有做兼容处理，使用了Babel转换的代码是进行处理过的，转成了

es5的语法。

使用webpack命令进行打包

webpack

经过上述的配置，webpack其实已经支持babel，可是不是最好的选择，还能够进行优化。

#2. .babelrc配置 虽然Babel能够直接在webpack.config.js中进行配置，可是考虑到babel具备很是多的配置选项，若是都写在webapck.config.js中会很是的雍长不利于阅读，

因此咱们常常把配置写在.babelrc文件里。

##2.1 新建.babelrc 在项目根目录新建.babelrc文件，并把配置写到文件里。 .babelrc:

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

此时的webpack.config.js文件里loader配置变为：

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}

此时咱们打包，效果与上面的一致。

经过.babelrc的配置，使babel相关配置与webpack.config.js分离开来，便于阅读与维护。但此时.babelrc配置文件里的相关配置信息有点落伍了，下面来学学新一

代的babel-preset。

#3.ENV的使用

如今网络上已经不流行babel-preset-es2015，如今官方推荐使用的是babel-preset-env,为了避免落伍咱们就来学学ENV的相关知识：

##3.1 插件下载（也可使用cnpm）

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

##3.2 修改.babelrc里的配置文件

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

##3.3 打包

此时咱们再使用webpack命令进行打包，最终的打包结果也上述都一致。

对于在React中Babel的使用，如何解析JSX,会在后续继续学习，这里就算是先过过眼把。

有什么问题，欢迎关注并留言！！