Question

我通过library在WebStorm中通过npm安装了

npm install basicscroll

IDE突出显示了程序包中的单词，在我尝试在浏览器中查看项目之前，一切似乎都很好：

控制台给我这个问题：

applicative.js:15 Uncaught ReferenceError: basicScroll is not defined
    at applicative.js:15
    at NodeList.forEach (<anonymous>)
    at applicative.js:6

因此，我在JS文件的开头添加了以下语句：

const basicScroll = require('basicscroll')

这次的结果是该库保持突出显示，但是调用它的方法没有。在浏览器中，这是控制台的错误提示：

Uncaught ReferenceError: require is not defined

我检查了node_modules目录，可以看到该子目录，因此我认为安装过程正确。我还检查了package.json文件：

"dependencies": {
    "basicscroll": "^3.0.2",
    [...]

老实说，我不知道问题出在哪里。我是Web开发和在线上的新手，我发现webpack模块绑定程序可以为我提供帮助，但我什至不知道从哪里开始。怎么了？谢谢你！

Answer 1

似乎您正在尝试在客户端环境中使用服务器端代码。据我所知require是NodeJS，在浏览器中不存在。

您最简单的解决方案是在HTML中使用<script>标签来导入所需的文件。像<script src="dist/basicScroll.min.js"></script>

此答案提到了您可以用来管理此类事情的其他一些工具：https://stackoverflow.com/a/19059825/1801137

Answer 2

我很确定您正在尝试在没有捆绑管理器的情况下测试代码。您不能直接在浏览器中使用库或模块，只能使用webpack创建本地服务器，然后在浏览器中打开webpack为您本地创建的链接。

JS中的“未定义需求”是什么意思，浏览器如何使用这些库？

2 个答案: