本文使用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
24
{
  "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
12
$ 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
vic@$ 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