页面如何从使用 Require() 的 javascript 文件中调用函数？

Posted 2023-02-24

【中文标题】页面如何从使用 Require() 的 javascript 文件中调用函数？

【英文标题】：How can a page call a function from a javascript file that uses Require()?

【发布时间】：2021-01-09 04:30:53

【问题描述】：

这里是新手编码器。通过拼凑教程，我创建了一个 .js 模块，它使用 Google 的 API 返回我的 Google 表格中单元格的值。

模块，sheetsReader.js 在顶部包含这两条 require 行：

const google = require('googleapis');
let privatekey = require('../../config/privatekey.json');

它定义了一个函数getCell()，它返回作为参数传递给它的任何单元格的值——例如getCell('A6')

当我在节点终端中运行它时，它可以完美运行。但是我想在我的index.html 中访问这个函数，这样我就可以在页面上显示一个单元格值。 （我知道可能有更好的方法来实现这一点，但我正在尝试将此电子表格数据插入现有页面。）

要导出函数，在sheetsReader.js，我有：

module.exports.getCell = getCell;

并在index.html 中导入我在标题中输入：

<script> 
import * as getCell from './js/sheetsReader.js' 
</script>

但是，当我打开页面时，它无法正确加载，因为：

未捕获的引用错误：未定义要求 在 sheetReader.js:1

我现在知道 require() 在浏览器端不起作用。我尝试通过使用 browserify、requirejs 和各种其他修复来解决，但似乎没有一个适用于 html 页面。

我觉得我可能在这里遗漏了一些非常基本的东西——所以我很抱歉！我学会了设置服务器，这样我就可以使用 Google API 来读取电子表格......但无论我如何尝试，我似乎都无法找到调用我构建的函数的方法！

【问题讨论】：

作为更新：我通过让server.js 要求sheetsReader.js，然后让我的index.html 向服务器发出一系列GET 请求来实现此功能。浏览器中不需要require()。这似乎是完成一项简单任务的一种非常低效的方法——浏览器一次向服务器发出一个请求，服务器将请求传递给模块，然后将每个单元格的内容返回到本地数组——但它是我能想出的唯一解决方案！ @jfriend00您对要解决的问题是正确的。好奇会有什么更好的方法！

【参考方案1】：

您导入的 google api 值不正确，您需要将其格式化为

       const google = require('googleapis.js');

【讨论】：

浏览器中没有require()，所以这是这里要解决的更根本的问题。

谢谢@swift-gaming，但实际上似乎并非如此。我最初使用了您建议的格式，但在我添加 之前它不起作用 - 请参阅以下说明：(***.com/questions/49424721/…)。添加括号后，js文件在节点中运行时运行良好。正如 jfriend00 所说，根本问题在于将依赖于 require() 的函数导入浏览器。