Как использовать Babel для файлов, которые импортируются с использованием псевдонимов пути? - PullRequest
Новая
       103

Как использовать Babel для файлов, которые импортируются с использованием псевдонимов пути?

0 голосов
/ 11 ноября 2019

Я настраиваю свой сценарий сборки для выполнения рендеринга на стороне сервера на некоторых маршрутах моего веб-приложения. Я использую React и Firebase. Прямо сейчас моя структура проекта выглядит следующим образом. 

root

> buildScripts        // Some build scripts to replace some import paths

> functions
  > distApp           // React app files (src folder down below) transpiled to Node v10
  > distFunctions     // Cloud functions files transpiled to Node v10
    function1.js
  > src               // Cloud functions files written in ES6
    function1ES6.js
  index.js            // indexES6 transpiled to Node v10
  indexES6.js         // index.js written in ES6
  package.json        // Dependencies for functions

> src                 // React app files written in ES6
firebase.json         // Firebase configuration
package.json          // Dependencies for client

Что я планирую сделать в качестве потока сборки:

  • Прозрачные файлы функций в среде ES6 для Node v10. От functions/src до functions/distFunctions.
  • Transpile functions/indexES6.js до functions/index.js
  • Файлы Transpile приложения от root/src до functions/distApp (ЭТО МОЯ ТЕКУЩАЯ ПРОБЛЕМА)

В итоге я использую несколько псевдонимов пути, чтобы сделать некоторые imports во всем приложении немного более понятными. Как и те, что перечислены ниже:

jsconfig.json 

"paths": {
        "@components/*": ["./src/components/*"],
        "@constants/*": ["./src/constants/*"],
        "@helpers/*": ["./src/helpers/*"]
      }

И когда я собираюсь в производство (код браузера клиента), я имею дело с этими путямис вебпаком. Я добавляю свойство resolve, чтобы Webpack знал, как с ними обращаться. И связывает его правильно.

webpack.config.js 

resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@constants': path.resolve(__dirname, 'src/constants'),
      '@helpers': path.resolve(__dirname, 'src/helpers')
    }
  }

Таким образом, Webpack знает, как разрешить и заменить этот импорт. Но Babel НЕ делает.

Затем, когда я перемещаю все файлы моего приложения в папке root/src в мой functions/distApp. Вавилон сохраняет этот импорт нетронутым. require('@components/something');

И, как и ожидалось, мой functions код не имеет представления, куда @components разрешается.

ВОПРОС

Какмогу ли я получить доступ к этим imports во время процесса трансплантации Babel и обновить их? Есть ли плагин, который мог бы сделать это? Как я могу справиться с этим?

PS: Я хотел бы продолжать использовать псевдонимы путей, потому что глубокие файлы, импортирующие мелкие файлы, могут стать довольно уродливыми. Как import helper from '../../../../../../../helpers/someHelper';. И когда я импортирую таким образом, если я перемещаю файл, я немедленно прекращаю импорт, тогда как import helper from '@helper/someHelper' не прерывается вообще.

...