使用webpack,我可以将Node.js和浏览器代码放在同一个文件中,但阻止Node.js代码将其传送到浏览器?

我有一个文件,我想同时具有Node.js和浏览器代码。

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

webpack可以根据环境从文件中排除代码吗?

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

我知道Webpack对代码进行了相当深入的分析,这让我认为它可以。

约束

  • Node.js代码无法访问浏览器,因为它可能包含敏感的configuration选项。

  • 我希望浏览器和节点代码在同一个文件中。 我知道我可以使用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插件来设置NODE_ENV并以这种方式设置代码:

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

DefinePlugin将用你提供的stringreplace你的代码中的process.env.NODE_ENV实例,所以你最终会在编译后的代码中看到if ('production' !== 'production') 。 当你做一个生产版本,Webpack运行uglify与死代码消除,这将消除这些不可达的块。 (请参阅webpack howto:function标志 )

这就是React(以及其他许多库)在投入生产之前剥离开发代码的方式。