Как импортировать пакет npm в файл клиента

ProgramBox

Как импортировать пакет npm в файл клиента

Post author:admin
Запись опубликована:21 марта, 2023
Post category:Вопросы по программированию

#javascript #npm #npm-package

Вопрос:

Я пытаюсь импортировать пакет js-search npm в свой клиентский .js файл. Однако в их документах говорится, что нужно писать import * as JsSearch from 'js-search'; , это дает мне Uncaught TypeError: Failed to resolve module specifier "js-search". Relative references must start with either "/", "./", or "../". . Я долго пытался настроить относительный путь, однако в конце концов понял, что 'js-search' это относится к имени пакета, а не к каталогу. Итак, мне, должно быть, не хватает какой-то зависимости, которая позволяет мне использовать эту строку импорта? Спасибо.

Редактировать: структура каталогов:

 myproject
├── myproject
├── node_modulesjs-search
└── myapp
    ├── staticmyapp
    │            └── myapp.js
    └── templatessearch
                    └── index.html

Редактировать: может быть, это потому, что я работаю на localhost, а не на сервере?

1. Вы выполнили npm i js-search в каталоге клиента? Я имею в виду, что у вас, вероятно, есть backend frontend (or client) каталоги and, поэтому убедитесь, что вы устанавливаете пакеты npm в каталог клиента, если они импортированы в .js файлах из этого каталога

2. Установлен ли этот пакет в каталоге модулей вашего узла. Если вы не уверены, пожалуйста, запустите npm install --save js-search , а затем попробуйте, это должно сработать

3. @lbragile Это приложение Django, и оно установлено в каталоге node_modules, я попытался поместить этот каталог как в корень проекта, так и в static/ myapp.

4. @AayushMall Это приложение Django, и оно установлено в каталоге node_modules, я попытался поместить этот каталог как в корень проекта, так и в static/ myapp.

5. @RyanEom, я не знаком со структурой папок Django, поэтому, если вы хотите, чтобы я попытался помочь, вам нужно будет указать свою структуру папок.

Ответ №1:

Используемый вами пакет NPM, скорее всего, предназначен для node.js код. import * as JsSearch from 'js-search'; Строка предназначена для node.js , и не будет работать сам по себе в браузере.

Чтобы запускать такие пакеты в браузере, вам нужно будет в основном преобразовать его с помощью транспилятора. Наиболее распространенным, вероятно, является webpack.

Иногда пакеты также включают в себя предварительно созданную или уменьшенную версию в своем пакете специально для браузеров. Если это так, вы можете найти файл, подобный something.min.js в js-search каталоге.

js-search похоже, у него может быть это, поскольку я вижу файл конфигурации свертки в их репозитории. Накопительный пакет является альтернативой webpack.

Если это не так, вам, к сожалению, придется спуститься в довольно сумасшедшую кроличью нору, которая называется build tools.

1. Да! в js-search есть js-search.min.js файл под js-search/dist/umd . Так что, мне просто скопировать и вставить этот файл в мою статическую папку / myapp, а затем импортировать из нее?

2. Посмотрите, сможете ли вы заставить это работать. Я не знаю, совместимы ли umd модули с импортом ecmascript. Если нет, вам может потребоваться получить его с помощью обычного <script> тега.

3. Я думаю, что технически импорт сработал, но когда я пытаюсь использовать библиотеку, как указано в документах, я получаю Uncaught (in promise) TypeError: JsSearch.Search is not a constructor.

Ответ №2:

Вы должны связать свой myapp.js файл, используя type="module" , как показано ниже

 <script type="module" src="myapp.js"></script>

и затем myapp.js вам нужно импортировать js-search , используя относительный путь, node_modules поскольку вы не используете какой-либо пакет, такой как webpack. В вашем myapp.js файле вы можете использовать js-search , как показано ниже

 import * as JsSearch from './node_modules/js-search/dist/esm/js-search.js';

var theGreatGatsby = {
  isbn: '9781597226769',
  title: 'The Great Gatsby',
  author: {
    name: 'F. Scott Fitzgerald'
  },
  tags: ['book', 'inspirational']
};
var theDaVinciCode = {
  isbn: '0307474275',
  title: 'The DaVinci Code',
  author: {
    name: 'Dan Brown'
  },
  tags: ['book', 'mystery']
};
var angelsAndDemons = {
  isbn: '074349346X',
  title: 'Angels amp; Demons',
  author: {
    name: 'Dan Brown',
  },
  tags: ['book', 'mystery']
};

var search = new JsSearch.Search('isbn');
search.addIndex('title');
search.addIndex(['author', 'name']);
search.addIndex('tags')

search.addDocuments([theGreatGatsby, theDaVinciCode, angelsAndDemons]);

console.log(search.search('The'));    // [theGreatGatsby, theDaVinciCode]
console.log(search.search('scott'));  // [theGreatGatsby]
console.log(search.search('dan'));    // [angelsAndDemons, theDaVinciCode]
console.log(search.search('mystery')); // [angelsAndDemons, theDaVinciCode]