web-dev-qa-db-ja.com

コンパイル済みの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

app/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に縮小する必要があります

私の質問は

  1. コンパイル済みの.jsファイルをすべて収集して単一のファイルに縮小し、実稼働ブランチでmainとして参照するタスクを実行できますか？
  2. これにより、モジュールシステムインポート{x}が 'y'から破損しますか？
  3. モジュールの読み込みシステムが破損した場合、Angular 2アプリケーションでファイルを連結するにはどうすればよいですか？

私のTypeScriptバージョンは、1.8.2

助けてくれてありがとう。

javascriptangularminify
24
Rivadiz

すべてのTypeScriptファイルを1つのファイルにコンパイルする場合は、TypeScriptコンパイラのoutFileプロパティを使用する必要があります。 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要素に含めます。

この方法では、モジュールのインポートを中断しません。

次に、gulpのuglifyプラグインを使用してこの単一のファイルを縮小できます。

7
Thierry Templier

** tsconfig.jsonのオプションを使用して、TSから単一のファイルを作成します。

{
  "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
Gary

@angular/cliを使用している場合は、実行できます

ng build --prod

コードを縮小してgzipします。

1
All Іѕ Vаиітy

すでにGulpを使用しているので、gulpタスクに webpack を追加して、すべてのJavaScriptソースファイル（およびAngular2ソース）を1つにまとめることができます。以下は、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ファイルを縮小する場合は、 glifyJS2 を使用できます。 （ただし、難読化に問題があるため、_mangle: false_があります。詳細については、この SOリンク を参照してください）。関連するgulpfile.jsコンテンツは次のとおりです。

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

このようにして、プロダクションコードは、デプロイ可能なdistフォルダーに配置されます。これを本番ブランチにチェックインするかどうかはあなたの選択です。

非常に小さなAngular2アプリで動作するバージョンを見たい場合は、私の Githubのwordsプロジェクト を参照してください。

1
carnun