Подтвердить что ты не робот

Как я могу обслуживать приложение AngularJS 2 без необходимости также обслуживать все файлы в `node_modules`?

Я пытаюсь запустить Angular 2 семенное приложение. К сожалению, npm install помещает огромное количество файлов в node_modules, которые, как я полагаю, также должны обслуживать вместе с кодом семенного приложения.

Я не хочу обслуживать все эти статические файлы, если мне нужно только несколько для работы приложения. Есть ли способ только для сервера, который мне действительно нужен?

Причина, по которой я спрашиваю, заключается в том, что среда разработки Google App Engine (dev_appserver.py) ограничивает количество файлов, которые она может обслуживать, а производственная среда имеет ограничение на объединенный размер файлов, которые могут быть загружены. Было бы стыдно загружать мегабайты ненужных файлов.

4b9b3361

ОТВЕТЫ

Ответ 1

Это обрабатывается gulp script этого проекта семени.

https://github.com/angular/angular2-seed/blob/e66d24fd34d37884cec41a3583bad563cf5a43e5/gulpfile.js#L15

Задача gulp копирует файлы с node_modules на dist/vendor.

//copy dependencies to dist folder
gulp.task('copy:deps', function(){
  return gulp.src([
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/angular2/bundles/angular2.dev.js',
    'node_modules/angular2/bundles/http.js',
    'node_modules/angular2/bundles/router.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/systemjs/dist/system.js',
  ]).pipe(gulp.dest('dist/vendor'));
});

После установки gulp просто введите gulp, чтобы запустить задание по умолчанию gulp или запустите npm start, который вызовет gulp clean && gulp

Задача по умолчанию gulp также скопирует все остальные файлы .js,.html и .css в папку dist. Папка dist содержит все, что вам нужно развернуть.

Ответ 2

Используйте версию CDN для создания libs, например:

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

Не только это избавит вас от hastle, чтобы справиться с тем, что и как переместить libs в ваш дистрибутив, но они также будут сохранять конечного пользователя некоторое время, если они скачали их с предыдущей посещенной веб-страницы.

Ответ 3

Вы можете использовать элемент skip_files в файле конфигурации приложения, чтобы исключить нежелательные файлы:

Элемент skip_files указывает, какие файлы в приложении каталог не загружается в App Engine. Значение представляет собой либо регулярное выражение или список регулярных выражений. Любое имя файла, который соответствует любому регулярному выражению, опущен из списка файлы для загрузки, когда приложение загружено.

Обратите внимание на переопределение значений по умолчанию в этом разделе документа.

Примечание. Я не совсем уверен, помогло ли это на стороне сервера разработки, т. к., похоже, в некоторых случаях игнорирует эту конфигурацию (но я не могу найти ответ, который не работал в одном такой случай, чтобы получить детали).

Ответ 4

Когда вы запустите npm start, вы получите папку dist. Эта папка содержит все ваше приложение. Поэтому не нужно обслуживать node_modules.

Ответ 6

С Angular 2 и angular -cli это довольно прямолинейно. Вам не нужен gulp или пользовательский script. Просто создайте с помощью angular -cli ng build --prod, и он отлично справляется с treeshaking, minifying и созданием очень маленького и оптимального пакета. Я написал небольшое сообщение об этом - для создания и развертывания приложения Angular 2 в Google AppEngine или Firebase.