node.js 的新手;需要帮助将 npm 模块导入我的前端 vanilla JS 项目

首先让我承认我对 node.js 和整个 Web 开发非常陌生。我一直在梳理 stackoverflow 和 google 搜索以寻找解决方案,但无济于事。主要是,我不确定我需要采取哪些步骤,因为这是我第一次涉足 npm 模块的使用。


基本上,我为我的朋友创建了一个静态网站,允许用户将他们自己的双关语添加到受她猫的名字启发的预先存在的双关语数组中。如果用户想一次查看一个双关语,该站点会随机化该数组。对于提交的内容,我已经设置了限制,即用户必须编写 0-50 个字符之间的内容,其中至少包含她的猫的名字之一。该网站的功能是用 vanilla JS 编码的。但是,该程序尚未考虑满足上述要求的乱码提交(例如,“alksdjjsd Cat name slkjsd”)。这是完成网站的最后一步。


为了解决这个问题,我想将此 npm 模块添加到我的项目中。我测试了该模块,它能够正确地将我的数组中的乱码提交与非乱码提交分开。唯一的问题是,我不知道如何继续。


自然地,我在 node 中安装了包,然后根据使用说明将导入语句复制/粘贴到我的 .js 文件中,但后来我发现该包不会在浏览器中运行。然后我安装了 node.js 并创建了一个具有以下依赖项的 package.json:


  "devDependencies": {

    "browserify": "^16.5.0",

    "watchify": "^3.11.1"

  },

  "dependencies": {

    "asdfjkl": "0.0.6"

  }

你可能已经猜到了,我还创建了一个 bundle.js 文件,我在我的 index.html 文件的脚本标签中创建了一个链接,<script src="bundle.js"></script> 在我的 package.json 文件中也有以下内容:


  "main": "index.js",

  "scripts": {

    "build": "browserify index.js -o bundle.js",

    "watch": "watchify index.js -o bundle.js"

  },

但是,我仍然不清楚我应该如何遵循 npm 模块中的使用说明。我无法使用建议的导入语句:


import asdfjkl from 'asdfjkl';

在我的代码(index.js/bundle.js 文件)中没有看到我的终端中的错误,例如“ ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' 中”或


import asdfjkl from 'asdfjkl';

       ^^^^^^^


SyntaxError: Unexpected identifier

我注意到很多有类似问题的人都在使用 Babel、Gulp 和其他软件包等工具,但我不知道我可能需要哪些工具,而且我绝对不明白如何使用它们。


非常感谢有关如何将此包包含到我的前端项目中的任何指导。非常感谢!


编辑:解决方案

为了使该功能asdfjkl()正常工作,我最终需要编写


var asdfjkl = require('asdfjkl').default;

对于需要澄清此问题的其他人,我发现此答案很有帮助。


慕村225694
浏览 186回答 2
2回答

倚天杖

您可以使用 npm install --save 安装 npm 包例如: npm install asdfjkl --save
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript