Сегодня я наблюдал, как babel / babel-loader проявляет нежелательное поведение. Я собираю некоторые активы для использования на nodejs. После компиляции создается пакет со ссылками на @babel/runtime/**/esm/**
. Конечно, узел не может импортировать такие файлы, и на node bundle.js
я получаю:
Must use import to load ES Module: /my/project/node_modules/@babel/runtime/helpers/esm/defineProperty.js
require() of ES modules is not supported.
Верно. Имеет смысл. Но babel-loader ввел этот импорт. Фактически, родительская папка в @ babel / runtime имеет все не-ESM вещи, которые я, вероятно, do хочу импортировать! Моя конфигурация babel выглядит так:
{
presets: [
[
"@babel/preset-env",
{
modules: 'commonjs',
targets: {
node: "current",
esmodules: false,
},
},
],
"@babel/preset-typescript",
]
}
Как видите, я пытаюсь указать babel через targets.esmodules: false
и modules: 'commonjs'
, что нужно использовать обычные js. Я надеялся, что эти записи скажут babel, что он не ожидает совместимости с ESM! Тем не менее, сгенерированные пакеты по-прежнему выглядят так:
...
var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/esm/toConsumableArray */ "@babel/runtime/helpers/esm/toConsumableArray"));
Моя полная конфигурация веб-пакета также довольно краткая:
{
entry: serverFilename,
mode: 'development',
output: {
path: path.dirname(serverBuildFilename),
filename: path.basename(serverBuildFilename)
},
target: "node",
externals: [webpackNodeExternals()],
optimization: {
moduleIds: 'named',
minimize: false
},
resolve: {
extensions: ['.ts', '.tsx', '.wasm', '.mjs', '.js', '.json'],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: babelConfig.presets // see babel config above
}
}
},
],
},
}
Я не могу сказать, не хватает ли мне конфигурации, если babel не соблюдает мою конфигурацию, или <your ideas here>
!
Все советы приветствуются. Спасибо!