Как связать Angular2 RC1 с systemjs
Перед выпуском кандидаты angular предоставили связанный файл. Поскольку у кандидатов на выпуск больше нет связанного файла. Включая angular2 и rxjs, мое приложение теперь загружает 671 запрос за 7 секунд. Это имеет искаженное развитие.
Кто-нибудь знает, как связать angular и rxjs и включить их в файл system.config?
Ответы
Ответ 1
Чтобы получить проект с более легким весом, вы должны проверить SystemJS Builder или JSPM, чтобы связать ваш проект.
Пример проекта семени: https://github.com/madhukard/angular2-jspm-seed
@BrunoGarcia дал очень приятную информацию здесь: fooobar.com/questions/16857/...
Ответ 2
Вам просто нужно использовать пакет:
-
Файлы UMD: это, возможно, самое простое решение. Как вы можете видеть в этом пример. Вам просто нужно сделать ссылку на файлы UMD в конфигурационном файле systemjs (не очень полезный для производственной среды):
System.config({
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'platform-browser.umd.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
Вы можете найти другой пример (возможно, лучше) здесь!
-
systemjs-builder + gulp:, если вы хотите продолжать использовать systemjs, это хороший вызов для использования этого решения, однако я его протестировал, и мне потребовалось 30 секунд для генерации пакет, что делает его не очень полезным для разработки (возможно, я делал что-то неправильно [почти наверняка]), но вы по-прежнему можете проверить, как связать ваше приложение с помощью system-builder здесь;
-
webpack: Я использую webpack. В Webpack есть инструмент разработчика, называемый webpack-dev-server, который связывает приложение практически с памятью, что ускоряет процесс во время разработки (+ горячая перезагрузка). Вы можете найти быстрый видеоурок здесь и более подробное описание из Angular 2 документации здесь. Чтобы использовать webpack, вы должны установить пакеты webpack (и webpack-dev-server, если хотите): npm i -S webpack webpack-dev-server
, создать файл webpack.config.js и запустить его, используя только webpack
, чтобы просто сгенерировать файл пакета или webpack-dev-server --inline
, чтобы создать сервер, который автоматически переустанавливается вместе с вашими изменениями. Параметр --inline позволяет автоматически перезагружать окно браузера:
// webpack.config.js file
module.exports = {
entry: 'SRC_DIR/main.js',
output: {
path: 'BUILD_DIR',
filename: 'bundle.js'
}
}
Теперь вставьте файл bundle.js в ваш index.html: <script src="BUILD_DIR/bundle.js"></script>
Эти две последние опции позволят вам создать пакет всего приложения, которое можно вручную включить в файл index.html.
Ответ 3
1) con-cat все файлы js и css файлы включают в index.html с помощью gulp-concat
.
2) Объединение angular библиотек и компонентов приложения, упомянутых в файле systemjs.config.js
. Использование gulp systemjs-builder
.
3) Сократите пучки с помощью gulp-uglify
.