您如何将 npm package 与 require 和模块导出一起用作普通 JS 库

Question

I'm not sure I'm even asking the right question here, sorry, but I think the two general ones are:

• In what way do you need to modify a node.js package using require etc to be used as a plain embedded script/library in HTML?
• How do you call a class constructor (?) in JS as a function to validate a form field?

I'm trying to use this small JS library NoSwearingPlease (which is an npm package) in an environment with no node or build system – so I'm just trying to call it like you would jQuery or something with a script & src in the HTML, and then utilise it with a small inline script.

I can see a couple of things are required to get this working:

1. the JSON file needs to be called in a different way (not using require etc)
2. the checker variable needs to be rewritten, again without require

I attempted using jQuery getJSON but I just don't understand the class & scope bits of the library enough to use it I think:

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);
});

Please halp. Thanks!

Answer 1

No need to modify, when outside of node the class is just appended to window (global):

 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

In the future, you can answer this type of question on your own by looking through the source code and looking up things you don't understand. That being said, here's what I was able to gather doing that myself.

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). If so, you can download the source code or use a CDN like JSDelivr and add a <script> tag to link it.

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

I'm having a hard time deciphering your script (it has a few syntax errors as far as I can tell), so here's what you do if you have a variable ns containing the JSON and the string str that you need to check:

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

As an aside, you should really use build tools to optimize your bundle size and make using packages a lot easier. And consider dropping jQuery for document.querySelector , fetch / XMLHttpRequest , and other modern JavaScript APIs.