使用 webpack，我可以将 Node.js 和浏览器代码放在同一个文件中，但阻止 Node.js 代码进入浏览器吗？

Question

我有一个文件想要同时包含 Node.js 和浏览器代码。

Node.js 代码不应在浏览器中可见。

webpack 能否根据环境从文件中排除代码？

有点像 C 预处理指令。 #if #else, etc.

我知道 Webpack 非常密集地解析代码，这让我认为它可以。

约束

• Node.js 代码无法进入浏览器，因为它可能包含敏感的配置选项。

• 我希望浏览器和节点代码在同一个文件中。我知道我可以使用webpack.IgnorePlugin 忽略基于文件的要求，或者将共享代码放在浏览器文件中并要求来自服务器（我现在正在这样做），但我想知道它是否可能将代码并排放在同一个文件中。

---

编辑：这是我正在尝试做的一个例子。

export class FooPlugin {

  $name = 'foo-plugin'

  register(app) {

    const app = koa()
    app.get('/foo', () => { this.send('foo') })
    app.set('SECRET STUFF!')
    app.start()
    this.shared()

  }

  shared(app) {

      // browser things - isomorphic react router routes, etc.

  }

  registerBrowser(app) {

      this.shared()

  }

}

// This is called in another file depending on the environment.

if (!isBrowser) {
  (new FooPlugin).register(app)
} else {
  (new FooPlugin).registerBrowser(app)
}

Answer 1

您可以使用Define Plugin 设置NODE_ENV 并以这种方式控制您的代码：

var define  = new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}})

DefinePlugin 将用提供的字符串替换代码中的process.env.NODE_ENV 实例，因此在编译后的代码中您最终会得到类似if ('production' !== 'production') 的内容。当您进行生产构建时，Webpack 运行 uglify 并带有死代码消除，这将去除这些无法访问的块。 （见webpack howto: feature flags）

这就是 React（和许多其他库）在投入生产之前剥离开发代码的方式。