在React应用程序编译时运行一个脚本来解析YAML
提问于 2022-02-13 14:58:42
我的问题
我有一个ReactJS网站，它解析一个JSON文件(存储在src文件夹中)来呈现内容。我最近尝试使用YAML文件，因为YAML的功能更丰富(例如，支持Markdown )。
因为React必须异步加载和解析YAML，这个更改使我的代码库变得复杂，降低了我的应用程序的性能(例如，内容闪烁)。
我的计划
我没有重写组件和减慢应用程序，而是编写了一个脚本，将YAML文件转换为JSON文件。这样，我就可以拥有这两个世界中最好的: YAML更丰富的功能和JSON的简单实现。
我的问题
什么是最好的方式，使反应运行这个脚本时，应用程序是构建？我的网络主机每次推送更改时都会重新构建我的应用程序，所以希望这可以通过package.json或类似的方式激活。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-13 16:00:24
我的解决方案
我用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: (请注意dev命令中的-- watch参数和单个& )
...
"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"
}
...对整洁..。
.gitattributes:
/src/[PATH]/myData.json -diffStack Overflow用户
发布于 2022-02-13 15:08:59
尝试创建一个空对象来存储来自YAML的转换数据，并使用if语句检查前一个对象的长度是否大于0，然后呈现您想要的数据(如果不是，则呈现占位符)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71105597
复制
腾讯云开发者
