React+Webpack+Nodejs+Express快速構建專案

阿新 • • 發佈：2019-01-07

前言

目前 React 、 Webpack 等技術如火如荼，你是不是還在愁苦如何把這些雜亂的知識統統學習一下，開啟一段新的前端開發之路呢？本文將以一個例子來講解如何使用 React 、 Webpack 、Nodejs 、 Express 這些技術快速構建專案，為後期的深入學習鋪好道路，接下來我們就一起動手體驗一下吧！

1. 安裝及配置環境

1.1 安裝Node.js與NPM

Windows下安裝 Node.js 還是比較方便的，請自行下載並安裝，安裝包及原始碼下載地址為： https://nodejs.org/en/download/ 。安裝過程基本就一直‘NEXT’就可以。安裝完成後，記得到環境變數裡配置了 Node.js

，變數值就是你的安裝路徑，例如“ C:Program Filesnodejs ”。

NPM 是隨同 Node.js 一起安裝的包管理器，新版的 Node.js 已經集成了 npm ，所以之前 npm 也一併安裝好了。這裡就不詳細說了，如有問題可自行百度一下。

1.2 建立並初始化專案

首先，進到你的工作目錄裡新建一個專案並開啟

D:\my-work>mkdir React-Nodejs-learn && cd React-Nodejs-learn

通過 npm init 命令為你的專案建立一個 package.json 檔案。

D:\my-work\React-Nodejs-learn>npm init

該命令會要求你輸入一些引數，包括應用名、版本等，可以直接按回車設定為預設值。需要注意的是，其中有一項為 entry point: ，它的值為專案的入口檔案，你可以設定成你想要的名稱，例如 app.js 或者 index.js 等，在這兒我就預設選擇了 app.js 。

1.3 建立專案目錄

1.4 安裝Webpack並建立配置檔案webpack.config.js

Webpack 是當下較熱門的前端資源模組化管理和打包工具，它不僅可以將鬆散的模組按照規則打包成前端資源，還可以實現模組的按需載入。任何形式的資源都可以被視為模組，如 CommonJs模組、AMD模組、ES6模組、CSS、圖片、JSON、Coffeescript、SASS等。對應各種不同檔案型別的資源， Webpack

有對應的模組 loader 。

1.4.1 安裝Webpack

使用 npm 安裝依賴模組時，可以選擇全域性安裝（通過 -g 引數），也可以選擇只在專案中安裝。同時，如果還指定了 --save 引數，那麼被安裝的模組還將被新增到 package.json 檔案中的 dependencies 依賴列表中。這樣，通過 npm install 命令即可自動安裝依賴列表中所列出的所有模組。執行以下命令安裝 Webpack 。

npm install webpack --save -g

1.4.2 安裝loader

本專案中目前使用到的有 babel-loader 、 css-loader 、 style-loader 、 jsx-loader。之後如有需要可以再按需安裝其他 loader 。

npm install babel-loader css-loader style-loader jsx-loader --save

1.4.3 建立webpack.config.js

每個專案下都必須配置有一個 webpack.config.js 檔案，通俗的講，它的作用就是告訴 Webpack 要做什麼。進到“React-Nodejs-Learnclientstatic”目錄下新建一個 webpack.config.js 配置檔案，可以參考如下內容：

var webpack = require('webpack');

module.exports = {
    // 頁面入口檔案配置
    entry : {
        'view/main/index': './js/view/main/index.js'
    },
    // 入口檔案輸出配置
    output : {
        path : __dirname + '/output/js/',
        filename : '[name].bundle.js'
    },
    module: {
        // 載入器配置
        loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader!jsx-loader?harmony'
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }
        ]        
    },
    // 其他解決方案配置
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.json'],
    },
    // 外掛項
    plugins : [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}

寫完配置檔案，就可以通過在控制檯執行命令打包了。開啟控制檯並進入到 webpack.config.js 檔案所在目錄下，執行 webpack 命令：

webpack

執行這個命令時會自動讀取 webpack.config.js 檔案，按照配置進行打包。命令執行成功後，控制檯會顯示打包結果，如下圖：

這裡需要注意的是，如果執行 webpack 命令不帶引數的話，每次修改檔案都要重新手動執行一下這個命令，會很麻煩，由此，我們可以在該命令後加一個 - watch 引數，這樣我們每次改完檔案都會自動編譯，無需再手動執行一次了。

webpack --watch

1.5 安裝React

React 可以直接下載使用，可以到官網 http://facebook.github.io/react/ 下載最新版，然後在主頁 html 中引入 react.min.js （React的核心庫）、 react-dom.min.js （提供與DOM相關的功能）和 browser.min.js （用於將 JSX 語法轉為 JavaScript 語法）這三個庫就可以。

當然也可以通過 npm 安裝 React ，執行以下命令來完成安裝。

npm install react --save
npm install react-dom --save

同時，也需要安裝一些 babel 外掛：

npm install babel-core --save
npm install babel-preset-react --save
npm install babel-preset-es2015 --save

1.6 安裝Express

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供一系列強大特性幫助你建立各種Web應用。全域性安裝 Express 並將其儲存到依賴列表中：

npm install express --save -g

1.7 安裝模板引擎EJS

EJS 是一款 Node.js 的模板引擎，同樣使用 npm 安裝。

npm install ejs --save -g

2. 寫程式碼

環境搭建好後，就可以開始我們的程式碼作業了。

2.1 編寫主頁index.html

目錄“React-Nodejs-Learnclientview”下的 index.html 是我們專案的首頁面。在 index.html 中引入 css 檔案和 webpack 打包後的 js 檔案。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>React-Nodejs-Learn</title>
    <link rel="stylesheet" href="../client/static/css/style.css" type="text/css"/>
