javascript - 与 webpack/browserify 捆绑时如何排除代码路径？

Question

我有一个可以与 node.js 和浏览器一起使用的库。我正在使用 CommonJS，然后使用 webpack 发布 Web 版本。我的代码如下所示:

// For browsers use XHR adapter
if (typeof window !== 'undefined') {
  // This adapter uses browser's XMLHttpRequest
  require('./adapters/xhr');
}
// For node use HTTP adapter
else if (typeof process !== 'undefined') {
  // This adapter uses node's `http`
  require('./adapters/http');
}

我遇到的问题是，当我运行 webpack(browserify 也会这样做)时，生成的输出包括 http 及其所有依赖项。这会产生一个对于浏览器性能而言并非最佳的巨大文件。

我的问题是如何在运行模块 bundler 时排除 Node 代码路径？我通过使用 webpack 的外部组件暂时解决了这个问题，并在包含 './adapters/http' 时返回 undefined。这并不能解决其他开发人员使用 CommonJS 依赖我的库的用例。除非他们使用类似的排除配置，否则他们的构建最终会遇到同样的问题。

我看过使用 envify，只是想知道是否有其他/更好的解决方案。

谢谢!

Answer 1

您可以将 IgnorePlugin 用于 Webpack。如果您使用的是 webpack.config.js 文件，请像这样使用它:

var webpack = require('webpack')

var ignore = new webpack.IgnorePlugin(/^(canvas|mongoose|react)$/)

module.exports = {
  //other options goes here
  plugins: [ignore]
}

为了进一步插入它，您可以使用诸如 process.env.NODE_ENV 之类的标志来控制 IgnorePlugin 的正则表达式过滤器