當我創建一個包含兩個檔案的獨立專案時，一切正常，一個名為 helperFuncs.js，另一個名為 index.js，其中 helperfuncs.js 有
function stringOfZeros(numZeros) {
//takes in a number and outputs a string with that many zeros;
...
}
module.exports = {
stringOfZeros: stringOfZeros,
}
和 index.js 有
const helperFuncs = require("./helperFuncs.js");
const stringOfZeros=helperFuncs.stringOfZeros;
let myZeroString = stringOfZeros(17);
console.log(myZeroString);
即使專案中沒有 package.json 檔案，這也能作業。
但是，如果我做同樣的事情，在一個小的 HTML 專案中創建一個相同的 helperFuncs.js 檔案，該專案在目錄中的同一級別有一個 index.html 頁面和一個 script.js 檔案，并且我設定了上面的行index.js 檔案中的代碼到 script.js 檔案中，其中這些行在視窗事件加載偵聽器內執行，否則會起作用，我收到此錯誤：
型別錯誤：stringOfZeros 不是函式
我究竟做錯了什么？它在腳本檔案中的事實是否需要我使用“匯入”而不是要求，或者強制創建 package.json 檔案，否則它是可選的？
uj5u.com熱心網友回復：
看起來您正在嘗試在瀏覽器中運行 Node JS 兼容代碼。
目前瀏覽器不支持這種匯入/匯出語法。要將上面的代碼用于 Web 應用程式，您需要額外的特殊工具，這些工具將以瀏覽器能夠理解的方式重新構建您的代碼。
我建議你試試這個工具：
- 網路包
- Babel（需要額外的插件配置）
- Vite.js（感謝Invizi的建議）
uj5u.com熱心網友回復：
Web 瀏覽器不支持CommonJS 模塊或 cjs。相反，您正在尋找的是ES 模塊或 esm。
生產網站上的模塊通常被捆綁到一個帶有打包器的 javascript 檔案中。這允許您使用您喜歡的任何模塊型別，并且您可以將轉換應用于您的代碼，例如縮小它或添加對舊瀏覽器的支持。
如果您喜歡撰寫代碼并在沒有打包程式的情況下直接運行它。您應該使用 ES 模塊。你可以在這個頁面上找到很多資訊。但在你的情況下，它看起來像這樣：
helperfuncs.js
export function stringOfZeros(numZeros) {
}
索引.js
import {stringOfZeros} from "./helperFuncs.js";
let myZeroString = stringOfZeros(17);
console.log(myZeroString);
然后你可以index.js在你的 html 中加載你的type標簽，module如下所示：
<script src="index.js" type="module"></script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353716.html
標籤：javascript 模块