React+webpack开发环境的搭建

首先创建项目,确保该项目已经安装了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

{
    "extends":"airbnb",//继承插件的检查规则
    "rules": {
        "comma-dangle": ["error","never"] //修改默认规则,数组最后一项不加逗号 例如([1,2,3,4,]修改为[1,2,3,4])
    }
}

babel和eslint配置安装完成后,接下来我们要做的是如何把他们结合在一起,首先我们新建一个webpack.config.js文件,我的配置信息如下:

var path = require('path');
var htmlWebpackPugins = require('html-webpack-plugin');
var extracttext = require('extract-text-webpack-plugin');

//定义常用路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH,'app');
var BULID_PATH = path.resolve(ROOT_PATH,'build');
module.exports = {
    entry:{
        app:path.resolve(ROOT_PATH,'index.jsx')
    },
    output:{
        path:BULID_PATH,
        filename:'bundle_[hash].js'
    },
    devtool:eval-source-map, //开启热更新
    devServer:{
        historyApiFallback:true,
        hot:true,
        inline:true,
        progress:true
    },
    module:{
        rules:[{
            test:/.css$/,
            use: extracttext.extract({
              fallback: "style-loader",
              use: "css-loader"
            }),
            test:/.jsx?$/,
            use:'babel-loader'
        }],
    },
    resolve:{
        ['.js','.jsx'] //添加拓展名
    },
    plugins:[
        new htmlWebpackPugins({
            title:'myfirstreact',
            minify:false
            // templateContent:function(){
            //     var html = "<div></div>";
            //     return html;
            // }
        }),
        new extracttext('styles.css')
    ]
}

配置文件写好以后开始书写项目的入口文件app.jsx,当然再次之前我们需要引入react库添加进去:

npm install react-dom --save //因为生产环境需要 所以用--save

最后便开始书写我们的app.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
function App(){
    return (
        <div>
            <h1>helslgggos react</h1>
        </div>
    )
}
const app = document.createElement('div');
document.body.appendChild(app);

至此我们的react基础环境就搭建成功了,执行命令npm run dev 可以看到酷炫的热加载效果  so cool ok今天的分享就到这里了