-3

バックエンド サーバーとしてエクスプレスを使用して、既に動作している Angular 2 アプリケーションがあります。

Express サーバーには、URL とファイルの種類に基づいて要求を正しいパスにリダイレクトするロジックがあります。つまり、すべてのファイルを含む "パブリック パス" はありません。

アプリケーションの読み込みに 16 秒かかり、最初の読み込みでサーバーに対して 454 のリクエストが行われていることがわかりました。

バンドルを処理しなければならないことを知らなかったので、少し行き詰まっています。そのため、サーバー側（エクスプレスサーバー）をそのままにして、バンドルにどのツールを使用するかについて非常に混乱しています。

webpack を試してみましたが、バックエンドとして webpack-dev-server があります。つまり、エクスプレス サーバー ロジックをリファクタリングして、webpack サーバーに適合させるか、webpack サーバーをミドルウェアとして使用する必要があり、それも面倒なようです。

他のオプションもいくつか見ましたが、情報が多すぎて簡単な例が少ないため、途中で道に迷いました。

私が見たツールのいくつかは、gulp、rollup、systejs-builder、browserify. 可能であれば、バンドルを処理する最も簡単な方法を見つけて、例の説明を提供してください。

4

1 に答える 1

0

おそらくモジュール用のアプリケーションで SystemJs を使用しているので、 SystemJsBuilder を使用した例でこの質問を確認できます。

もう 1 つのオプションは、WebPack を使用することです。Google には、これを行う方法に関するドキュメントがあります。

これは、最初の参照からのコードです。

// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/semantic-ui/dist/semantic.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/lib/js'));
});

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(tsc({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "public/dist/js",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);
于 2016-11-01T11:14:06.350 に答える