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

1

Я обнаружил, что по какой-то причине webpack предпочитает 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 или мои библиотеки. Я не против поменять все библиотеки, если это известный стандарт или что-то, чего мы могли бы здесь упустить.

  • 0
    Какой у тебя актуальный вопрос? Кроме того , обратите внимание на targets свойстве WebPack: webpack.js.org/concepts/targets
  • 0
    Спасибо за вопрос Мэтью, ты прав. Я отредактировал и добавил свой вопрос в конце. Что касается цели, мы используем только веб-пакеты для браузера, но есть библиотеки, которые могут использоваться совместно.
Теги:
webpack
babel

1 ответ

0

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

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

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

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

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню