很多朋友打包是通过webpack打包配置不同的环境配置，但都遇到一个问题，就是打包好build文件后，交给运维人员，怎么可以自行修改环境变量？前两天介绍了一种解决方案，是编写脚本，更改js的思路，今天我们换下另一种解决方案：使用node

总的思路

前端不能直接读取环境变量，但是node可以，打包时，将env里的变量配置替换成一个全局变量，打包的静态文件里就会用这个全局变量，用node启动时读取到环境变量，再用服务器渲染的方式传给前端即可

实践

1. 服务端渲染用 ejs 传值，所以要装 ejs
2. 将项目目录下的index.html 拷贝复制一份，存为index.ejs
3. 看下你的env文件里的环境变量

   FRONTEND_VERSION=v4.8.2
   FRONTEND_CLIENTID=frontend
   API_GATEWAY=http:/127.0.0.1/

4. 将index.ejs在其header加上：

   <script>
       const GLOBAL_ENV = {
           "FRONTEND_VERSION": "<%= FRONTEND_VERSION %>", // 接收 node 传来到 FRONTEND_VERSION
           "FRONTEND_CLIENTID": "<%= FRONTEND_CLIENTID %>"，
           "API_GATEWAY": "<%= API_GATEWAY %>"
       };
       Object.freeze(GLOBAL_ENV);
   </script>

5. webpack 打包时，将用到env的配置改为全局变量：GLOBAL_ENV， plugins里添加：

   new webpack.DefinePlugin({ 'process.env': 'GLOBAL_ENV' })

6. webpack里的output路径调整为：

   output: {
       filename: '[name].[chunkhash].js',
       chunkFilename: '[name].[chunkhash].chunk.js',
       path: path.resolve(process.cwd(), 'release/dist'),
   },

7. 项目的package.json里的scripts添加打包命令：

   "build:release": "cross-env NODE_ENV=release webpack --config internals/webpack/webpack.release.babel.js --color -p --progress --hide-modules --display-optimization-bailout",

8. 在项目目录下新建release文件夹
9. release文件夹下添加package.json

   {
       "name": "server",
       "version": "4.8.2",
       "scripts": {
           "start": "node server.js"
       },
       "dependencies": {
           "express": "^4.13.3",
           "path": "^0.12.7",
           "ejs": "^2.3.4"
       }
   }

10. server.js

    const path = require('path');
    const express = require('express');
    
    const FRONTEND_VERSION = process.env.FRONTEND_VERSION;
    const FRONTEND_CLIENTID = process.env.FRONTEND_CLIENTID;
    const API_GATEWAY = process.env.API_GATEWAY;
    const port = process.env.PORT || 8080;
    
    const app = express();
    
    app.use(express.static(__dirname + '/dist'));
    app.set('views', path.join(__dirname, '/dist/'));
    app.set('view engine', 'ejs');
    
    app.get('*', function response(req, res) {
      res.render('index', {
        FRONTEND_VERSION,
        FRONTEND_CLIENTID,
        API_GATEWAY,
      });
    });
    
    app.listen(port);

11. 打包

    npm run build:release

这时候，release/dist里就是我们打包好的静态包

11. 压缩release,交给运维人员部署即可
12. 现在服务器上一般使用PM2 来启动node，需要我们配置processes.json, 像我们公司，同一个项目需要设置不同端口号，api url 来生成两个不同的项目，这样PM2 json设置就帮了我们很大的忙，一次启动两个项目即可，记得先npm install哈

{
  "apps": [
    {
      "name": "Frontend01",
      "script": "./server.js",
      "env": {
        "NODE_ENV": "production",
        "PORT": 8080,
        "FRONTEND_VERSION": "v4.8.2",
        "FRONTEND_CLIENTID": "frontend",
        "API_GATEWAY": "http://127.0.0.0/",
      }
    },
    {
      "name": "Frontend02",
      "script": "./server.js",
      "env": {
        "NODE_ENV": "production",
        "PORT": 8099,
        "FRONTEND_VERSION": "v4.8.2",
        "FRONTEND_CLIENTID": "frontend-02",
        "API_GATEWAY": "http://127.0.0.0/",
      }
    }
  ]
}

​