導入或不導入時的 VS Code 不同錯誤

Question

我不明白也不知道如何解決下面的錯誤。

當我不使用時（從“fs”導入 fs；）
我收到此錯誤（Uncaught ReferenceError ReferenceError: require is not defined）
當我使用時（從“fs”導入 fs；）
我得到（未捕獲的 SyntaxError SyntaxError：標識符 'fs' 已經被聲明）

我正在嘗試將 fail_drive.log 讀取到包含以下內容的數組中：

1個
3個
4個
7
8個

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

.main {
  text-align: center;
}

.div1 {
  width: 20%;
  height: auto;

}

.row {
  display: flex;
  align-items: center;
  column-gap: 2px;
}

.slot {
  display: flex;
  flex-basis: 20%;
  height: 70px;
  align-items: center;
  justify-content: center;
}
.failed::after {
  content: '';
  position: absolute;
  background-color: red;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: 1s blink ease infinite;
}
@keyframes blink {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>
</head>

<body>
  <h1 class="main">Phy Link Test</h2>


<div class="div1" >
  <h2>Front Chassis</h2>
    <div class="row">
      <div class="slot" id='slot-17'><img src="Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/23.png" alt="17"></div>
      <div class="slot" id='slot-14'><img src="\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/20.png" alt="14"></div>
      <div class="slot" id='slot-5'><img src="\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/5.png" alt="5"></div>
      <div class="slot" id='slot-2'><img src="\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/2.png" alt="2"></div>
      <div>top slot</div>
    </div>
    
</div>
<script type="module">

import fs from "fs";

  
const fs = require('fs');
const fileContent = fs.readFileSync('C:\Users\john_ma\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya\fail_drive.log', 'utf8');
const lines = fileContent.split('\n');
console.log(lines);
  
  
  function toggleFailed(slotId) {
    const slot = document.getElementById('slot-' + slotId);
    slot.classList.toggle('failed');
  }
  
  for (const slotId of slotIds) {
    const slot = document.getElementById('slot-' + slotId);
    slot.addEventListener('click', () => toggleFailed(slotId));
  }
  </script>
  </body>
</html>

Answer 1

您不能從普通瀏覽器導入/要求node:fs

為了能夠在瀏覽器中使用fs ，您需要一個支持節點的瀏覽器，例如 Electron 或 NWJS

因為你是新手，我推薦nwjs ，因為你可以用nw.exe打開一個帶有index.html的文件夾，它會工作

從https://nwjs.io/獲取最新的 SDK（它有 devtools），解壓並將你的文件夾拖到 nw.exe

導入或不導入時的 VS Code 不同錯誤

問題描述

1 個解決方案

解決方案1
1 2022-12-12 22:57:30

導入或不導入時的 VS Code 不同錯誤

問題描述

1 個解決方案

解決方案1 1 2022-12-12 22:57:30

解決方案1
1 2022-12-12 22:57:30