Импорт данных YAML во время сборки в Webpack и предоставление их в качестве проанализированных данных во время выполнения - PullRequest
Новая
       17

Импорт данных YAML во время сборки в Webpack и предоставление их в качестве проанализированных данных во время выполнения

1 голос
/ 11 октября 2019

Я пытаюсь импортировать содержимое файла YAML во время сборки и каким-то образом сделать анализируемый контент доступным для моего приложения.

Это проект Webpack, с которым мне поручено работатьпостроение новой функции для. Проект использует Vue. У меня почти 0 опыта работы с Webpack. Я установил пакет js-yaml-loader и настроил для него Webpack следующим образом: 

module: {
  rules: [
    ...,
    {
      test: /\.ya?ml$/,
      include: path.resolve(process.cwd(), 'src/data'),
      loader: 'js-yaml-loader'
    },
    ...
  ]
}

Насколько я понимаю, во время сборки это будет проходить папку src/data для YAMLфайлы и загрузите их, используя загрузчик js-yaml-loader, который затем каким-то образом будет включать в себя проанализированный контент этих файлов. Но когда я ищу сгенерированный вывод, ключи / значения, содержащиеся в YAML, нигде не найдены.

Правильно ли я поступаю? Или я что-то неправильно понял?

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Вам необходимо импортировать файл .yaml в какой-то исходный файл вашего проекта.

Вы можете представить загрузчики веб-пакетов, определенные в module.rules, как некоторые сценарии или программы, которые будут запускаться при попытке импортироватьфайл, удовлетворяющий некоторому шаблону (свойство test) (также может быть выполнено другое условие , например ваше условие include). Загрузчик примет ваш файл в качестве входных данных и предоставит некоторый вывод.

Поэтому вам нужно импортировать ваш файл, например, в некоторые из ваших файлов .js: 

import myYamlFile from './file.yml';

Затем в соответствии с документация по js-yaml-loader у вас есть файл в виде объекта javascript в переменной myYamlFile, см. Документацию синтаксического анализатора js-yaml:

https://github.com/nodeca/js-yaml

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

В конце концов, мне даже не пришлось изменять конфигурацию Webpack. Я только что сделал это: 

import TextData from 'js-yaml-loader!../data/texts.yaml';
import Texts from './vue/plugins/texts';
Vue.use(Texts, {
    texts: TextData,
});

, который импортирует текстовые данные как объект JS и внедряет их в параметры моего плагина Texts Vue.

...