Question

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

Answer 1

第一个选项

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

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

第二种方式

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

// 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和在同构包中使用节点模块

1 个答案:

第一个选项

第二种方式