CODEWITHSUNDEEP
javascriptjquerynode.jsformsvalidation
Erland
Erland

Reputation: 123

How do you use an npm package with require & module export as a plain JS library

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

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!

Upvotes: 0

Views: 344

Answers (2)

ariel
ariel

Reputation: 16150

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>

Upvotes: 1

101arrowz
101arrowz

Reputation: 1905

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.

Upvotes: 0

Related Questions