Webpack с модулем и основной транспиляцией - PullRequest
Новая
       6

Webpack с модулем и основной транспиляцией

0 голосов
/ 11 января 2019

Я обнаружил, что по какой-то причине веб-пакет предпочитает module вместо main на package.json.

У нас есть много библиотек, которые экспортируют модуль в ES6 и основной конвейер, но в итоге мы получили вещи, которые не переносятся. Взяв пару известных модулей React, таких как React Bootstrap или React Toolbox

Я вижу, что я здесь не против конгресса, но я удивлен, что не многие сталкиваются с этим. React должен запускаться как в браузере, так и на узле, если SSR установлен, поэтому я не уверен, что делать дальше.

Пример библиотеки здесь: https://github.com/firstandthird/domodule/blob/master/package.json#L6

Как включение node_modules на загрузчике babel, так и выполнение переключения, указанного в приведенном выше решении, похоже, идут вразрез со всеми остальными вещами, что, опять же, меня удивляет.

Единственное частичное решение, которое я нашел, - не исключать node_modules на babel-loader, но похоже, что это может откусить мне назад.

Вот соответствующая часть конфигурации Webpack. 

module.exports = config => ({
  test: /\.m?js$/,
  use: {
    loader: 'babel-loader',
    options: {
      babelrc: false,
      configFile: false,
      presets: [
        [
          '@babel/preset-env',
          {
            targets: config.browserlist,
            useBuiltIns: false,
            modules: false,
            exclude: ['transform-typeof-symbol']
          }
        ]
      ],
      cacheDirectory: true,
      cacheCompression: config.minify,
      compact: config.minify
    }
  }
});

Вопрос в том, как правильно настроить Webpack или мои библиотеки. Я не против поменять все библиотеки, если это известный стандарт или что-то, чего мы могли бы здесь упустить.

1 Ответ

0 голосов
/ 21 января 2019

Что ж, стандарт сейчас заключается в том, чтобы предоставить pkg.main, поскольку выходные данные веб-пакета полностью перенесены и объединены, а pkg.module указывает на переданный, но не связанный вывод.

Имейте в виду, что pkg.module должен иметь только import/export из возможностей ES6, а не другие вещи (например, функции стрелок). К сожалению, в данном случае веб-пакет не предоставляет никакого способа вывести такую ​​вещь. Это всегда помещает это __webpack_require__ материал.

Как вы уже поняли, вы, конечно, можете настроить конфигурацию вашего приложения для запуска babel в библиотеке, добавив node_modules/yourlibrary, если это частная библиотека, которую вы используете только. Я не думаю, что публичная библиотека должна заставлять клиентов переносить ее каждый раз, особенно если есть определенные правила или плагины, которые должны применяться.

Другое решение, которое используют библиотеки, - это просто взять исходный код и запустить babel только поверх него, без какого-либо веб-пакета. Это, конечно, будет работать, но расширенные конфигурации со спецификой веб-пакета (например, псевдоним и т. Д.) Просто потерпят неудачу.

Другое решение заключается в использовании накопительного пакета в качестве сборщика для библиотек, которые, кажется, имеют эти возможности из коробки.

В веб-пакете есть открытая проблема с дополнительной информацией, если вы заинтересованы.

Здесь также является страницей из накопительного пакета, которая описывает эту концепцию.

...