在做開發(fā)時，為了調(diào)試js代碼，通常需要加載沒有壓縮的js文件，而在正式發(fā)布時，為了減小文件大小，往往要對文件進(jìn)行壓縮。
另外，測試和發(fā)布所使用的數(shù)據(jù)庫，redis,solr都可能不一樣，所以為了方便地對兩種環(huán)境進(jìn)行隨意切換，做好配置就很重要了。
下面介紹一種我想到的方法，雖然不是特別的完美，但也可作為參考。

數(shù)據(jù)源切換

首先在根目錄下寫一個config.js文件，定義一個模塊：

module.exports = {
mode:'debug',
debug:{//開發(fā)環(huán)境配置
        sql: {
            sqlServer: 'aaaaaaaaa',
            sqlDatabase: 'da',
            sqlUser: 'sa',
            sqlPwd: 'aaaaaaa',
        }
},
release:{//生產(chǎn)環(huán)境配置
        sql: {
            sqlServer: 'bbbbbbbbb',
            sqlDatabase: 'db',
            sqlUser: 'sb',
            sqlPwd: 'bbbbbbbbb',
        }
}
};

在具體使用時，利用mode變量來選擇開發(fā)環(huán)境或是生產(chǎn)環(huán)境：

var config = require('../config');
var user = config[config.mode].sql.sqlUser,

在開發(fā)時把mode設(shè)為'debug',發(fā)布時改為'release'。當(dāng)然，你可能會忘記改就發(fā)布出去了，那么你最好準(zhǔn)備一個config_temp.js文件，在發(fā)布前用自動構(gòu)建工具把config_mode變量替換成release,再生成config.js文件。

module.exports = {
mode:'${config_mode}',
debug:{//開發(fā)環(huán)境配置
        sql: {
            sqlServer: 'aaaaaaaaa',
            sqlDatabase: 'da',
            sqlUser: 'sa',
            sqlPwd: 'aaaaaaa'
        }
},
release:{//生產(chǎn)環(huán)境配置
        sql: {
            sqlServer: 'bbbbbbbbb',
            sqlDatabase: 'db',
            sqlUser: 'sb',
            sqlPwd: 'bbbbbbbbb'
        }
}
};

這樣做似乎時不太優(yōu)雅的，所以僅供參考。
后來我發(fā)現(xiàn)一個更好的方法。原文地址

具體做法如下：在根目錄下命名一個config文件夾，分別為開發(fā)環(huán)境和生產(chǎn)環(huán)境寫配置。

//development.js
module.exports = {
    sql: {
        sqlServer: 'aaaaaaaaa',
            sqlDatabase: 'da',
            sqlUser: 'sa',
            sqlPwd: 'aaaaaaa'
    }
};

//production.js
module.exports = {
        sql: {
            sqlServer: 'bbbbbbbbb',
            sqlDatabase: 'db',
            sqlUser: 'sb',
            sqlPwd: 'bbbbbbbbb'
        }
};

再寫一個模塊用以判斷環(huán)境，從而選擇適合的配置；

var path = require('path');
// 通過NODE_ENV來設(shè)置環(huán)境變量，如果沒有指定則默認(rèn)為生產(chǎn)環(huán)境
var env = process.env.NODE_ENV || 'production';
env = env.toLowerCase();
// 載入配置文件
var file = path.resolve(__dirname, env);
try {
  module.exports = require(file);
} catch (err) {
  throw err;
}

然后，你可以在桌面編寫development.bat和production.bat兩個腳本文件

//development.bat
set NODE_ENV=development
npm start

//production.bat
set NODE_ENV=production
npm start

如此一來，當(dāng)你想切換環(huán)境時，只要雙擊運行就行了。發(fā)布時，因為沒有設(shè)置NODE_ENV，會默認(rèn)使用生產(chǎn)環(huán)境，不用擔(dān)心忘記改。

瀏覽器環(huán)境

在瀏覽器環(huán)境主要是js壓縮文件和非壓縮文件的切換。我看過利用構(gòu)建工具和模塊加載工具實現(xiàn)的，不過看起來有點復(fù)雜。
我的方法還是使用ejs模版。
將每個頁面共用的css和js分離出來，做一個文件，以頭部css文件為例。使用ejs模版

<%if(pageName=='index'){%>
<link rel="stylesheet" type="text/css" href="/common/css/lib/amazeui-index<%if(pageMode!='debug'){%>.min<%}%>.css" />
<%}else{%>
<link rel="stylesheet" type="text/css" href="/common/css/lib/amazeui<%if(pageMode!='debug'){%>.min<%}%>.css" />
<%}%>
<link rel="stylesheet" type="text/css" href="/common/css/util<%if(pageMode!='debug'){%>.min<%}%>.css"/>
<link rel="stylesheet" type="text/css" href="/MaiMai/dist/css/<%=pageName%><%if(pageMode!='debug'){%>.min<%}%>.css" />

這里利用一個傳到頁面的pageMode參數(shù)來控制，如果pageMode為debug,返回非壓縮文件，否則返回壓縮文件。
這個pageMode是從哪里來的呢？
我將router獨立出來一個模塊，給router加一個中間件

var express = require('express');
var router = express.Router();
router.use(function(req,res,next){
    if(!req.query.pageMode||req.query&&req.query.pageMode!='debug'){
        req.query.pageMode='release';
        next();
    }else{
        next();
    }
});
module.exports=router;

如果不傳參數(shù)，給query加一個默認(rèn)參數(shù)pageMode='release'（盡管它從頭到尾都沒用到）。每次請求前，都會先運行這個中間件，然后把這個參數(shù)傳下去。
當(dāng)然，在渲染頁面時，需要把這個參數(shù)傳給頁面：

router.get('/list', function(req, res) {
        res.render('List', {
            pageMode:req.query.pageMode
        });
    });
});

你可以像平常一樣在瀏覽器輸入地址，這時將下載壓縮資源

搜狗截圖17年02月20日2245_2.png

但如果你想在瀏覽器中調(diào)試，只要在后面加上一個pageMode=debug,加載的就是非壓縮的資源了。

搜狗截圖17年02月20日2245_3.png