简单10步，徙手搭建React开发环境

抛开各种脚手架工具，徙手搭建React开发环境，实现代码自动编译、ESLint规范检测、本地HTTP服务、HMR热替换、Webpack打包等需求。初步感受React工程架构的各个小细节中到底做了啥。

第1步：初始化项目目录

$ mkdir react-app

$ cd react-app

$ npm init --yes

第2步：安装Babel。目的是让代码支持ES6语法，同时支持React特性（例如JSX语法等）。

$ cnpm install babel-preset-es2015 -D // 支持ES6语法

$ cnpm install babel-preset-react -D // 支持react特性和JSX语法

$ cnpm install bable-core -D // babel核心模块

$ cnpm install babel-loader -D // babel-loader，用于webpack

第3步：配置.babelrc

{

// 告诉Babel，编译JS代码时，使用这两个preset来编译

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

// 在开发环境时，才启用HMR功能

"env": {

"development": {

"presets": ["react-hmre"]

}

}

}

第4步：安装ESLint

$ cnpm install eslint -D

$ cnpm install eslint-loader -D // 用于webpack-preLoader

使用Airbnb提供的第三方ESLint格式插件

$ cnpm install eslint-config-airbnb -D

$ cnpm install eslint-plugin-import -D

$ cnpm install eslint-plugin-react -D

$ cnpm install eslint-plugin-jsx-a11y -D

第5步：配置.eslintrc

{

// 指定继承airbnb提供的ESLint格式规则

"extends": "airbnb",

// 修改默认的lint规则

"rules": {

"comma-dangle": ["error", "never"],

"linebreak-style": [0]

}

}

第6步：安装webpack

$ cnpm install webpack -D

$ cnpm install webpack-dev-server -D // 用于devServeer

$ cnpm install html-webpack-plugin -D

$ cnpm install babel-preset-react-hmre -D // 用于热替换

const path = require('path')

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const APP_PATH = path.join(__dirname, '/app')

const BUILD_PATH = path.join(__dirname, '/dist')

const MODULE_PATH = path.join(__dirname, '/node_modules')

const config = {

// 入口配置

entry: {

app: './app/app.jsx'

},

// 输出配置

output: {

filename: 'bundle.js',

path: BUILD_PATH

},

// 开启source-map调试

devtool: 'eval-source-map',

// 开启devServer

devServer: {

contentBase: BUILD_PATH,

port: 8899,

historyApiFallback: true,

hot: true,

inline: true,

progress: true

},

// 配置resolve规则

resolve: {

extensions: ['.js', '.jsx', '.json']

},

// 配置eslint和loaders

module: {

rules: [

{

enforce: 'pre',

test: /.(jsjsx)$/,

loader: 'eslint-loader',

exclude: [

MODULE_PATH

]

},

{

test: /.jsx$/,

loader: 'babel-loader',

exclude: [

MODULE_PATH

]

},

{

test: /.js$/,

loader: 'babel-loader',

exclude: [

MODULE_PATH

]

}

]

},

// 配置plugins

plugins: [

new HtmlWebpackPlugin({

title: 'react demo',

template: './index.html'

})

]

}

module.exports = config

第8步：在package.json中自定义npm scripts命令

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack-dev-server --hot"

}

// 命令行使用

$ npm run build // 打包项目

$ npm run dev // 启动项目

第9步：安装React核心库

$ cnpm install react -S

$ cnpm install react-dom -S

第10步：开始React编码（ ./app/app.jsx ）

import React from 'react';

import ReactDOM from 'react-dom';

function App() {

return (

Hello World.

);

}

const app = document.createElement('div'); // eslint-disable-line

document.body.appendChild(app); // eslint-disable-line

ReactDOM.render(, app);

最终项目目录结构如下：

--app目录，是源码存放的主目录，在这里就可以写react代码了。--dist是由webpack打包后的最终代码。

参考资料：张轩《React全栈整合开发》