webpack & 在同构包中使用节点模块

Question

我正在构建一个同构包，我在其中使用各种文件中的标志来检测我们是在浏览器中还是在节点中。如果在节点中，我需要一个内部包，即 if (isNode) { require("/.nodeStuff) }，它的依赖项之一是 fs 模块。但是，出于显而易见的原因，webpack 不喜欢这样。是否有任何类型的基于模块的 webpack 配置文件，我可以将其配置为完全忽略基于节点的需求，从而不会发生这种情况？

Answer 1

第一个选项

如文档中所述，为了解决这个同构问题，您可以简单地运行两个构建，一个用于每个环境（节点和网络）。可以找到该指南 here。请记住，您可能应该通过添加此块来模拟 clientConfig 中的任何内置插件 node: { fs: 'empty',//any other node lib used }。这样 webpack 就不会抱怨，因为你的客户端代码将处于 !IS_NODE 条件下，空的 fs 将永远不会被使用。

虽然这是一个可靠的解决方案，但您最终会得到 2 个捆绑包，当然您每次都需要一种将它们分发到正确平台的方法。

第二种方式

此解决方案基于不太知名的 __non_webpack_require__ 函数。这是一个 webpack 特定的函数，它将指示解析器避免捆绑正在请求的这个模块，并假设全局 require 函数可用。这正是在节点而不是浏览器中运行ning 时发生的情况。

//webpack.config.js

{
    mode: "development",
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    node: false
}

// nodeStuff.js

const fs = __non_webpack_require__('fs'); //this will be transformed to require('fs')

fs.writeFileSync('some','thing)

这样，由于 nodeStuff.js 仅在 IS_NODE 条件下才需要，因此原生 require 将可用。

我建议只在本机库上使用 __non_webpack_require__，您确定它可用！

webpack & 在同构包中使用节点模块

webpack & using node modules in an isomorphic package

javascript

node.js

webpack

jsdom

第一个选项

第二种方式