Как связать Angular2 RC1 с systemjs

Ответ 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.