本文使用NPM开发React的开发过程, 需要已经了解npm, react和有一定terminal知识, 通过此文可以简单了解到现代前端的开发过程, 亲手配置一个开发过程, 体会是难以言表的.

第零步 配置Node

第一步 初始化开发目录

创建一个根目录, 名为: ReactNpm, 并用npm init初始化, 根据你的需求改变默认配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$ mkdir ReactNpm
$ cd ReactNpm
$ npm init

package name: (reactnpm)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/vic/Documents/react/ReactNpm/package.json:

{
"name": "reactnpm",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


Is this ok? (yes)

第二步 安装开发所需依赖

运行所需依赖React

1
2
npm install --save react
npm install --save react-dom

开发所需依赖Webpack

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

开发所需依赖babel

1
2
3
4
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015

这时候, package.json应该是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"name": "reactnpm",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}

第三步 为项目增加两个脚本

在package.json, scripts值下添加:

1
2
"build": "webpack",
"start": "webpack-dev-server --hot"

build选项是为了打包出生成后的js
start选项是为了hot-reload开发, hot-reload好处就在于不用刷新浏览器, 可以直接查看新代码的改变

使用方法是

1
$ npm run start

所以, 这时的package.json是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"name": "reactnpm",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}

第四步 为项目创建必要文件

让我们创建index.html用于入口HTML, App.jsx是一个简单的Component组建, main.js作为我们的入口js, webpack.conf.js是webpack的配置文件

1
2
3
4
$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

此时目录应该是这样的:

1
2
3
4
5
6
7
8
9
10
11
$ tree -L 1
.
├── App.jsx
├── index.html
├── main.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js

1 directory, 6 files

第五步 配置webpack

打开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
23
var path = require('path')

module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './'),
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}
}

说明:
entry: webpack打包的入口 main.js
output:webpack打包输出,path为输出的文件夹,filename为打包输出文件名
devServer:开发服务器配置
module:定义了对模块的处理逻辑, 当需要加载文件时, webpack会匹配test的正则,匹配成功就会调用其配置对文件进行处理

第六步 编辑页面代码

打开index.html, 添加下列代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>

<head>
<title>React With npm</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<script src="bundle.js">
</script>
</body>

</html>

其中, bundle.js为webpack打包输出js的名字

打开App.jsx, 添加下列代码:

1
2
3
4
5
6
7
import React from 'react'

export default class App extends React.Component {
render () {
return (<div> Hello World!</div>)
}
}

打开main.js, 添加下列代码:

1
2
3
4
5
6
7
8
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'

ReactDOM.render(
<App/>,
document.body.appendChild(document.createElement('div'))
)

第七步 运行开发服务器

1
$ npm run start

通过浏览器访问 http://localhost:8080/, 就可以看到我们激动人心的Hello World!!!

第八步 打包,生成bundle.js

1
$ npm run build

你就可以发现根目录下生成了bundle.js, 然后你就可以大摇大摆那index.html和bundle.js去部署了,当然, 这里还有很多工作没有做,我们下次在论.

后言

完成后, 目录应该是这个样子的:

1
2
3
4
5
6
7
8
9
10
11
12
[email protected]$ tree -L 1
.
├── App.jsx
├── bundle.js
├── index.html
├── main.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js

1 directory, 7 files