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

水晶

首先,让我承认我对node.js和整个Web开发还很陌生。我一直在梳理stackoverflow和谷歌搜索的解决方案,但无济于事。主要是,我不确定应该采取哪些步骤,因为这是我第一次尝试使用npm模块。

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

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

自然,我将软件包安装在节点中,然后按照使用说明将导入语句复制/粘贴到我的.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;

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

里卡多·盖

导入和导出是ECMAScript 6(http://es6-features.org/#ValueExportImport)的功能,因此我想您没有使用任何Javascript编译器(例如Babel,例如https://babeljs.io/docs/zh/)。 。但是,如果您不想使用任何编译器,则可以像下面这样简单地更改代码以导入库:

var asdfjkl = require('asdfjkl');

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章