Как объединить (минимизировать) скомпилированные компоненты Angular 2?

пытается минимизировать скомпилированный исходный код проекта для производства, Я использую Gulp как бегун задачи.

исходные файлы выглядят следующим образом:

HTML

<!--... . .  various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>
<body>
  <app></app>
</body>

Структура моего каталога приложений выглядит следующим образом:

.
├── main.js
├── main.js.map
├── main.ts
├── main.app.js
├── main.app.js.map
├── main.app.ts
├── x.component1
│   ├── x.component.one.js
│   ├── x.component.one.js.map
│   └── x.component.one.ts
└── x.component2
    ├── x.component.two.js
    ├── x.component.two.js.map
    └── x.component.two.ts

приложение /main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {MyAwesomeApp} from './main.app'

bootstrap(MyAwesomeApp);

main.app.ts

@Component({
    selector: 'app',
    template: `
        <component-1></component-1>

        <component-2></component-2>
    `,
    directives: [Component1, Component2]
})


export class MyAwesomeApp {

}

то компоненты,

@Component({
    selector: 'component-1',
    template: `
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
    `
})


export class Component1 {

}

@Component({
    selector: 'component-2',
    template: `
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
    `
})


export class Component2 {

}

Все файлы TypeScript скомпилированы до ES5 JavaScript, далее необходимо уменьшить до main.js

так что мои вопросы:

Могу ли я запустить задачу для сбора всех скомпилированных файлов .js для минимизации в один файл и ссылки на нее как main в производственной ветки?
Означает ли это, что система модулей импортирует {x} из 'y'?
Если он сломает систему загрузки модуля, что можно сделать для конкатенации файлов в приложении Angular 2?

my TypeScript версия, 1.8.2

Спасибо за любую помощь.

Ответ 1

Если вы хотите скомпилировать все ваши файлы TypeScript в один, вам нужно использовать свойство outFile компилятора TypeScript. Он настраивается через плагин gulp - typescript.

Таким образом вам не нужно настраивать SystemJS для загрузки модуля на основе имен файлов:

<script>
  // Not necessary anymore
  /* System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  }); */
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

Имена модулей и их содержимое теперь присутствуют в этом одиночном файле. Точно так же для пакетов упакованных файлов пакета Angular2 (angular2.dev.js, http.dev.js,...). Чтобы использовать этот файл, просто добавьте его в элемент script.

Таким образом, вы не нарушите импорт модулей.

Затем вы можете минимизировать этот единственный файл с помощью плагина uglify gulp...

Ответ 2

** Создайте один файл из TS с параметрами в tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir":"client/build/",
    "outFile": "client/build/all.js",
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "server"
  ],
  "include": [
        "client/*.ts",
        "client/**/*.ts",
        "client/**/**/*.ts"
  ]   
}

// Include all folders to put to a file.

** Создайте выходной файл и включите его следующим образом: Пример:

<script>


  // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles.
  // the bundle at build/all.js contains these modules
System.config({
    bundles: {
      'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider']
    }
  });

  // when we load 'app/app' the bundle extension interrupts the loading process
  // and ensures that boot of build/all.js is loaded first
  System.import('boot');


    </script>

** Минимизировать файл all.js, как обычно.

Ответ 3

Если вы используете @angular/cli, вы можете запустить

ng build --prod

чтобы минимизировать и gzip код.

Ответ 4

Поскольку вы уже используете Gulp, вы можете просто добавить webpack в свою задачу Gulp, чтобы объединить весь ваш источник JavaScript файлы (а также источники Angular2) в один. Вот пример того, как выглядит ваш webpack.config.js:

module.exports = {
  entry: './src/app/app',
  output: {
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

Соответствующие разделы из gulpfile.js:

var webpack = require('webpack-stream');
var htmlReplace = require('gulp-html-replace');
var gulp = require('gulp');

gulp.task('webpack', function() {
  return gulp.src('src/app/*.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

Замените gulp.dest('src/') соответствующим местоположением, в котором вы хотите, чтобы ваш производственный код находился.

Затем вам необходимо обработать ваши HTML файлы, чтобы иметь соответствующие ссылки на исходный файл JavaScript (также в gulpfile.js).

gulp.task('html', ['templates'], function() {
  return gulp.src('src/index.html')
    .pipe(htmlReplace({
      'js': ['bundle.js']
    }))
    .pipe(gulp.dest('dist/'));
});

Если вы хотите уменьшить свои файлы JavaScript, вы можете использовать UglifyJS2. (Обратите внимание, что что-то происходит с обфускацией, поэтому mangle: false. Подробнее см. Ссылку fooobar.com/info/220413/...). Вот соответствующий контент gulpfile.js:

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify({
            mangle: false
          }))
    .pipe(gulp.dest('dist/'));
});

Таким образом, ваш производственный код попадает в вашу папку dist, откуда вы можете ее развернуть. Теперь это ваш выбор, проверяете ли вы это в производственной ветки или нет.

Не стесняйтесь ссылаться на мой проект слов на Github, если вы хотите увидеть рабочую версию в очень маленьком Angular2 приложении.