Node中間層の実践(二)——プロジェクトの枠組みを構築する

以上の文章は私の個人駅を訪問してください.
Keyon、転載は出典を明記してください.
プロジェクト住所:https://github.com/KeyonY/NodeMiddle
足場
anglar 2を使ったことがありますが、vue 2の学生はみんな知っています.公式の推奨のインストール方法は専用のanglar-cli、vue-cliによって、webpackによってコンパイルされ、パッケージ化されたプロジェクトフレームを快速に構築します.
この二つのツールの啓発を受けて、プロジェクトの初めにwebpackベースのプロジェクトフレームを開発しました.

expressを使ってwebpack-dev-middlewareとwebpack-hot-middlewareを搭載して熱負荷を行います.

は、dev(開発環境)とproduction(生産環境)の2つの起動方式

を内蔵する.
技術の選択
node開発フレームワーク
expressとkoaは二番目に一つを選びます.

expressのはWeb Frame ewarkという概念により近いです.

express機能は極めて簡単で、ルートとミドルウェアから構成されたウェブ開発フレームです.本質的には、Expressアプリケーションは各種のミドルウェアを呼び出しています.

koaはcoを下のフレームとして使用して、いつコールバック関数またはコールバックシェルを忘れました.

expressの歴史はもっと長くて、容量が大きくて、文書が完備していて、第三者の中間部品も多いです.

