运行用于在 React 应用程序编译时解析 YAML 的脚本

Question

我的问题

我有一个 ReactJS 网站，它解析 JSON 文件（存储在 src 文件夹中）以呈现内容。我最近尝试使用 YAML 文件来代替，因为 YAML 的功能更丰富（例如支持 Markdown）。

由于 React 必须异步加载和解析 YAML，此更改使我的代码库复杂化并降低了我的应用程序的性能（例如，内容闪烁）。

我的计划

我没有重写我的组件并减慢我的应用程序，而是编写了一个脚本来将我的 YAML 文件转换为 JSON 文件。这样，我可以两全其美：YAML 更丰富的功能和 JSON.

的简单实现

我的问题

构建应用程序时制作 React 运行这个脚本的最佳方法是什么？每次我推送更改时，我的虚拟主机都会重建我的应用程序，所以希望这可以通过 package.json 或类似的方式激活。

Answer 1

尝试创建一个空对象来存储从 YAML 转换后的数据，并使用 if 语句检查前一个对象的长度是否 >0，然后从数据中呈现您想要的内容（如果不是，则呈现一个占位符）

Answer 2

我的解决方案

我使用 js-yaml 解决了这个问题。我什至找到了一种使其与快速刷新一起使用的方法。

./src/[PATH]/yaml-convert.js:

const yaml = require('js-yaml');
const fs = require('fs');

const args = process.argv.slice(2);

switch (args[0]) {
  case 'watch':
    watch();
    break;
  default:
    convert();
}

function watch() {
  fs.watch('./src/[PATH]/myData.yaml', function (event, filename) {
    require('child_process').fork('./src/[PATH]/yaml-convert.js');
  });
}

function convert() {
  try {
    const json = yaml.load(fs.readFileSync('./src/[PATH]/myData.yaml', 'utf8'));
    fs.writeFileSync('./src/[PATH]/myData.json', JSON.stringify(json));
  } catch (e) {
    console.log(e);
  }
}

package.json: （注意 -- watch 参数和 dev 命令中的单个 &）

...
"scripts": {
  "start": "serve -s build",
  "dev": "npm run yaml-convert -- watch & react-scripts start",
  "build": "npm run yaml-convert && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "yaml-convert": "node ./src/[PATH]/yaml-convert.js"
}
...

然后 keep git diff tidy...

.git 属性：

/src/[PATH]/myData.json -diff

运行用于在 React 应用程序编译时解析 YAML 的脚本

Run a script to parse YAML when React app compiles

reactjs

json

build

yaml

build-script

我的问题

我的计划

我的问题

我的解决方案

运行 用于在 React 应用程序编译时解析 YAML 的脚本

Run a script to parse YAML when React app compiles

reactjs

json

build

yaml

build-script

我的问题

我的计划

我的问题

我的解决方案

运行用于在 React 应用程序编译时解析 YAML 的脚本