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

Question

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

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

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

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

1. 需要以不同的方式调用 JSON 文件（不使用 require 等）
2. 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);
});

请停下来。谢谢！

Answer 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>

Answer 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.querySelector、fetch/XMLHttpRequest 和其他现代 JavaScript API 放弃 jQuery。