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

With webpack, can I put Node.js and browser code in the same file, but prevent the Node.js code making it to the browser?

本文关键字：浏览器 代码 Node js 我可以 webpack 使用 同一个 文件      更新时间：2023-09-26

我有一个文件，我想有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)
}

你可以使用Define Plugin来设置NODE_ENV和gate你的代码:

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(和许多其他库)在投入生产之前剥离开发代码的方式。

相关文章：