您如何將 npm package 與 require 和模塊導出一起用作普通 JS 庫

Question

我不確定我什至在這里問了正確的問題，抱歉，但我認為兩個一般問題是：

• 您需要以什么方式使用require等修改 node.js package 以用作 HTML 中的普通嵌入式腳本/庫？
• 如何在 JS 中調用 class 構造函數（？）作為 function 來驗證表單字段？

我正在嘗試在沒有節點或構建系統的環境中使用這個小型 JS 庫NoSwearingPlease （這是一個 npm 包）——所以我只是想像 jQuery 或在HTML，然后用一個小的內聯腳本來使用它。

我可以看到要使其正常工作需要做幾件事：

1. JSON 文件需要以不同的方式調用（不使用 require 等）
2. 檢查器變量需要重寫，再次不需要

我嘗試使用 jQuery getJSON 但我只是不明白 class 和 scope 位足以使用它我認為：

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

無需修改，當在節點之外 class 只是附加到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

以后，您可以通過查看源代碼並查找您不理解的內容來自行回答此類問題。 話雖這么說，這就是我自己收集到的東西。

For your first question, if you have no build tools you can't use require , you have to hope your NPM package supports adding the class to the window or has a UMD export (which in this case, it does). 如果是這樣，您可以下載源代碼或使用 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。