首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述.
在上一章说过babel是一个javascript编辑器,在react项目中使用babel有以下两个目的:
1:让代码支持ES6语法
2:支持react的一些特性(例如JSX语法)
针对以上两个特性,有如下两个presets可以完美解决
babel-preset-es2015 babel-preset-react
之前我们说过webpack中的loader是用于文件特定格式的转换,那么在这里我们就需要安装Babel loader
//安装babel-core核心模块和babel-loader npm install babel-core babel-loader --save-dev //安装ES6和React支持 npm install babel-preset-es2015 babel-preset-react --save-dev
babel安装完成后,接下来要做的当然是配置该插件了,让我们新建一个.babelrc的配置文件
{
"presets":["es2015","react"],
"plugins":["transform-object-rest-spread"]
}当然这些当然还不够,在写大型项目的时候一个统一的代码规范是必须的,这样有助于提高开发效率,在这里给大家推荐一下ESLint,他的强大之处和babel有点相似,提供一个完全可配置的检查规则,而且提供了非常多的第三方plugin,适合不同的开发场所,还能输出详细的错误信息,当然最6的一点是它支持ES6最新语法的同时还支持JSX语法,所以说他为React的绝配也不为过.
一、安装ESLint loader
同样为webpack添加这个loader 当然更准确的说是preloader 为什么这么说呢 代码规范检查肯定是要在代码编译之前来执行的,接下来就来安装这个loader,同时eslint也提供了完整的代码检查规则plugin我们就一同安装下
npm install eslint eslint-loader --save-dev npm install eslint-plugin-import esling-plugin-react eslint-plugin-jsx-a11y --save-dev npm install eslint-config-airbnb --save-dev
接下来我们来配置.eslintrc
延伸阅读
学习是年轻人改变自己的最好方式