vue.js - 在构建时在 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/data YAML 文件的文件夹，并使用 js-yaml-loader 加载它们加载程序，然后它将以某种方式将这些文件的已解析内容包含在某处。但是当我搜索生成的输出时，找不到 YAML 中包含的键/值。

我的做法是否正确？还是我误解了什么？

Answer 1

这就是我用 Vue + TypeScript 解决它的方法:

1. 创建一个 yaml 文件，例如test.yaml.

2. 为其创建类型，例如test.yaml.d.ts，注册它以与js-yaml-loader一起使用例如:

      declare module 'js-yaml-loader!*' { 
             export interface TestYaml {
                    testProperty: string;
             }
   
             const content: TestYaml ;
             export default content;
      }
   

3. 使用 import { MyYamlFile} from 'js-yaml-loader!./../test.yaml'; 导入它;

例子:

• application.yaml the YAML file
• application.d.ts the typings file
• ApplicationParser.ts file importing the yaml file