捆绑现有 Angular 2 应用程序的最简单工具

Posted 2023-02-22

【中文标题】捆绑现有 Angular 2 应用程序的最简单工具

【英文标题】：Easiest tool to bundle an already existing Angular 2 application

【发布时间】：2017-03-14 11:37:42

【问题描述】：

我有一个已经可以使用 express 作为后端服务器的 Angular 2 应用程序。

express 服务器有一些逻辑，可以根据 URL 和文件类型将请求重定向到正确的路径，这意味着没有一个“公共路径”包含所有文件。

我发现我的应用程序需要 16 秒才能加载，并且在首次加载时向服务器发出了 454 个请求。

因为我不知道我必须处理捆绑，所以我有点卡住了。 所以现在我很困惑在保持服务器端不变的同时使用哪个工具进行捆绑（快速服务器）。

我试过 webpack，但它有 webpack-dev-server 作为后端，这意味着我需要重构 express 服务器逻辑以适应 webpack 服务器或使用 webpack 服务器作为中间件，这看起来也很麻烦。

我看到了其他一些选项，但由于信息太多而简单的例子很少，所以在中间迷失了方向。

我在 gulp、rollup、systejs-builder、browserify 中看到的一些工具。 如果可以，请帮助我找到处理捆绑的最简单方法并提供示例说明。

【参考方案1】：

您可能在您的应用程序中使用 SystemJs 作为模块，因此您可以检查例如this 问题与使用 SystemJsBuilder 的示例。

另一种选择是使用 WebPack，Google 有一个关于如何做到这一点的文档here。

这是第一个参考的代码：

// 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']);