如何创建一个模块：web、node *和* web app需要？

Question

TLDR;创建一个可以为 web 捆绑的模块的最佳方法是什么？节点应用程序需要，和为 web 捆绑的节点模块需要？

我一开始有两个入口点，一个用于节点 (index.js)，一个用于 web (index-web.js)。这适用于 web 捆绑，因为 webpack 使用 index-web.js。它也适用于节点应用程序的需求，因为它选择了 index.js。所以前两项“检查”。

但是，如果我需要我的模块来自为 web 捆绑的节点应用程序，它就不起作用，因为它默认选择 index.js。也许有一个简单的方法来处理它？

所以 Q1：当依赖模块 npm installs 或 npm links 我的模块时，有没有办法让依赖模块获取 web 入口点 (index-web.js) 甚至 web 包？

我已经尝试切换到只使用 index.js 并在其中放置条件要求（以(typeof window === 'undefined') 为条件）哪种可行，但是：

A) 我留下了那些令人讨厌的“警告：严重依赖”消息，我将要调查 (webpack issue #196)。

B) 我必须修改 dependency 模块的 webpack.config.js 以排除现在引用的某些内置函数（使用 externals），因为我在索引中使用条件要求。 js。从长远来看，这会破坏交易。

Answer 1

我发现一个很好的解决方案是结合使用 npm node-detect 包和 webpack DefinePlugin。这确保了 webpack 只打包 web 所需的模块，并消除了 webpack 关于“关键依赖：依赖的请求是一个表达式”的警告。

所以在你的同构模块中（依赖和依赖）：

npm install --save detect-node

或

yarn add detect-node

在 webpack.config.js 中：

    const webpack = require('webpack')
    // ...
    module.exports = {
      // ...
      plugins: [
        new webpack.DefinePlugin({
          IS_BROWSER: true
        })
      ]
    }

在您的代码中：

    const isNode = require(detect-node)
    if (isNode) {
        if (!IS_BROWSER) {
          // Ignored by webpack, handled by node
          safeJs.safeApi = require('./bootstrap')   
        }
    } else {
          // Ignored by node, handled by webpack
          window.safeJs = safeJs
          safeJs.safeApi = require('./bootstrap-web')
    }