Babel
是什么? Babel
是一个编译JavaScript
的平台,它的强大之处表如今能够经过编译达到如下目的:java
使用下一代的javaScript代码(ES6,ES7….),即便这些标准目前并未被当前的浏览器彻底支持。node
使用基于JavaScript进行了扩展的语言,好比React的JSX。react
#1.如何让webpack支持babel呢?webpack
Babel
实际上是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack
能够把其不一样的包整合在一块儿使用,对于每个你须要的功能或拓展,你web
都须要安装单独的包(用得最多的是解析ES6
的babel-preset-es2015
包和解析JSX
的babel-preset-react
包)。npm
##1.1.安装 一次性安装这些依赖包(也能够单独安装),此处使用cnpm
安装(也可使用npm
安装):json
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
)):babel
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,会在后续继续学习,这里就算是先过过眼把。
有什么问题,欢迎关注并留言!!