Set up project with ReactJS, webpack, and ES2015

这篇博客以一个简单的小程序来演示用 ReactJS + ES6 + webpack 搭建一个hello world 应用的过程。

官方文档中可知,ReactJS支持使用ES6。

本次就用ES6来编写ReactJS前端代码,并用webpack进行模块管理。

目标:创建两个组件,分别为hello.jsworld.js,然后调用这两个组件,在页面上进行渲染。

创建项目文件夹

1
2
mkdir simple-react-webpack
cd simple-react-webpack

安装npm包

react react-dom:react相关包
babel-core babel-loader babel-preset-es2015 babel-preset-react:babel解析es6和react的相关包
webpack webpack-dev-server:webpack的相关包

1
npm install react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react  webpack webpack-dev-server --save

webpack安装完之后,会在项目根目录下生成一个webpack.config.js配置文件,会在后面用到

创建组件HelloWorld

1
2
touch hello.js
touch world.js

hello.js

1
2
3
4
5
6
7
8
9
10
11
import React from 'react'
import ReactDOM from 'react-dom'

class Hello extends React.Component {
render() {
return (
<div>Hello</div>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('hello'))

world.js

1
2
3
4
5
6
7
8
9
10
11
import React from 'react'
import ReactDOM from 'react-dom'

class World extends React.Component {
render() {
return (
<div>world</div>
)
}
}
ReactDOM.render(<World />, document.getElementById('world'))

创建webpack编译的入口文件

webpack中需要指定编译入口文件,我们在这个入口文件中引入组件HelloWorld

1
touch main.js

main.js

1
2
import Hello from './hello.js'
import World from './world.js'

配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var path = require('path');
var webpack = require('webpack');

module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js',
path: __dirname
},
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
}

这个配置定义了webpack的编译规则。

entry: webpack进行编译时的入口,详见文档
output: webpack将组件编译打包后,文件的命名及位置,本例中指定为当前目录下bundle.js文件。
loaders: 此处只加载了一个loader,意为:除了/node_modules/文件夹之外的,后缀名为.js的类型文件,全部用babel-loader编译,并在编译时,加载es2015和react插件(详见babel options)。loader的详细参数见文档

新建页面并载入已经编译好的bundle.js

1
touch index.html

index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Simple webpack react demo</title>
</head>
<body>
<div id="hello"></div>
<div id="world"></div>
<script src="./bundle.js"></script>
</body>
</html>

运行

1
webpack-dev-server --progress --colors

我们用webpack-dev-server来启动服务,默认8080端口。
在浏览器中访问:http://localhost:8080/webpack-dev-server/
关于webpack-dev-server, 详见webpack-dev-server

博客中的代码我放在了github上供参考。