在 NodeJs 上搭建 React 開發環境

時間 2019-11-21

原文原文鏈接

步驟：css

1. 安裝 nodejs ：根據你的 Windows 類型(x86或x64)下載相應的安裝包進行安裝。安裝完成後，能夠在任一目錄下打開 cmd 窗口並運行 node -v 命令，若是顯示 node 的版本信息則表示安裝成功。html

--注：在 windows 操做系統中，若是把 nodejs 安裝在系統盤（如：C盤），初始化時會提示 nodejs 沒有操做文件的權限（沒法新建 package.json 文件）。node

（建議在非系統盤中安裝 nodejs ，本例安裝路徑：D:\Program Files）react

2. 初始化 npm：安裝 nodejs 時會默認安裝 npm，能夠在 cmd 窗口中運行 npm -v 命令來查看 npm 包的版本信息。webpack

接着運行 npm init 命令，並設置相關參數即完成 npm 的初始化。這時 nodejs 會在當前目錄下（這裏是：D:\Program Files\nodejs 目錄）新建一個 package.json 的配置文件，裏面將會存儲當前程序所引用的 js 組件（包）的版本信息。 git

3. 利用 npm 安裝 react 相關的包： github

3.1 運行 npm install react react-dom --save-dev 命令來安裝 react 和 react-dom 包。 web

其中 --save-dev 表示在 package.json 文件的 devDependencies 節點下添加包的引用，--save 表示在 package.json 文件的 dependencies 節點下添加包的引用正則表達式

3.1 運行 npm install webpack webpack-dev-server --save-dev 命令，安裝 webpack 和 webpack-dev-server 包。npm

webpack 用來打包並壓縮 js 文件，webpack-dev-server 用來實時同步修改過的 js，html，css 文件到瀏覽器頁面。

3.5 運行 npm install jsx-loader --save-dev 命令，安裝 jsx-loader 包（它能夠把按 ES5 規範編寫的 .jsx 文件轉成通常的 .js 文件）。

若是須要支持符合 ES6 規範的腳本文件（.js 或 .jsx），還需安裝下面 4 個包：babel-core babel-loader babel-preset-es2015 babel-preset-react。

若是須要用到路由，還需安裝：react-router。

配置 Webpack：

1. Webpack 使用一個名爲 webpack.config.js 的配置文件，能夠手動添加一個 webpack.config.js 文件到 nodejs 根目錄下，並按以下方式添加相關節點：

var path = require("path");
var webpack = require('webpack');
module.exports = {
  entry: { app: ['./app/main.jsx'] },
  output: {
    path: path.resolve(__dirname, "./build"),
    publicPath: "http://127.0.0.1:8080/build/",
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['','.js','.jsx']
  },  
  module: {
    loaders: [
      {test:/\.jsx$/, loaders:['jsx?harmony']}
    ],
    //使用ES6時，才須要添加此節點
    loaders:[
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: path.resolve(__dirname),
        query: {
          //添加兩個預先加載的組件，用來處理js或jsx類型的文件
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },
  plugins: [
    new webpack.DefinePlugin({
    'process.env.NODE.ENV':"development"
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

resolve 指定能夠被 require 的文件後綴。好比 Hello.jsx 這樣的文件就能夠直接用 require(./Hello) 引用。

loaders 指定 jsx-loader 編譯後綴名爲 .jsx 的文件，建議給含有 JSX 的文件添加 .jsx 後綴，固然你也能夠直接使用 .js 後綴，相應的 test 節點下的正則表達式也要修改。

Webpack 內置支持 CommonJS，因此能夠直接用 npm 下載安裝模塊，而後直接 require 使用模塊。

安裝 React: npm install react --save
使用 React: var React = require('react');

2. 修改 package.json 文件中的 scripts 節點爲：

{
  "name": "nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "dependencies": {
    "npm": "^3.10.8"
  },
  "devDependencies": {
    "jsx-loader": "^0.13.2",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2",
    //若是須要支持ES6，還需添加如下引用
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline"
  },
  "author": "",
  "license": "ISC"
}

添加項目文件：

1. 添加 app/main.jsx，main.jsx 文件的內容以下：

var React = require('react');
var ReactDOM = require('react-dom');
var AppComponent = require('./components/Comment.jsx');

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

2. 添加 app/components/Comment.jsx， Comment.jsx 文件的內容以下：

var React = require('react');
var Comment = React.createClass({
    render: function(){
        return (
            <div className="comment">
                This is a React component!
            </div>
            );
    }
});

module.exports = Comment;

這時的 app 文件目錄以下：

3. 添加 build/index.html，index.html 文件的內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Test</title>
</head>
<body>
    <div id="content"></div>
    <script src="http://127.0.0.1:8080/build/bundle.js"></script>
</body>
</html>

編譯與運行：

先在 cmd 窗口中運行 npm run start 命令，而後在瀏覽器中輸入：http://localhost:8080/build/index.html 來查看頁面。若是修改了 js 文件，只需保存一下瀏覽器就會自動刷新。

ES6的例子：

1. 添加 app/app.js 文件的內容以下：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    constructor() {
        super();
    }
    render() {
        //JSX語法
        return (
          <div className="container">
            <section className="jumbotron">
              <h3 className="jumbotron-heading">Search Github Users</h3>
            </section>
          </div>
        )
    }
};

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

2. 添加 build/index.html，index.html 文件的內容以下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="content"></div>
    <script src="http://127.0.0.1:8080/build/bundle.js"></script>
</body>
</html>

備註：

因爲 Babel 能夠轉換 ES5 和 ES6 格式的腳本，因此能夠在一個 .js 文件裏，同時運用兩種語法，以下所示：

import React from 'react';
import ReactDOM from 'react-dom';

const About = React.createClass({
  render(){
    return(<div>About</div>)
  }
})
const Inbox = React.createClass({
  render(){
    return(<div>Inbox</div>)
  }
})
const Home = React.createClass({
  render(){
    return(<div>Home</div>)
  }
})

const App = React.createClass({
  getInitialState() {
    return {
      route: window.location.hash.substr(1)
    }
  },

  componentDidMount() {
    window.addEventListener('hashchange', () => {
      this.setState({
        route: window.location.hash.substr(1)
      })
    })
  },

  render() {
    let Child
    switch (this.state.route) {
      case '/about': Child = About; break;
      case '/inbox': Child = Inbox; break;
      default:      Child = Home;
    }

    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><a href="#/about">About</a></li>
          <li><a href="#/inbox">Inbox</a></li>
        </ul>
        <Child/>
      </div>
    )
  }
})

ReactDOM.render(<App />, document.body)