Использование Angular.js для расширения Chrome

Question

Итак, я использую knockout.js для привязки данных для конкретного расширения chrome, над которым я работаю. Я думал, что может иметь смысл перейти к структуре (например, Angular). После использования npm для установки всех зависимостей для моего углового, папка node_module имеет более 100 МБ. Это, очевидно, слишком велико, чтобы содержать в расширении chrome и устанавливать на каждом компьютере пользователя. Любые рекомендации о том, как я должен использовать Angular для моего расширения таким образом, чтобы на компьютерах клиента не требовалось сотни МБ файлов?

Answer 1

Там нет необходимости включать bower_components или node_modules папку в Extension Chrome. Попробуйте использовать Grunt/Gulp для минимизации.

Ваш репозиторий должен в идеале содержать папку dist, которая содержит готовое состояние вашего продления. Когда вы загружаете свое расширение в Интернет-магазин Chrome, вы должны создать ZIP этой папки.

Используйте ниже рубаки плагинов для оптимизации приложения,

grunt-usemin - извлечет все таблицы стилей или скриптов из index.html, и объединить их в единый CSS или JS-файла, так что вам не придется беспокоиться о папке node_modules или bower_components.

grunt-contrib-uglify - будет обрезать/уменьшить файл JS.

Вкратце, обработайте расширение Chrome как любое производство в реальном мире. Угловое приложение, которое обычно содержит папку распространения, содержащую оптимизированную версию вашего кода. Вы будете развертывать содержимое в этой папке для производства, а не весь репозиторий.

Вы можете обратиться к расширению Chrome, с которым я работал, с именем Автоматизация браузера Tookit на Github. Вы можете проверить Gruntfile.js и папку dist для дальнейшего ознакомления.

https://github.com/kensplanet/browser-automation-toolkit

Answer 2

При использовании НПМ на стороне клиента зависимостей следует включать только DIST файлы. (Угловые например - /node_modules/angular/angular.js)

Обычно эти файлы имеют вес всего несколько килобайт. Лучше использовать версию миниатюрного пакета в производстве, если они выставляют такие (/node_modules/angular/angular**.min**.js) или минимизируют ее сами, вы можете использовать для нее любой бегун задачи (grunt/gulp)

Кроме того, я настоятельно рекомендую вам не изобретать велосипед и начать с YEOMAN genrator или семени проекта, как: https://github.com/yeoman/generator-chrome-extension