HTML 不喜欢 require().... 当我在 index.js 文件中使用时答案

【问题标题】：HTML not liking require().... When I use in index.js fileHTML 不喜欢 require().... 当我在 index.js 文件中使用时
【发布时间】：2018-08-08 17:46:17
【问题描述】：

这个问题不一样：Load local JSON file into variable

我刚刚尝试实施该更改，但什么也没...

我发现当我通过网络浏览器运行我的 json 字符串结果时，我得到了

Uncaught ReferenceError: require is not defined

我使用 Node.js 作为运行它的平台。

在调查了这个之后，我仍然没有进一步前进。我不想使用 Browserfy 或 webpack。而且我没有使用 Jquery。

当我将我的两个 json 字符串硬编码到 index.js 中时，这很有效。但是我需要它是可变的。

我需要一种纯 JavaScript 方式来读取 .json 文件，而无需使用 require。如我所见

let fs = require('fs');

这将使我能够读取文件，但这是必需的......

如果您可以提出任何建议，我在下面有我的 HTML 和 Index.js 文件。

网页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Out Put to HTML Page</title>
    </style>
</head>
<body>
<div id ='TestResults'>
    <div id = 'TestOutput'>Nothing Yet</div>
</div>
<div id ='ErrorResults'>
    <div id = 'ErrorOutPut'>Nothing Yet</div>
</div>
<script type = 'text/javascript' src = 'index.js'></script>
</body>
</html>

Index.js

let myJsonString = require('../../ResultsArray/ResultsArray');
let myJsonStringError = require('../../ResultsArray/ErrorArray');

function result(results){
    if(results === 'YesNo')
    {
        return 'Passed'
    }
    if(results === 'NoYes')
    {
        return 'Failed'
    }
    else
    {
        return 'Unknown'
    }
}

function time (value){
    // 1- Convert to seconds:
    let seconds = (value / 1000).toFixed(2);
    // 2- Extract hours:
    let hours = parseInt( seconds / 3600 ); // 3,600 seconds in 1 hour
    seconds = seconds % 3600; // seconds remaining after extracting hours
    // 3- Extract minutes:
    let minutes = parseInt( seconds / 60 ); // 60 seconds in 1 minute
    // 4- Keep only seconds not extracted to minutes:
    seconds = (seconds % 60).toFixed(2);
    return ([hours+":"+minutes+":"+seconds]);
}

function testTemplateErrors (test){
    return `
    <tr>
    <td class='TestGroup'>${test.Folder}</td>
    <td class='TestName'>${test.Test_Name}</td>
    <td class='TestsStatus'>${test.Running}</td>
    <td class='TestRunTime'>${time(test.Run_Time)}</td>
    <td class= 'TestResult'>${result(test.Passed + test.Failed)}</td>
    </tr>
    `
}

function testTemplateResults (test){
    return `
    <tr>
    <td class='TestGroup'>${test.Folder}</td>
    <td class='TestName'>${test.Test_Name}</td>
    <td class='TestsStatus'>${test.Running}</td>
    <td class='TestRunTime'>${time(test.Run_Time)}</td>
    <td class= 'TestResult'>${result(test.Passed + test.Failed)}</td>
    </tr>
    `
}

if(myJsonString && myJsonString.length)
{
    document.getElementById('TestResults').innerHTML = `
    <h1 class='ContentTitle'> Regression Tests (${myJsonString.length} Tests Ran)</h1>
    <table><tr>
    <th>Result Folder Name</th>
    <th>Result Test Name</th>
    <th>Result Running</th>
    <th>Result Run Time</th>
    <th>Result Result</th>
    </tr><tr>
    ${myJsonString.map(testTemplateResults).join('')}
    </tr></table>
    <p class='footer'> These ${myJsonString.length} Results were added recently. </p>
    `
}

if(myJsonStringError && myJsonStringError.length)
{
    document.getElementById('ErrorResults').innerHTML = `
    <h1 class='ContentTitle'> Error Results (${myJsonStringError.length} Errors Occurred)</h1>
    <table><tr>
    <th>Error Folder Name</th>
    <th>Error Test Name</th>
    <th>Error Running</th>
    <th>Error Run Time</th>
    <th>Error Result</th>
    </tr><tr>
    ${myJsonStringError.map(testTemplateErrors).join('')}
    </tr></table>
    <p class='footer'> These ${myJsonStringError.length} Results were added recently. </p>
    `
}

