Минимальное количество команд для создания готового к использованию кода Javascript на стороне клиента?

Question

Для многих библиотек JS, которые мы можем найти на Github, в настоящее время невозможно использовать их непосредственно в клиентском проекте, выполнив:

<script src="thelibrary.js"></script>

Браузер не принимает require и другиеКлючевые слова, связанные с узлами, которые присутствуют как в fernet.js , так и даже в fernetBrowser.js .

Я прочитал несколько учебных пособий, которые предлагают установитьNode (с npm), затем browserify или webpack, а также транспортер и т. Д., Но прежде чем устанавливать какое-либо новое программное обеспечение, я обычно проверяю, что абсолютно необходимо хорошо понимать, как оно работает.

Вопрос: какое минимальное количество команд командной строки нужно выполнить, чтобы можно было превратить .js с помощью require (например, fernetBrowser.js ) в .jsфайл загружается напрямую в браузер на стороне клиента?

Answer 1

В вашем примере файл готов для использования в среде браузера, поскольку он был создан с browserify для того, чтобы скопировать все библиотеки и отобразить их по пути (например: 'crypto-js/aes'). Browserify также добавляет некоторый стандартный код, который позволяет браузеру работать с синтаксисом CommonJS (require и module.exports).

Итак, чтобы ответить на ваш вопрос, минимальное количество команд для запуска, чтобы создатьготовый для браузера пакет из файла, использующего импорт CommonJS, равен one , поскольку единственная задача, которую необходимо выполнить, - объединить код и его зависимости в один файл (+ также установить зависимости):

npm i -g browserify  # once for all
npm i
browserify -s fernet fernet.js > fernetBrowser.js

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

Если существует несколько файлов JS для объединения, вот ответ: Просмотр нескольких файлов в один пакет