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

Question

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

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

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

自然地，我在节点中安装了 package，然后将导入语句（按照使用说明）复制/粘贴到 my.js 文件中，但后来我发现 package 无法在浏览器中运行。 然后我安装了 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 和其他软件包这样的工具，但我不知道我可能需要哪些工具，而且我绝对不明白如何使用它们。

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

---

编辑：解决方案

---

为了让 function asdfjkl()工作，我最终需要写

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

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

Answer 1

您可以使用 npm install --save 安装 npm package

例如：npm 安装 asdfjkl --save

Answer 2

Import and Export are features from ECMAScript 6 ( http://es6-features.org/#ValueExportImport ), so i guess you are not using any Javascript compiler ( Babel for example https://babeljs.io/docs/en/ ) . 但是，如果您不想使用任何编译器，您可以简单地更改代码以导入库，如下所示：

var asdfjkl = require('asdfjkl');