如何在JavaScript中一次加载多个YAML文件
如何在JavaScript中一次加载多个YAML文件
提问于 2020-08-18 13:49:07
我写了一个Ruby脚本，将一个很大的YAML文件(名为travel.yaml)拆分成每个国家的单独文件，其中包含国家键和信息的列表。
data = YAML.load(File.read('./src/constants/travel.yaml'))
data.fetch('countries').each do |key, value|
File.open("./src/constants/countries/#{key}.yaml", 'w') { |file| file.write({ key => value }.to_yaml) }
end使每个文件看起来像这样：
---
BA:
sources:
domestic:
- Wearing masks and social distancing (a minimum of 2 metres) are [mandatory in
all public places](https://www.oecd.org/south-east-europe/COVID-19-Crisis-in-Bosnia-and-Herzegovina.pdf).
inbound:
- The BiH Council of Ministers has announced that it will allow entry to the citizens
of Croatia, Serbia, and Montenegro as of June 1, 2020. There is [still a ban
to entry for non-resident foreign nationals.](https://ba.usembassy.gov/covid-19-information/)
visa_quarantine:
- Both the Republika Srpska and the Federation have [abolished self-isolation
measures for people entering BiH.](https://ba.usembassy.gov/covid-19-information/).
travel:
domestic: partial
inbound: partial
inbound_allowed:
- HR
- RS
- ME在拆分travel.yaml之前，它的使用方式如下：
import TravelDefaults from '@/constants/travel.yaml';
export const Travel = TravelDefaults;
const { countries, checked_on } = Travel;我现在想一次加载所有独立的YAML文件并使用它们(而不必单独导入每个文件)。
我该怎么做呢？这必须在VUE和Typescript中完成。
回答 2
Stack Overflow用户
发布于 2020-08-18 18:45:33
const yaml = require('js-yaml');
const mergeYaml = require('merge-yaml');
const fs = require('fs');
const travelMerger = () => {
const basePath = './src/constants/';
const countryFiles = fs.readdirSync(`${basePath}countries/`);
const filesWithDir = countryFiles.map((file) => `${basePath}countries/${file}`);
const countriesYaml = mergeYaml(filesWithDir);
const yamlStr = yaml.safeDump(countriesYaml);
fs.writeFileSync(`${basePath}travelMerged.yaml`, yamlStr, 'utf8');
};
module.exports = travelMerger;这是有效的，但不幸的是，在TypeScript的Vue中不起作用。
Stack Overflow用户
发布于 2021-01-30 23:22:54
如果您不介意使用编译时静态解决方案，您可以使用webpack require.context (docs)和yaml加载器来实现。
示例
假设您的yml文件位于yaml中，您可以使用以下代码通过一个名为countries的计算方法从src/constants/countries/*.yml文件中获取每个JS对象
<template>
<div id="app">
<div
v-for="country in countries"
:key="country.key"
class="country"
>
<h1>{{country.key}}</h1>
<hr />
<h2>{{country.sources.domestic[0]}}</h2>
</div>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default class App extends Vue {
get countries () {
const requireContext = require.context(
'./constants/countries',
true,
/(.*)\.yml/
)
return requireContext.keys().map((fileName) => {
const key: string = fileName.split('.')[1].replace('/', '')
return {
key: key,
...requireContext(fileName)[key]
}
})
}
}
</script>
<style>
#app {
text-align: center;
margin-top: 60px;
}
.country{
border:1px solid black;
margin:20px;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63462577
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号