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

Question

我试图在构建时导入 YAML 文件的内容，并以某种方式使解析的内容可供我的应用程序使用。

这是一个 Webpack 项目，我的任务是为其构建新功能。该项目使用的是Vue。我对 Webpack 的经验几乎为零。我已经安装了该js-yaml-loader包，并使用它配置了 Webpack，如下所示：

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

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

我的做法正确吗？或者我有什么误解？

Answer 1

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

您可以想象 webpack 加载器定义为module.rules一些脚本或程序，当您尝试导入满足某些模式（test属性）的文件时将运行这些脚本或程序（还可能需要满足另一个条件include，例如您的条件）。加载器会将您的文件作为输入并提供一些输出。

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

import myYamlFile from './file.yml';

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

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