首先,让我承认我对node.js和整个Web开发还很陌生。我一直在梳理stackoverflow和谷歌搜索的解决方案,但无济于事。主要是,我不确定应该采取哪些步骤,因为这是我第一次尝试使用npm模块。
基本上,我为我的朋友创建了一个静态网站,允许用户将自己的双关语添加到受其猫名启发的双关语中。然后,如果用户想一次查看双关语,则站点将对数组进行随机化。对于提交内容,我已经设定了限制,即用户必须写0到50个字符之间的字符,且其中至少包含她的猫的名字之一。该网站的功能是使用Vanilla JS编码的。但是,该程序尚未解决否则满足上述要求的乱码提交(例如,“ alksdjjsd猫名slkjsd”)。这是完成网站的最后一步。
要解决此问题,我想在项目中添加this npm module。我测试了该模块,它能够正确区分阵列中的乱码和非乱码。唯一的问题是,我不知道如何进行。
自然地,我将包安装在节点中,然后按照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'和'export'可能仅与'sourceType:module'一起出现”或
import asdfjkl from 'asdfjkl';
^^^^^^^
SyntaxError: Unexpected identifier
我注意到很多有类似问题的人正在使用Babel,Gulp和其他软件包之类的工具,但是我无法确定我可能需要哪些工具,而且我绝对不知道如何使用它们。
非常感谢您提供有关如何将此软件包包含到我的前端项目中的任何指导。在此先多谢!
编辑:解决方案
为了使功能
asdfjkl()
工作,我最终需要编写var asdfjkl = require('asdfjkl').default;
对于需要澄清此问题的其他人,我发现this answer会有所帮助。
最佳答案
导入和导出是ECMAScript 6(http://es6-features.org/#ValueExportImport)的功能,因此我想您没有使用任何Javascript编译器(例如Babel例如https://babeljs.io/docs/en/)。
但是,如果您不想使用任何编译器,则可以像下面这样简单地更改代码以导入库:
var asdfjkl = require('asdfjkl');
关于javascript - node.js的新功能;需要帮助将npm模块导入我的前端Vanilla JS项目,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58111359/