babel 7 игнорирует файлы вне текущей директории

Question

Скажем, у меня есть следующая структура проекта (ну, она более сложная, чем структура ниже):

• CommonComponents
  • CommonComponentA
  • CommonComponentB
  • пакет.json
  • webpack.config.js
  • .babelrc
• ModuleA
  • ComponentC // импорт CommonComponentA
  • ComponentD
  • package.json
  • webpack.config.js
  • .babelrc
• ModuleB
  • ComponentE// импорт CommonComponentB
  • ComponentF
  • package.json
  • webpack.config.js
  • .babelrc

Я компилирую, объединяю и использую ModuleA и ModuleB отдельно.Когда я перешел на babel 7, импорт модулей из каталога CommonComponents перестал работать.Babel игнорирует файлы, которые находятся за пределами текущего рабочего каталога, и не переносит их, поэтому компиляция веб-пакета завершается неудачно с жалобой «неожиданный токен» на импортируемый компонент.

Из того, что я понял, они изменили способ поиска .babelrcслучается.Я действительно не могу обернуть голову терминами «root», «babelrcRoots» и т. Д. Может ли кто-нибудь объяснить, что мне нужно будет сделать для успешной компиляции ModuleA и ModuleB из их соответствующего рабочего каталога?

Answer 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']
        }
      }
    }
  ]
}

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