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

Posted 2023-03-07

【中文标题】node.js 的新手；需要帮助将 npm 模块导入我的前端 vanilla JS 项目

【英文标题】：New to node.js; need help importing an npm module into my front-end vanilla JS project

【发布时间】：2020-01-26 09:52:19

【问题描述】：

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

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

为了解决这个问题，我想将this npm module 添加到我的项目中。我测试了该模块，它能够正确地将乱码提交与我数组中的非乱码提交区分开来。 唯一的问题是，我不知道该怎么做。

当然，我在 node 中安装了包，然后将导入语句（根据 usage instructions）复制/粘贴到我的 .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' and 'export' 可能只出现在 'sourceType : 模块'" 或

import asdfjkl from 'asdfjkl';
       ^^^^^^^

SyntaxError: Unexpected identifier

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

任何关于如何将此包包含到我的前端项目中的指导将不胜感激。提前非常感谢！

---

编辑：解决方案

---

为了使函数asdfjkl() 工作，我最终需要编写

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

对于有此问题需要澄清的其他人，我发现 this answer 很有帮助。

【参考方案1】：

导入和导出是 ECMAScript 6 (http://es6-features.org/#ValueExportImport) 的功能，所以我猜你没有使用任何 javascript 编译器（例如 Babel https://babeljs.io/docs/en/）。 但是，如果您不想使用任何编译器，您可以简单地更改代码以导入库，如下所示：

var asdfjkl = require('asdfjkl');

【讨论】：

感谢您为我指明正确的方向！我刚刚按照您的建议尝试了var asdfjkl = require('asdfjkl'); 代码，并在终端中收到此错误：console.log(asdfjkl('hello')); TypeError: asdfjkl is not a function 以及浏览器中的Uncaught ReferenceError: asdfjkl is not defined。我不确定为什么。如果事实证明 Babel 是要走的路，您是否会为这个特定项目推荐任何特定的包？我意识到有很多不同的包与 Babel 相关，这有点吓人

对我来说看起来很奇怪不起作用，我看到你使用 browserify 并查看第一个示例 (browserify.org/#install)，让我们尝试再次构建它。无论如何，在这里你可以找到一个很好的例子，如何用香草应用程序medium.com/backticks-tildes/…

玩一下 babel

感谢您的链接！我会继续给他们通读一遍，睡一觉，明天再玩一下代码。如果有任何变化，我会通知您

我通过修改包的 runkit.js 和 test.js 文件中的不同导入语句来解决这个问题。出于某种原因，这行代码成功了：var asdfjkl = require('asdfjkl').default;

【参考方案2】：

您可以使用以下方法安装 npm 包， npm install --save

例如：npm install asdfjkl --save

【讨论】：

感谢您的回复！我应该写下这是我迈出的第一步。首先我像这样安装包：“npm install asdfjkl --save”，然后我尝试使用链接中建议的导入语句，但它对我不起作用。

你能在你的 node_modules 文件夹中找到安装的包吗？

是的。我也尝试从路径文件中导入 asdfjkl（'node_modules/asdfjkl/lib/asdfjkl.js' ...或类似的东西）但没有运气