如何在JavaScript中一次加载多个YAML文件

如何解决如何在JavaScript中一次加载多个YAML文件

我写了一个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中完成。

解决方法

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。

,

如果您不介意编译时静态解决方案， 您可以使用 webpack require.context (docs) 和 yaml 加载器来实现。

示例

使用 vue-cli-plugin-yaml。

假设您的 yml 文件位于 src/constants/countries/*.yml 您可以使用以下代码使用名为 countries 的计算方法从 yaml 文件中获取每个 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>

example with some dummy files