</head>
<body>
    <div id="main-container"></div>
    <script src="../client/static/output/js/view/main/index.bundle.js"></script>
</body>
</html>

2.2 修改入口檔案app.js

// 引入模組
var express = require('express');
var path = require('path');
var ejs = require('ejs');

var app = express();

// 對所有(/)URL或路由返回index.html 
app.get('/', function (req, res) {
    res.render('index');
});

// 設定views路徑和模板
app.set('views', './client/view');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);

// 靜態檔案配置
app.use('/client/static', express.static(path.join(__dirname, 'client/static')));

// 啟動一個服務，監聽從8888埠進入的所有連線請求
var server = app.listen(8888, function(){
    var host = server.address().address;
    var port = server.address().port;
    console.log('Listening at http://%s:%s', host, port);
});

通過如下命令啟動 app.js ：

node app.js

要補充的一點是， node 命令也是隻能執行一次，每次修改檔案都要再重新手動執行一下這個命令，會很麻煩。我們可以通過 npm 安裝一個 nodemon ：

npm install nodemon --save

再執行命令：

nodemon app.js

這樣每次修改程式碼後，無需手動重新啟動 app.js ，它會幫助你自動啟動 app.js 。

2.3 用JSON模擬後臺資料

進到“React-Nodejs-Learnserver”目錄下，後端程式碼都寫在該目錄下。新建一個“data”資料夾並開啟，編寫模擬資料程式碼。（D:my-workReact-Nodejs-LearnserverdatagetMessage.js）

var MessageList = [

{ "Message":"Hello React"},

{ "Message":"Hello Webpack"},

{ "Message":"Hello Nodejs"},

{ "Message":"Hello Express"}

];

exports.getMessageList = function (callback) {
    callback(MessageList);
};

當然我們也可以直接去連資料庫，這一塊兒有機會再分享給大家。

2.4 封裝介面

進到“React-Nodejs-Learnserver”目錄下，新建一個“actiondata”資料夾並開啟，編寫對應的取資料的程式碼。（D:my-workReact-Nodejs-LearnserveractiondatagetMessage.js）

var getMessageList = require('../../data/getMessage');

exports.execute = function (req, res) {
     getMessageList.getMessageList(function (data) {
         res.send(data);
     });
};

2.5 定義介面並修改路由配置

修改 app.js

// 引入模組
var express = require('express');
var path = require('path');
var ejs = require('ejs');

var app = express();

// 新增介面路由
app.get('/data/:module', function (req, res, next) {
    var c_path = req.params.module;
    var Action = require('./server/action/data/' + c_path);
    Action.execute(req, res);
});

// 對所有(/)URL或路由返回index.html 
app.get('/', function (req, res) {
    res.render('index');
});

// 設定views路徑和模板
app.set('views', './client/view');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);

// app.use配置
app.use('/client/static', express.static(path.join(__dirname, 'client/static')));

// 啟動一個服務，監聽從8888埠進入的所有連線請求
var server = app.listen(8888, function(){
    var host = server.address().address;
    var port = server.address().port;
    console.log('Listening at http://%s:%s', host, port);
});

介面定義好了後，在瀏覽器裡訪問一下： http://localhost:8888/data/getMessage/ ，可以看到資料正確的返回。

2.6 編寫React元件

首先進到目錄“React-Nodejs-Learnclientstaticjsstoremain”下，新建一個 index.js 檔案。該檔案用於元件與後端資料的互動。

var EventEmitter = require('events').EventEmitter;

class Store_MessageList extends EventEmitter {
    constructor() {
        this.allData = null;
    }

    getAllData(callback) {
        var self = this;
        fetch(
            "/data/getMessage/"
        )
        .then(function(res) {
            if (res.ok) {
                res.json().then(function(data) {
                    self.allData = data;
                    callback(self.allData);
                });
            } else {
                console.log("Looks like the response wasn't perfect, got status", res.status);
            }
        }, function(e) {
            console.log("Fetch failed!", e);
        });
    }
}

module.exports = new Store_MessageList();

然後進到目錄“React-Nodejs-Learnclientstaticjsviewmain”，新建 index.js 。編寫檢視元件並渲染到頁面上。

var React = require('react');
var ReactDOM = require('react-dom');
var store = require('../../store/main');

class MessageList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            messageList: []
        };
        this.getData();
    }

    render() {
        var self = this;
        var messages = this.state.messageList;
        var arr = [];

        messages
        .forEach(function(em) {
            arr.push(<li key={em}> {em} </li>);
        });
        return <section className="pageContentInner">
            <div className="head-section"><h1>MessageList: </h1></div>
            <ul>
                {arr}
            </ul>
        </section>;
    }

    getData() {
        var self = this;
        store
        .getAllData(function (data) {
            var i = 0;
            var len = data.length;
            var messageListArr = [];
            for(; i<len; i++) {
                messageListArr[i] = data[i].Message;
            }
            self.setState({messageList: messageListArr});
            console.log(self.state.messageList);
        })
    }
}

ReactDOM.render(
  <MessageList />,
  document.getElementById('main-container')
);

重新整理一下頁面，元件已經成功讀取資料並渲染到頁面上了，這時候可以繼續編寫樣式程式碼了，在此我們就省略不寫樣式了。

3. 總結

至此，一個專案就快速構建好了，這樣我們就可以繼續後續開發工作了。當然，專案開始時，其實我們可以直接使用 Express 建立專案，例如通過命令 express -t ejs project 建立專案，此時，會自動生成一個 project 資料夾。資料夾裡面面會有 model 、 public 、 routes和 views 資料夾，還有 app.js 和 package.json 兩個檔案。不再需要我們手動建立目錄。

來源推酷 http://www.tuicool.com/articles/6FfQNfI