React with Node.js in Webstorm

Programming
, ,

软件环境：

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

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

安装 express

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 文件的内容如下：

{
  "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。

var React = require('react');
var ReactDOM = require('react-dom');

var Main = React.createClass({

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

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

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

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文件的下方添加

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

最后的效果：

<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 就好了。

结束.