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

我有一个文件，我想有Node.js和浏览器代码

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

网页包能否根据环境从文件中排除代码

有点像C预处理指令<代码>#如果#否则等

我知道Webpack对代码的解析非常密集，这让我觉得它可以

约束

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

• 我希望浏览器和节点代码位于同一个文件中。我知道我可以使用

  webpack.IgnorePlugin

  以文件为基础忽略requires，或者将共享代码放在浏览器文件中并从服务器上请求（我现在正在这样做），但我想知道是否可以将代码并排放在同一个文件中

---

编辑：下面是一个我正在尝试做的例子

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)
}

您可以使用设置

节点_ENV

并以这种方式对代码进行选通：

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

DefinePlugin

将用提供的字符串替换代码中的

process.env.NODE_env

实例，因此在编译代码中会出现类似于

if（'production'！='production'）

。当您进行产品构建时，Webpack会运行

uglify

，并消除死代码，这将去除这些无法访问的块。（见附件）

---

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

我如何保证代码将被剥离？如果我有一个类，它有两个方法，一个用于浏览器，一个用于节点。webpacks analyzer是否能够查看对方法的调用是否以process.env.NODE\u env为条件？我认为这将使我的代码过于混乱，因为我必须包装requires和方法调用。我将用一个我正在尝试做的例子来更新我的Q。看起来你可以非常容易和明智地重新组织你的代码，使选通更容易（例如，为什么不调用

register

，让插件处理要运行的方法，而不是公开更复杂的接口？）但我知道这可能不可行取决于你的项目规模。