私はexpressをnode開発の枠組みとして選んだ.
テンプレートエンジン
前にNODEでレスFullのウェブサイト(詳しくは私のブログ-NodeJS開発個人ブログサイト参照)を書いたので、jadeに詳しいです.今回は直接にpugをサーバー端のテンプレートエンジンとして選びました.pugは比較的柔軟なサーバー側テンプレートです.expressの配置も簡単です.ルートディレクトリのap.jsファイルに配置します.
//テンプレートエンジンの種類を設定する
app.set('view engine'、'pug')
//テンプレートファイルパスの設定
app.set('view's,path.resove);
このように、expressでレンダリングする際には、res.render(''Home/index'、})、対応するページテンプレートのパスを指定すればいいです.第二のパラメータはpugページで使用するデータの内容、json形式です.
中間層とバックエンドの非同期通信
実はajaxライブラリです.だからaxiosを選びました.vue 2の公式推奨のajaxライブラリで、内蔵のaxios.allは中間層で複数のバックエンドを代理して一緒に返してくれます.Bigpipeを簡単に実現できます.
モジュール化
ウェブサイトのフロントページですので、SEOを考慮して、フロントフレームが使えないので、考え方を変えてwebpack+s 6/AMDを使ってモジュール化を実現します.そこで、webpackをカプセル化機＋View層のモジュール化として使用し、フロントエンドレベルでモジュール化とコンポーネント化を実現しました.es 6はControl層でモジュール化され、node中間層でモジュール化されました.
環境設定(起動ファイル)
プロジェクトのスタートファイルとして、app.jsはexpressの配置ファイルであり、開発環境/生産環境の配置ファイルでもあります.
node起動時に設定したコマンドパラメータは、ap.jsでパラメータを受信し、対応する環境を実行します.
私たちはcross-envというプラグインをインストールしたいです.
npm i--save-dev cross-env
package.jsonのscriptsに配置する:

...
"scripts": {
    "start": "cross-env NODE_ENV=production node app.js",
    "dev": "cross-env NODE_ENV=dev supervisor -w app.js app",
    "build": "webpack --config build/webpack.prod.config.js"
  }
...

このようにプロcess.env.NODE_を使います.ENVはnode起動の環境パラメータを取得できます.
ここに開発環境と生産環境を配置しました.

開発環境:コードを圧縮せず、devtoolを開いてsource-mapを生成し、デバッグコードを容易にする.

生産環境:webpackで包装、圧縮、混淆操作を行い、最終的に完全なコード(アプリケーション)をdistディレクトリに出力してから、nodeサーバを起動して、アプリケーションを実行します.

上記のコードにはsupervisorプラグインも使用されています.これはnodeプロファイルの変更を傍受し、自動的にnodeを再起動します.
npm i--save-dev supervisor
先端レベルはwebpack-dev-middlewareとwebpack-hot-middlewareを使用して熱負荷を実現しました.
このように,中間層から先端まで熱負荷を実現した.
node中間層配置
ルートディレクトリの下に新しいconfigフォルダを作成して、いくつかのよく使われている構成/パラメータ、方法を引き出して、config/config.jsとconfig/common.jsの中に書きました.
例えば、中間層で起動されるポート番号、アプリケーションのルートディレクトリ、AMD仕様で使用されるすべてのファイルに一括して導入されています.
app.js

var express = require('express');
var cookieParser = require('cookie-parser');
var path = require('path');
var localOptions = require('./build/localOptions');
var config = require('./config/config');
var bodyParser = require('body-parser');
var auth = require('./middleware/auth');
var log4js = require('./config/log4js');

process.env.NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV : 'production';
var isDev = process.env.NODE_ENV === 'dev';
var app = express();
var port = config.port;


app.set('view engine', 'pug');
//         
if (isDev){
    app.set('views', path.resolve(__dirname, 'src/Views'));
}else {
    app.set('views', path.resolve(__dirname, 'dist/Views'));
}

// app.locals               
app.locals.env = process.env.NODE_ENV || 'dev';
app.locals.reload = true;

app.use(cookieParser());
app.use(bodyParser.urlencoded({extended: false}));


if (isDev) {
    // app.locals.pretty = true;
    //     ，         
    var webpack = require('webpack');
    var webpackDevMiddleware = require('webpack-dev-middleware');
    var webpackHotMiddleware = require('webpack-hot-middleware');
    var webpackDevConfig = require('./build/webpack.dev.config.js');

    var compiler = webpack(webpackDevConfig);
    //    
    app.use(webpackDevMiddleware(compiler, {
        publicPath: webpackDevConfig.output.publicPath,
        noInfo: true,
        stats: 'errors-only'
    }))
    app.use(webpackHotMiddleware(compiler, {
        heartbeat: 1000,
        noInfo: true,
    }));

    //           
    var reload = require('reload');
    var http = require('http');
    var server = http.createServer(app);
    // reload(server, app);
    reload(app);
    server.listen(port, () => {
        console.log('App【dev】 is now running on port ' + port + '!');
    });

    //          ，       vendor.js      ;
    //           reload  ，      reload.js  
    app.use(express.static(path.join(config.root, 'src')));
    app.use('/', require(path.join(config.configRoot,'/routes')));
    
}else {
    //          ，    node    
    //   node       
    app.use(express.static(path.join(config.root, 'dist')));
    app.use('/',require(path.join(config.configRoot,'/routes')));
    // app.listen(process.env.PORT, () => {
    app.listen(port, () => {
        console.log('App【production】 is now running on port ' + port + '!');
    })
}

//    404      error  
app.use('*', auth, (req, res, next) => {
    let err = new Error('Not Found');
    err.status = 404;
    next(err);
});

//    error，   error  
app.use((err, req, res, next) => {
    const sc = err.status || 500;
    if(err.status == 405){
        res.redirect(config.cndesignOrigin + '/Home/GuideAuthentication');
        return;
    }
    res.status(sc);
    //        
    log4js.error('\r
 Status: '+ sc + "\r
 Message: " + err.message + "\r
 Href: " + localOptions.baseUrl + req.originalUrl + "\r
 User-agent: " + req.headers['user-agent']);

    res.render('Error/404', {
        error: err,
        status: sc,
        message: err.message,
        userInfo: req.userInfo_ || { hasLogin: false }
    });
});

Errer Handleのマウントの順番に注意して、一般的にはap.use()の下にマウントされ、最後に置く.
Error Handleのパラメータは4つなので、最初のパラメータerrはルートのnext(err)を通して投げられます.このようにすべてのルートは随時errorを投げ出して、Err Handleに捕獲されます.
ディレクトリ構造を見てみます.

App
├─ .babelrc                         // babel   
├─ ReadMe                           
├─ app.js                           //     
├─ build                            // webpack     
│    ├─ entrys.js                   // webpack  js css     
│    ├─ localOptions.js             //            ，  ip     
│    ├─ postcss.config.js           // postcss     
│    ├─ webpack.dev.config.js       //      webpack    
│    ├─ webpack.dll.config.js       // webpack.DllReferencePlugin       
│    └─ webpack.prod.config.js      //      webpack    
├─ config                           // Model   ：  node      、       
│    ├─ common.js                   //             
│    ├─ config.js                   // node      
│    └─ routes                      //          
│           ├─ default.js
│           ├─ designers.js
│           ├─ home.js
│           └─ index.js             //             
├─ package.json
└─ src                              // View   
       ├─ Components                //     
       │    ├─ base
       │    ├─ home
       │    ├─ index
       │    ├─ message
       │    ├─ modals
       │    ├─ page
       ├─ Views                     //   
       │    ├─ Default
       │    ├─ Error
       │    ├─ Home
       │    ├─ Include
       │    ├─ Messages
       │    └─ Shared
       └─ assets                    //       
              ├─ Jcrop
              ├─ es5-shim-master
              ├─ images
              ├─ jquery-1.10.2.min.js
              ├─ jquery-ui-1.8.24.min.js
              └─ layui

引き続き本博の更新に注目してください.Node中間層実践(一)——NodeJSに基づく全桟式開発 Node中間層の実践(二)——プロジェクトの枠組みを構築する Node中間層実践(三)——webpack配置 Node中間層実践（四）テンプレートエンジンpug Node中間層実践(五)——express-中間層の論理処理