在JS中什么意思是“未定义需求”，以及库如何可用于浏览器？

Question

我通过nStor在WebStorm中安装了此library

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