在Webpack的构建时导入YAML数据，并在运行时将其作为已解析的数据使用

Question

我正在尝试在构建时导入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'
    },
    ...
  ]
}

据我了解，这将-在生成时-遍历YAML文件的src/data文件夹，并使用js-yaml-loader加载器加载它们，然后将以某种方式将这些文件的解析内容包含在某个位置。但是，当我搜索生成的输出时，YAML中包含的键/值无处可寻。

我能正确处理吗？还是我误解了？

Answer 1

您需要在项目的某些源文件中导入.yaml文件。

您可以想象在module.rules中定义的webpack加载程序，它们是当您尝试导入具有某种模式（test属性）的文件时将运行的某些脚本或程序（也可能有其他应满足的condition ，例如您的include条件）。加载程序会将您的文件作为输入并提供一些输出。

因此，您需要导入文件，例如在您的某些.js文件中：

import myYamlFile from './file.yml';

然后根据js-yaml-loader documentation，您将文件作为javascript对象存储在变量myYamlFile中，请参阅js-yaml解析器的文档：

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

Answer 2

最后，我什至不必修改Webpack配置。我只是这样做：

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

[将文本数据作为JS对象导入并将其插入到Texts Vue插件的选项中。