您如何使用带有 require 和模块导出的 npm 包作为纯 JS 库

Posted

技术标签:

【中文标题】您如何使用带有 require 和模块导出的 npm 包作为纯 JS 库【英文标题】:How do you use an npm package with require & module export as a plain JS library 【发布时间】:2020-07-21 10:42:21 【问题描述】:

我不确定我在这里问的问题是否正确,抱歉,但我认为两个一般问题是:

您需要以何种方式修改使用require 等的node.js 包以用作html 中的纯嵌入式脚本/库? 如何在 JS 中调用类构造函数 (?) 作为函数来验证表单字段?

我正在尝试在没有节点或构建系统的环境中使用这个小型 JS 库 NoSwearingPlease(这是一个 npm 包)——所以我只是想像 jQuery 或其他带有HTML 中的 script & src,然后与一个小的内联脚本一起使用。

我可以看到要让它工作需要做一些事情:

    需要以不同的方式调用 JSON 文件(不使用 require 等) checker 变量需要重写,同样不需要

我尝试使用 jQuery getJSON,但我只是不了解库的类和范围位,我认为无法使用它:

var noswearlist = $.getJSON( "./noswearing-swears.json" );
function() 
    console.log( "got swear list from inline script" );
  )
    .fail(function() 
      console.log( "failed to get swear list" );
    )
  noswearlist.done(function() 
    console.log( "done callback as child of noswearlist variable" );
    var checker = new NoSwearing(noswearlist);
    console.log(checker);
);

请停下来。谢谢!

【问题讨论】:

【参考方案1】:

无需修改,在节点外时,该类只是附加到window(全局):

fetch("https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease@master/swears.json").then(response => 
    return response.json();
  ).then(data => 
    var noSwearing = new NoSwearing(data);
    console.log(noSwearing.check("squarehead"));
);
<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease@master/index.js"></script>

【讨论】:

由于使用了jQuery,我对fetch API 是否合适有些疑问。但如果他对 ES6 没问题,这是一个很好的解决方案。 他不需要使用 jQuery,而 fetch 从 2015 年开始在浏览器上可用,所以这不是问题。 是的,但这并不能改变一些人希望支持 IE 11 和其他旧浏览器的事实。恶心,我知道,但它是 jQuery 的一个有效用例,并且可能是不再使用它的唯一理由。我认为他是出于这个原因使用它,但也许他只是在学习 2012 年的教程。¯\_(ツ)_/¯ 谢谢!这很棒,我觉得有点愚蠢。我在尝试中已经接近这一点,但我认为我的一些 JSON 语法有误。非常感谢您的帮助! 谢谢@101arrowz - 我想为这个项目支持 IE11 ?,但在这种情况下很高兴,不是必需的。【参考方案2】:

以后,您可以通过查看源代码并查找您不理解的内容来自行回答此类问题。话虽如此,这就是我自己收集到的东西。

对于你的第一个问题,如果你没有构建工具你不能使用require,你必须希望你的 NPM 包支持将类添加到window 或者有一个 UMD 导出(在这种情况下,它确实)。如果是这样,你可以下载源代码或使用类似 JSDelivr 的 CDN 并添加 <script> 标签来链接它。

<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease@master/index.js"></script>

我很难破译你的脚本(据我所知,它有一些语法错误),所以如果你有一个包含 JSON 和字符串 str 的变量 ns,你可以这样做您需要检查:

var checker = new NoSwearing(ns);
checker.check(str);

顺便说一句,您应该真正使用构建工具来优化您的包大小并使使用包变得更容易。并考虑为 document.querySelectorfetch/XMLHttpRequest 和其他现代 javascript API 放弃 jQuery。

【讨论】:

感谢您的帮助。我检查了代码并进行了大量查找,但也许我知道的不够多,无法找到正确的答案。不幸的是,我管理的网站是在 NationBuilder 中构建的,据我所知,绝对没有办法集成构建工具。

以上是关于您如何使用带有 require 和模块导出的 npm 包作为纯 JS 库的主要内容,如果未能解决你的问题,请参考以下文章

需要一个带有 webpack 的模块

require和import的使用

Node中导入模块require和import??

NodeJS中的require和import

NodeJS中的require和import

js中import和require的区别