【问题讨论】：

Load local JSON file into variable的可能重复

标签： javascript html node.js

【解决方案1】：

require 由 Node.js 提供，而不是由浏览器提供，也由 Webpack 或 Browserify 等捆绑程序提供。如果您正在运行基于浏览器的代码而不使用这些工具或 RequireJS 之一，则它不会存在于浏览器环境中。

要从基于浏览器的代码中读取资源，您需要使用 ajax。现代的方法是使用fetch（以前，你会使用XMLHttpRequest）。这是返回 JSON 的简单 fetch 示例：

fetch("/url/to/the/resource")
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error: " + response.status);
    }
    return response.json();
})
.then(data => {
    // ...use the data here, it's been parsed...
})
.catch(error => {
    // Something went wrong, handle/report it
});

正如我note on my anemic blog 一样，很容易忘记.ok 的检查和繁琐的重新编码，所以我使用了一个助手：

const myFetch = (...args) => fetch(...args).then(response => {
    if (!response.ok) {
        throw new Error("HTTP error: " + response.status);
    }
});

...您可以像这样使用它来获取 JSON：

myFetch("/url/to/the/resource")
.then(response => response.json())
.then(data => {
    // ...use the data here, it's been parsed...
})
.catch(error => {
    // Something went wrong, handle/report it
});

如果您想获取多个资源并等待它们全部到达，请使用Promise.all：

Promise.all([
    myFetch("../../ResultsArray/ResultsArray.json").then(response => response.json()),
    myFetch("../../ResultsArray/ErrorArray.json").then(response => response.json())
])
.then(([resultsArray, errorArray]) => {
    // ...use `resultsArray` and `errorArray` here...
})
.catch(error => {
    // Handle/report error
});

所有这些示例都假定 ES2015-ES2017。如果您可以使用 ES2018 功能，则使用async function 可以使代码看起来更同步。

注意fetch（如XMLHttpRequest）是异步的；这些问题可能有助于解决您可能因此而遇到的问题：

【讨论】：

当我更改我的 index.js 文件以显示您的更改时，我返回“加载资源失败：服务器响应状态为 404（未找到）”。即使他们在指定的位置。
@Daniel - 如果您收到 404，则 URL 错误。我的猜测是你错过了一个文件扩展名（.json 或.js），因为它们不在你的require 调用中（如果你不使用它，Node.js 会推断出.js；浏览器不会)。
好的，我试过这个：fetch("../../ResultsArray/ErrorArray.json") .then(response => { if (!response.ok) { throw new Error("HTTP error: " + response.status); } return response.json(); }) .then(data => { myJsonString = data; }) .catch(error => { console.log('Error.json could not be found'); }); 当我检查 html 页面时，我在 Network 选项卡中得到了 .jsons，但是它没有链接到 index.js 文件中的我的 json 字符串。
@Daniel - 我不知道您所说的 是什么意思...它没有链接到 index.js 文件中的我的 json 字符串..." 数据我在上面展示的地方（而不是全局）可以从 JSON 文件中访问。如所示，请参阅答案末尾的链接问题以获取更多详细信息。
我在另一个解释中添加了我的意思。

【解决方案2】：

我试图将 fetch 的响应设置为一个变量：

let myJsonString;
let myJsonStringError;

fetch("../../ResultsArray/ResultsArray.json")
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP error: " + response.status);
        }
        return response.json();
    })
    .then(data => {
        myJsonString = data;
        console.log(myJsonString);
    })
    .catch(error => {
        console.log('Results.json could not be found');
    });

fetch("../../ResultsArray/ErrorArray.json")
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP error: " + response.status);
        }
        return response.json();
    })
    .then(data => {
        myJsonStringError = data;
        console.log(myJsonStringError);
    })
    .catch(error => {
        console.log('Error.json could not be found');
    });

我可以在我的网络选项卡中看到 .Json 文件。 Network Tab results

【讨论】：