Chaos's Blog
0%

React工程初始化配置

发表于 更新于

官方提供的create-react-app来初始化整个工程，具体参考官方说明, 但是这样我们就不知道如何从无到有合理的搭建起react的开发环境。
我们今天主要来讲讲第二种。这样可以学习到Babel、webpack来配合react工程的构建。
一个现代化的前端工程编译系统通常由以下部分构成：

  • 包管理器 比如Yarn或npm。
  • 打包器, 比如webpack 或 Browserify。 它可以让你编写模块化代码并将其打包成一个小文件，以便优化加载时间。
  • 编译器 比如Babel。它让你可以编写更新的javascript代码能够运行在老版本的浏览器上。

初始化工程

1
2
mkdir reactdemo
npm init -y

使用npm安装React

1
npm install --save react react-dom

官方建议使用配合Babel来使用React，这样可以在javascript代码中使用ES6与JSX。

1
npm install --save-dev babel-cli babel-loader babel-preset-es2015 babel-polyfill babel-preset-env

安装webpack

1
npm install --save-dev webpack webpack-dev-server

接下来创建两个模板文件：build/index.html与app/index.js。
修改index.html内容为如下

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>React Set up</title>
</head>
<body>
	<script src="bundle.js"></script>
</body>
</html>

在app/index.js中编写一些基本的es6代码

1
2
const message = "Hello, world!";
console.log(message);

创建webpack.config.js并编辑其内容为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
	entry: ['babel-polyfill', './app/index.js'],
	output: {
		path: __dirname + '/build',
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			}
		]
	},
	devServer: {
		port: 3000,
		contentBase: './build',
		inline: true
	}
}

编辑package.json中的scripts，添加build与start

1
2
3
4
5
6
7
8
{
	...
	"scripts": {
    	"build": "webpack",
    	"start": "webpack-dev-server"
  	},
	...
}

同样在package.json中添加babel配置(也可以在.babelrc中配置)

1
2
3
"babel": {
	"presets": ["es2015"]
},

执行以下命令

1
2
npm run build
npm run start

打开浏览器http://localhost:3000，打开console，可以看到输出

添加React
安装依赖

1
npm install --save-dev react react-dom babel-preset-react

编辑babel配置

1
2
3
"babel": {
	"presets": ["es2015", "react"]
}

编辑index.html

1
2
3
4
<body>
	<div id="root"></div>
	<script src="bundle.js"></script>
</body>

然后在index.js中编辑入标准的ReactHelloWorld

1
2
3
4
5
6
7
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

最终的工程目录结构为

1
2
3
4
5
6
7
8
9
10
11
{project root}
│  package-lock.json
│  package.json
│  webpack.config.js
│
├─app
│      index.js
│
└─build
        bundle.js
        index.html

扩展阅读

参考