由于没有接触过NodeJS，我打算先进行环境配置并尝试完成HelloWorld。

准备Node.js环境

这次不是安装在全局环境，而是安装在特定的目录下。

从NodeJS的官方网站上

下载并安装适当的软件包后，查看以下信息以确认版本和路径是否正确。

Node.js was installed at
   /usr/local/bin/node

npm was installed at
   /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

让我们确认一下HelloWorld。

[murotanimari]$ node
> console.log("HelloWorld")
HelloWorld

2. 安装NodeJS模块

由于使用React是前提，所以请安装以下四个组件。

webpack-dev-server：
webpack-dev-server是一个WEB服务器。

巴别塔：
由于目前的网页浏览器无法理解ES6、7的格式，所以我们需要一组库来将这些代码转换为ES5 JavaScript。这些库还支持与React兼容的JSX格式。

Lint能够检测格式。

WebPack：
它会对代码进行编译。

创建项目文件夹。

[murotanimari]$ mkdir HelloNodeJS
[murotanimari]$ cd HelloNodeJS

2.2 服务器的安装

1) 安装Webpack和webpack-dev-server。

[murotanimari]$ npm install webpack
[murotanimari]$ npm install webpack-dev-server

2) 准备 index.html 和 package.json

[murotanimari]$ vi index.html
test

[murotanimari]$ vi package.json
{
 "scripts": {
  "start": "ebpack-dev-server"
 }
}

3) 开始

[murotanimari]$ webpack-dev-server
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 13ms
webpack: bundle is now VALID.
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/murotanimari/HelloNodeJS

请访问 http://localhost:8080/webpack-dev-server/，如果显示出了测试内容，那就可以了。

2.3 安装 Lint 模块

我会按照这个参考设置ESLint。我还会一起安装用于React的Babel。

1) 安装Babel

[murotanimari]$ npm install babel-core
[murotanimari]$ npm install babel-loader
[murotanimari]$ npm install babel-preset-react
[murotanimari]$ npm install babel-preset-es2015
[murotanimari]$ npm install babel-plugin-transform-function-bind

２）安装Lint

[murotanimari]$ npm install eslint
[murotanimari]$ npm install babel-eslint
[murotanimari]$ npm install eslint-plugin-react

生成.eslintrc文件。

[murotanimari]$ node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /Users/murotanimari/HelloNodeJS

[murotanimari]$ mv .eslintrc.json .eslintrc
[murotanimari]$ vi .eslintrc
{
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "globals": {
        "React": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "comma-dangle" : 0
   }
}

4) 创建测试用文件

[murotanimari]$ vi src/hello.jsx
import React from "react";
import ReactDOM from "react-dom";

export default class HelloWorld extends React.Component {
    render() {
        return <div class="hoge">Hello World</div>;
    }
}

ReactDOM.render(
    <HelloWorld />,
    document.getElementById("app")
);

5) 考试 ( )

[murotanimari]$ node_modules/.bin/eslint --debug src/hello.jsx
  eslint:cli Running on files +0ms
  eslint:ignored-paths Looking for ignore file in /Users/murotanimari/HelloNodeJS +26ms
  eslint:ignored-paths Could not find ignore file in cwd +2ms
  eslint:glob-util Creating list of files to process. +1ms
  eslint:cli-engine Processing /Users/murotanimari/HelloNodeJS/src/hello.jsx +5ms
  eslint:cli-engine Linting /Users/murotanimari/HelloNodeJS/src/hello.jsx +0ms
  eslint:config Constructing config for /Users/murotanimari/HelloNodeJS/src/hello.jsx +1ms
  eslint:config Using .eslintrc and package.json files +0ms
  eslint:config Loading /Users/murotanimari/HelloNodeJS/.eslintrc +3ms
  eslint:config-file Loading config file: /Users/murotanimari/HelloNodeJS/.eslintrc +1ms
  eslint:config-file Loading plugin:react/recommended +129ms
  eslint:config-file Attempting to resolve eslint-plugin-react +0ms
  eslint:config-file Loading JS config file: /Users/murotanimari/HelloNodeJS/node_modules/eslint-plugin-react/index.js +0ms
  eslint:config-file Loading /Users/murotanimari/HelloNodeJS/node_modules/eslint/conf/eslint.json +10ms
  eslint:config-file Loading JSON config file: /Users/murotanimari/HelloNodeJS/node_modules/eslint/conf/eslint.json +0ms
  eslint:config Using /Users/murotanimari/HelloNodeJS/.eslintrc +239ms
  eslint:config Merging command line environment settings +0ms
  eslint:config-ops Apply environment settings to config +1ms
  eslint:cli-engine Linting complete in: 727ms +332ms

/Users/murotanimari/HelloNodeJS/src/hello.jsx
   6:21  error  Unknown property 'class' found, use 'className' instead  react/no-unknown-property
  12:5   error  'document' is not defined                                no-undef

✖ 2 problems (2 errors, 0 warnings)

当我们在eslint命令中指定–debug选项进行调试时，可以看到日志，我们一一检查。看起来.eslintrc和package.json都被正确使用，所以这次暂时就这样吧。

2.4进行WEB PACK测试。

参考此步骤安装Webpack。将entry.js编译为bundle.js，然后在index.html中进行引用试试看。

[murotanimari]$ vi src/entry.js
document.write("It works.");

[murotanimari]$ vi src/index.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>webpack tutorial</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

[murotanimari]$ webpack src/entry.js src/bundle.js
Hash: a41c6217554e666594cb
Version: webpack 1.13.1
Time: 39ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./src/entry.js 29 bytes {0} [built]

webpack-dev-server在src目录下搭建服务器

http://localhost:8080/webpack-dev-server/index.html网页上显示了”It works!”。

您可以使用“–content-base src/”选项来设置文档根目录。