寻找有关如何在浏览器中读取 YAML 文件的连贯示例。位于 Web 服务器上的 YAML 文件
Looking for a coherent example on how to read a YAML file in a browser. YAML file located on the web server
我的设置:
VS代码+ WSL2。文件都在同一个文件夹中(js-ayml.js、YAML 文件和 index.html)。我通过刷新引用它的页面来 运行 javascript 代码。我使用 GoLive VS 代码扩展作为服务器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test js-yaml</title>
<script src="//code.jquery.com/jquery-2.1.0.js">
</script><script src='js-yaml.js'>
</script><script src='readYaml.js'>
</head>
<body>
<h1>Test js-yaml</h1>
<p><a href="https://github.com/nodeca/js-yaml">https://github.com/nodeca/js-yaml</a></p>
</body>
</html>
readYaml.js
(function () {
"use strict";
$(document).ready(function () {
$.get('/common/resources/LessonContentsLv01Ln01.yml')
.done(function (data) {
console.log('File load complete');
console.log(jsyaml.load(data));
var jsonString = JSON.stringify(data);
console.log(jsonString);
console.log($.parseJSON(jsonString));
});
});
}());
我已经发布了这个Reading YAML from JavaScript in a browser并且它被关闭了。
我试过这个:
https://stackify.dev/804643-reading-from-yaml-file-in-javascript(解决方案 2)
以及此处显示的示例
https://github.com/shockey/js-yaml-browser 这表示此分支针对浏览器进行了优化
它们都因相同的错误而失败
js-yaml.js:9 Uncaught ReferenceError: require is not defined
at js-yaml.js:9:16
那一行是var fs = require('fs');
据我了解 fs 是一个 node.js 模块,它在浏览器中不起作用
我的问题是是否有一个 JavaScript 模块可以从网络服务器打开和读取 YAML 文件,一个在没有任何后端的情况下在浏览器中运行的模块?
注意:我是初学者,我认为这将是一个基本示例,加载一个文件并解析它。
shockey/js-yaml-browser
坏了,好几年没更新了。 js-yaml
总的来说有很多分叉。 Manx7/js-yaml
有效并且是最新的。
.as-console-wrapper { top: 0; max-height: 100% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
<script>
// Normally we'd use fetch to get the file. However, Whosebug
// snippets don't have a way to add another file, so we'll use a
// string instead just to show how the library works.
/*
fetch("sample.yaml")
.then(response => response.text())
.then(text => {
// once the file has been loaded, we can parse it into an object.
const yaml = jsyaml.load(text);
console.log(yaml);
});
*/
const text = `
# Employee records
- martin:
name: Martin D'vloper
job: Developer
skills:
- python
- perl
- pascal
- tabitha:
name: Tabitha Bitumen
job: Developer
skills:
- lisp
- fortran
- erlang
`;
const yaml = jsyaml.load(text);
console.log(yaml);
</script>
我的设置: VS代码+ WSL2。文件都在同一个文件夹中(js-ayml.js、YAML 文件和 index.html)。我通过刷新引用它的页面来 运行 javascript 代码。我使用 GoLive VS 代码扩展作为服务器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test js-yaml</title>
<script src="//code.jquery.com/jquery-2.1.0.js">
</script><script src='js-yaml.js'>
</script><script src='readYaml.js'>
</head>
<body>
<h1>Test js-yaml</h1>
<p><a href="https://github.com/nodeca/js-yaml">https://github.com/nodeca/js-yaml</a></p>
</body>
</html>
readYaml.js
(function () {
"use strict";
$(document).ready(function () {
$.get('/common/resources/LessonContentsLv01Ln01.yml')
.done(function (data) {
console.log('File load complete');
console.log(jsyaml.load(data));
var jsonString = JSON.stringify(data);
console.log(jsonString);
console.log($.parseJSON(jsonString));
});
});
}());
我已经发布了这个Reading YAML from JavaScript in a browser并且它被关闭了。
我试过这个:
https://stackify.dev/804643-reading-from-yaml-file-in-javascript(解决方案 2)
以及此处显示的示例
https://github.com/shockey/js-yaml-browser 这表示此分支针对浏览器进行了优化
它们都因相同的错误而失败
js-yaml.js:9 Uncaught ReferenceError: require is not defined
at js-yaml.js:9:16
那一行是var fs = require('fs');
据我了解 fs 是一个 node.js 模块,它在浏览器中不起作用
我的问题是是否有一个 JavaScript 模块可以从网络服务器打开和读取 YAML 文件,一个在没有任何后端的情况下在浏览器中运行的模块?
注意:我是初学者,我认为这将是一个基本示例,加载一个文件并解析它。
shockey/js-yaml-browser
坏了,好几年没更新了。 js-yaml
总的来说有很多分叉。 Manx7/js-yaml
有效并且是最新的。
.as-console-wrapper { top: 0; max-height: 100% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
<script>
// Normally we'd use fetch to get the file. However, Whosebug
// snippets don't have a way to add another file, so we'll use a
// string instead just to show how the library works.
/*
fetch("sample.yaml")
.then(response => response.text())
.then(text => {
// once the file has been loaded, we can parse it into an object.
const yaml = jsyaml.load(text);
console.log(yaml);
});
*/
const text = `
# Employee records
- martin:
name: Martin D'vloper
job: Developer
skills:
- python
- perl
- pascal
- tabitha:
name: Tabitha Bitumen
job: Developer
skills:
- lisp
- fortran
- erlang
`;
const yaml = jsyaml.load(text);
console.log(yaml);
</script>