假设你想要非常快速地搭建一个React应用,或者你想快速地搭建用ES6学习React开发的环境,那么这篇文章你一定不想错过。

我们将使用webpack作为打包工具。我们使用webpack来将ES6代码转译成ES5代码,编译Stylus样式等。如果你没有安装webpack则需先安装它。

1
2
$ npm install -g webpack
$ npm install -g webpack-dev-server

如果遇到类似EACESS错误,则需要用超级用户的模式运行

1
2
$ sudo npm install -g webpack
$ sudo npm install -g webpack-dev-server

接下来创建项目的目录,并且安装hjs-webpack

1
2
3
4
5
6
7
8
9
$ mkdir react-playground && cd $_
$ npm init -y
$ npm install hjs-webpack --save
# 检查npm版本
$ npm -v
# 如果npm版本是3.x.x或者更高执行下面这句
$ npm i --save autoprefixer babel babel-loader css-loader json-loader postcss-loader react react-hot-loader style-loader stylus-loader url-loader webpack-dev-server yeticss

hjs-webpack是一个简化webpack配置流程的工具,它免去了配置复杂的webpack选项的流程。

在项目根目录下创建webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var getConfig = require('hjs-webpack')
module.exports = getConfig({
// 入口JS文件的位置
in: 'src/app.js',
// 应用打包(build)之后将存放在哪个文件夹
out: 'public',
// 是否在每次打包之前将之前的打包文件
// 删除
clearBeforeBuild: true
})

好了,现在所有的配置都完成了!让我们开始构建React应用吧!创建src/app.js

1
2
3
4
5
6
7
8
9
10
import React from 'react'
class MyApp extends React.Component {
render () {
return <h1>Wonderful App</h1>
}
}
React.render(<MyApp />,
document.body)

接下来启动webpack的开发服务器。它的主要作用是在后台监控文件变动,在每次我们修改文件的时候动态地帮我们进行打包。

1
$ webpack-dev-server

打开http://localhost:3000,你就能看到你刚才创建的React应用了!

React应用

注意到,在这里我们已经可以使用ES6的语法来创建应用了。

CSS加载和自动刷新

创建src/style.css

1
2
3
body {
background-color: red;
}

然后在src/app.js中加载它。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react'
// 加载CSS
require('./style.css')
class MyApp extends React.Component {
render () {
return <h1>Wonderful App</h1>
}
}
React.render(<MyApp />,
document.body)

接下来回到你的页面(不用刷新),Blah!整个页面突然充满了喜庆(又血腥)的红色。

这里你可以注意到两点。第一,CSS可以直接通过JavaScript来加载,这是webpack打包的功能之一,它会加载CSS文件并为我们插入到页面上;第二,我们保存后无需刷新就可以刷新页面,这是webpack-dev-server监控到了文件变化,动态打包后自动为我们刷新了页面。这又称作live reload

总结

我们其实还可以使用一些Yeoman的脚手架来生成React应用,但是大部分配置依然复杂。hjs-webpack提供了简洁明了的配置接口,适合快速地搭建项目原型、小型应用的开发或者React学习等目的。