Я обнаружил, что по какой-то причине 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 или мои библиотеки. Я не против поменять все библиотеки, если это известный стандарт или что-то, чего мы могли бы здесь упустить.
Что ж, стандарт сейчас заключается в том, чтобы предоставить pkg.main
поскольку выходные данные pkg.main
-пакета полностью перенесены и упакованы, а pkg.module
указывает на перенесенный, но не связанный вывод.
Имейте в виду, что pkg.module
должен иметь import/export
из возможностей ES6, а не другие вещи (например, функции стрелок). К сожалению, в данном случае веб-пакет не предоставляет никакого способа вывести такую вещь. Это всегда помещает это __webpack_require__
материал.
Как вы уже поняли, вы, конечно, можете настроить конфигурацию приложения для запуска babel в библиотеке, node_modules/yourlibrary
если это частная библиотека, которую вы используете только. Я не думаю, что публичная библиотека должна принуждать клиентов к ее переносу каждый раз, особенно если существуют конкретные правила или плагины, которые должны применяться.
Другое решение, которое используют библиотеки, это просто взять исходный код и запустить babel только поверх него, без какого-либо веб-пакета. Это, конечно, будет работать, но расширенные конфигурации со спецификой веб-пакета (например, псевдоним и т.д.) Просто не удастся.
Другое решение состоит в том, чтобы использовать накопительный пакет как библиотеку для библиотек, которые, кажется, имеют эти возможности из коробки.
Существует открытый вопрос в веб-пакете с дополнительной информацией, если вы заинтересованы.
Вот также страница из накопительного пакета, которая описывает эту концепцию.
targets
свойстве WebPack: webpack.js.org/concepts/targets