Как импортировать JS библиотеку из node_modules

Question

Не могли бы вы объяснить идеологию использования библиотек import / require из папки node_modules.

Я просто хочу использовать konva.js в моем простом проекте, используя node.js в качестве бэкэнда с live-сервером расширение настроено.

Если я импортирую его прямо в файл HTML вот так

<script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
<script> /*using konva library here or *.js*/</script>

Все работает
Как я понял, этот URL импортирует весь konva.min.js прямо в мой HTML файл

Если я скопирую konva.js файл из /node_modules пакета в свою /src папку

и использую такой код в моем HTML

    <script src="konva.min.js"></script>
    <script src="script.js"></script>

I иметь доступ к библиотеке konva в скрипте. js

В серверных скриптах, вызванных node.js Я использовал подобный оператор для доступа к пакетам в node_modules

var liveserver = require("live-server");

PS Почему не не импортируете сюда работу? Node.js не имеет инструкций по импорту?

Но главный вопрос в том, как использовать тот же синтаксис require () / import в клиентских скриптах и ​​не использовать теги <script> для импорта библиотек?

 import konva from 'konva';
 /* js code next*/ 

ИЛИ

 var konva = require('konva');
 /* js code next*/

Мне нужно использовать диспетчеры задач? Что я должен делать? Искать зависимости в каждом файле .js и использовать задачи для импорта этих зависимостей прямо в папку проекта? Но, например, для gulp я нашел разные библиотеки для форматирования кода, но не могу найти нужную для импорта зависимостей

Answer 1

Node.js - это среда выполнения на стороне сервера, вам нужно использовать библиотеки node_modules на стороне клиента / браузера.

Использование browserify

browserify будет рекурсивно анализировать все вызовы require () в вашем приложении, чтобы создать пакет, который вы можете обслуживать до браузера в одном теге скрипта.

Он объединит ваши требования и импортирует в один файл js для использования в теге скрипта.

Использование импорта на стороне клиента

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

Все, что вам нужно это type = module в элементе скрипта, и браузер будет рассматривать встроенный или внешний скрипт как модуль ECMAScript

// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

Вот несколько отличных статей, чтобы лучше понять это:

• Модули ECMAScript в браузерах
• Подробно о модулях ES6