课时-15.md

课时 15：定义通用变量

有时我们需要在脚手架跟业务代码之间有一个通信的桥梁

比如我们 npm run build 时我们是运行的生产环境，我想在 main.js 中生产环境下做一些特殊的逻辑。但是 main.js 执行是在浏览器端，而 npm run build 时运行在 node 端，两端没有办法做通讯。那么我们怎么办呢？

webpack 给我们提供了一个插件 EnvironmentPlugin，这个插件可以将我们在 node 端定义的变量，在编译时将值编译到代码中，举个例子

我们在 main.js 中写了一段 node 中看起来很常见的代码，但是这在浏览器中是不能识别的，因为浏览器中并没有 process 对象，这段代码不出意外会报错

main.js

if (process.env.NODE_ENV === "production") {
  console.log("Welcome to production");
}

我们配置 webpack.EnvironmentPlugin 插件

const webpack = require("webpack");

module.exports = ({ config, resolve, options }) => {
  return () => {
    const resolveClientEnv = require("../util/resolveClientEnv");
    config
      .plugin("process-env")
      .use(webpack.EnvironmentPlugin, [resolveClientEnv(options)]);
  };
};

util/resolveClientEnv.js

module.exports = function resolveClientEnv(options, raw) {
  const env = {};
  if (process.env) {
    Object.keys(process.env).forEach(key => {
      if (key === "NODE_ENV") {
        env[key] = process.env[key];
      }
    });
  }
  if (options.env) {
    Object.assign(env, options.env);
  }
  return env;
};

我们执行 npm run build，看一下 dist/index.bundle.js 会编译成什么

// "production" === "production"
if (true) {
  console.log("Welcome to production");
}

webpack 将 process.env.NODE_ENV 的值编译在 bundle 中，这样我们就可以在 web 端运行了，而且编译出来是在生产环境下