我试图在构建时导入 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 中包含的键/值。
我的做法是否正确?还是我误解了什么?
最佳答案
这就是我用 Vue + TypeScript 解决它的方法:
创建一个 yaml 文件,例如
test.yaml
.为其创建类型,例如
test.yaml.d.ts
,注册它以与js-yaml-loader
一起使用例如:declare module 'js-yaml-loader!*' { export interface TestYaml { testProperty: string; } const content: TestYaml ; export default content; }
使用
import { MyYamlFile} from 'js-yaml-loader!./../test.yaml'; 导入它;
例子:
关于vue.js - 在构建时在 Webpack 中导入 YAML 数据,并在运行时将其作为解析数据提供,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58338835/