javascript - 如何将我的项目中的函数导入 script.JS

Question

当我创建一个包含两个文件的独立项目时，一切正常，一个名为 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 文件中，其中行在窗口事件加载侦听器中执行，否则该侦听器可以正常工作，我收到此错误：

TypeError：stringOfZeros 不是函数

我究竟做错了什么？它在脚本文件中的事实是否要求我使用“import”而不是 require，或者强制创建 package.json 文件，否则它是可选的？

标签： javascriptmodule

Answer 1

看起来您正试图在浏览器中运行与 Node JS 兼容的代码。

目前浏览器不支持这种导入/导出语法。要将上面的代码用于 Web 应用程序，您需要额外的特殊工具，这些工具将以浏览器能够理解的方式重新构建您的代码。

我建议你试试这个工具：

• 网页包
• Babel（需要额外的插件配置）
• Vite.js（感谢Invizi的建议）