Как использовать пакет npm с экспортом require & module в виде простой библиотеки JS - PullRequest
Новая
       10

Как использовать пакет npm с экспортом require & module в виде простой библиотеки JS

0 голосов
/ 09 апреля 2020

Я не уверен, что даже задаю правильный вопрос здесь, извините, но я думаю, что два общих вопроса:

  • Каким образом вам нужно изменить node.js пакет, использующий require et c для использования в качестве простого встроенного скрипта / библиотеки в HTML?
  • Как вы вызываете конструктор класса (?) в JS как функцию для проверки поле формы?

Я пытаюсь использовать эту маленькую JS библиотеку NoSwearingPlease (которая является npm пакетом) в среде без узла или системы сборки - поэтому я просто пытаюсь вызвать его так, как вы jQuery или что-то с помощью скрипта & sr c в HTML, а затем использовать его с помощью небольшого встроенного скрипта.

Я вижу Чтобы это работало, требуется несколько вещей:

  1. файл JSON необходимо вызывать по-другому (без использования require et c)
  2. checker переменная должна быть переписана, снова без необходимости

Я пытался использовать jQuery get JSON но я просто Я не понимаю биты класса и области видимости библиотеки, чтобы использовать ее, я думаю: 

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

Пожалуйста, остановитесь. Спасибо!

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Нет необходимости изменять, когда за пределами узла класс просто добавляется к 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>
0 голосов
/ 09 апреля 2020

В будущем вы можете самостоятельно ответить на этот вопрос, просматривая исходный код и просматривая вещи, которые вы не понимаете. Тем не менее, вот что я смог собрать, выполнив это сам.

Для вашего первого вопроса, если у вас нет инструментов для сборки, которые вы не можете использовать require, вы должны надеяться, что ваш пакет NPM поддерживает добавление класса в window или имеет экспорт UMD (что в этом случае и происходит). Если это так, вы можете скачать исходный код или использовать CDN, например JSDelivr, и добавить тег <script> для его привязки. 

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

Мне трудно расшифровать ваш скрипт (в нем есть несколько синтаксические ошибки, насколько я могу судить), так что вот что вы делаете, если у вас есть переменная ns, содержащая JSON и строку str, которую нужно проверить: 

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

Как Кроме того, вы должны действительно использовать инструменты сборки, чтобы оптимизировать размер вашего пакета и сделать использование пакетов намного проще. И рассмотрите возможность исключения jQuery для document.querySelector, fetch / XMLHttpRequest и других современных JavaScript API.

...