Как создать модуль для: web, require by node * и * require by web app?

Question

TLDR; Каков наилучший способ создания модуля, который можно связать для веб-сайтов, который требуется приложением узла, и , который требуется для модуля узла, который связывается для веб-сайта?

Я начал с того, что у меня было две точки входа, одна для узла (index.js) и одна для сети (index-web.js). Это прекрасно работает для объединения в сеть, потому что webpack использует index-web.js. Он также работает по требованию приложения узла, потому что он берет index.js. Итак, первые два пункта «проверить».

Но это не сработает, если мне понадобится мой модуль из приложения узла, которое собирается для веба, потому что он по умолчанию выбирает index.js. Может быть, есть простой способ справиться с этим?

Итак, вопрос 1. Может ли зависимый модуль выбрать точку входа в Интернет (index-web.js) или даже веб-пакет, когда он npm install s или npm link s мой модуль?

Я попытался переключиться на использование только index.js и поместить туда условные требования (условно на (typeof window === 'undefined')), какой тип работает, но:

A) У меня остались те надоедливые сообщения «Предупреждение: критическая зависимость», которые я собираюсь рассмотреть (webpack issue # 196 ).

B) Мне нужно изменить webpack.config.js модуля зависимость , чтобы исключить определенные встроенные функции (использующие externals), на которые теперь ссылаются, потому что я использую условные требования в index.js , В долгосрочной перспективе это нарушение условий сделки.

Answer 1

Я обнаружил, что хорошим решением является использование комбинации пакета npm Node-Detection и веб-пакета DefinePlugin.Это гарантирует, что веб-пакет упаковывает только модули, необходимые для сети, и исключает предупреждения веб-пакета о «Критической зависимости: запрос зависимости является выражением».

Итак, в ваших изоморфных модулях (зависимость и зависимость):

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')
    }