React with Node.js in Webstorm

软件环境:

软件 版本
OSX 10.11.6
WebStorm 2016.2
Node.js 6.3.1
React 15.3.1

Node.js 是通过 nvm 安装的最新版本。国内的网络环境,想通过 WebStorm 直接创建工程是做不到的,只能通过命令行,使用淘宝的镜像。

安装 express

1
2
3
4
5
cd reactStudy
npm install --registry=https://registry.npm.taobao.org -g express-generator
express -e -css sass reactStudy
cd reactStudy
npm install --registry=https://registry.npm.taobao.org

安装 react

安装 react、react-dom、babel、browserify、watchify 等模块。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
26
27
28
29
30
31
{
"name": "taskmgr",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"babel-cli": "^6.11.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"body-parser": "~1.15.1",
"cookie-parser": "~1.4.3",
"debug": "~2.2.0",
"ejs": "~2.4.1",
"express": "~4.13.4",
"express-session": "^1.14.0",
"morgan": "~1.7.0",
"mysql": "^2.11.1",
"node-sass-middleware": "0.8.0",
"passport": "^0.3.2",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"browserify": "^13.1.0",
"watchify": "^3.7.0"
}
}

创建文件

在 views 目录下创建一个文件作为主文件:main.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var React = require('react');
var ReactDOM = require('react-dom');

var Main = React.createClass({

render: function () {
return <div>Hello william</div>
}
});

ReactDOM.render(
<Main />,
document.getElementById('content')
);

也可以使用 ES2015的方式来写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react"
import ReactDOM from "react-dom"

class App extends React.Component{
constructor(props) {
super(props)
}

render() {
return <div>Hello World!</div>
}
}

ReactDOM.render(<App/>, document.getElementById('content'));

配置babel

WebStorm->Preferences…->Tools->File Watchers下添加Babel。以下字段需要注意修改:

Field | Value | 说明
—|—
Name | Babel | 这里不要修改,不然还会提示添加 Babel Watcher
File type | javascript | 也可以选其他类型,只要和你自己的文件匹配
Program | $ProjectFileDir$/node_modules/browserify/bin/cmd.js |
Arguments | -t [ babelify –presets [ es2015 react ] ] ./views/main.js -o public/javascripts/index.bundle.js | 如果要调试,需要加上 -d 参数

index.ejs文件的下方添加

1
<script type="text/javascript" src="/javascripts/index.bundle.js"></script>

最后的效果:

1
2
3
4
5
6
<body>

<div id="content"></div>

<script type="text/javascript" src="/javascripts/index.bundle.js"></script>
</body>

因为对 Babel 和 browserify 不熟悉,所以这一段是花时间最多的地方。开始的时候因为用了 jsx 扩展名,在文件头的注释中有@jsx,render 函数翻译出来的代码会带上 file 函数而不是React.createElement,导致错误。后来重启 WebStorm 就好了。

结束.