Babel 7 игнорирует файлы вне текущего каталога
Скажем, у меня следующая структура проекта (ну, она более сложная, чем структура ниже):
- Общие компоненты
- CommonComponentA
- CommonComponentB
- package.json
- webpack.config.js
- .babelrc
- ModuleA
- ComponentC // импорт CommonComponentA
- КомпонентD
- package.json
- webpack.config.js
- .babelrc
- МодульB
- ComponentE // импорт CommonComponentB
- ComponentF
- package.json
- webpack.config.js
- .babelrc
Я компилирую, связываю и использую ModuleA и ModuleB отдельно. Когда я перешел на babel 7, импорт модулей из каталога CommonComponents перестал работать. Babel игнорирует файлы, которые находятся за пределами текущего рабочего каталога, и не переносит их, поэтому компиляция веб-пакета не работает с сообщением «Неожиданный токен» в импортированном компоненте.
Насколько я понял, они изменили способ поиска .babelrc. Я действительно не могу понять термины 'root', 'babelrcRoots' и т. д. Может ли кто-нибудь объяснить, что мне нужно сделать, чтобы успешно скомпилировать ModuleA и ModuleB из их соответствующего рабочего каталога?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Основываясь на реальной структуре вашего проекта (это установка monorepo с корневой папкой?) И конфигурации веб-пакета, которую вы используете, у вас может быть несколько способов решить эту проблему, одним из способов может быть добавление include key в правило загрузчика babel в файлах конфигурации webpack вы получите что-то вроде этого:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: path.resolve(__dirname, '../CommonComponents'),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
как указывалось ранее, это зависит от вашей реальной структуры проекта, но вы можете попробовать и убедиться, что он работает.
Это не совсем монорепозиторий. Я мог бы попробовать добавить babelconfig.js на корневом уровне для конфигурации всего проекта (как указано в документации Babel 7), но не могу понять, как это сделать.
Директива include готова к добавлению с правильным путем и, как указано выше, работает с babel 6.