Как правильно использовать в браузере исходные коды модулей npm для javascript?

Question

После установки npm и nodejs можно легко использовать модуль, запустив

npm install module

, а затем используя функцию js require ().Я предполагаю, что исходный код, хранящийся где-то на моем компьютере, будет загружен.Но что если я захочу использовать функции javascript этого модуля в браузере клиента?Немного поработав, я, возможно, в конечном итоге найду какой-нибудь файл на своем диске или, возможно, в Интернете с исходным кодом, который мне нужен.Мой вопрос: существует ли стандартный процесс, который собирает все зависимости данного модуля, чтобы я мог обслуживать их на клиентском веб-сайте?Или я что-то полностью пропускаю, и все должно быть совершенно иначе?

Answer 1

Если библиотека опубликована в виде стандартных модулей JavaScript, вы можете загрузить ее прямо в браузер, как в этом примере:

<script type="module">
  import { html, render } from '/node_modules/lit-html/lit-html.js';
  render(html`<span>Hello, world</span>, document.body)
</script>

Служба unpkg предоставляет полезный инструмент дляавтоматически преобразовывать спецификаторы модуля в абсолютные URL-адреса, вам просто нужно добавить строку запроса ?module:

import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module';

Если, однако, как это (к сожалению, обычно) имеет место, библиотека публикуется как модули CJS,вам нужно будет использовать модуль упаковщика.Я неравнодушен к накоплению .Чтобы свернуть модули cjs в вашем пакете, обязательно установите и используйте плагин rollup-plugin-commonjs .

Answer 2

Существует множество инструментов для объединения ваших зависимостей в один файл, который может использоваться веб-браузером.Такие инструменты обычно называют «упаковщиками».

Вот несколько популярных примеров:

• Webpack
• Browserify
• Посылка

_{Этот список не является исчерпывающим или даже рекомендацией того, какой инструмент использовать.}