I'm not sure I'm even asking the right question here, sorry, but I think the two general ones are:
require
etc to be used as a plain embedded script/library in HTML?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:
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!
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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.