使用 Angular 和 system.js 配置 gulp答案

【问题标题】：Configuring gulp with Angular & system.js使用 Angular 和 system.js 配置 gulp
【发布时间】：2017-08-17 13:21:15
【问题描述】：

我一直在网上搜索并找到了涵盖此主题的各种教程。但是，我遇到的大部分内容我理解得不够好，已经过时，或者没有足够详细地涵盖该主题。

我只是想设置一个 gulpfile，它将：

编译一个 Typescript 项目
复制所需的模块（Angular）

所以结果是一个工作的 Angular 应用程序。此时，我可以将 TS 编译为 JS，但是，当我将 main.js 加载到 index.html 时，出现以下错误：

未捕获的引用错误：系统未定义在 main.js:1

使用到目前为止的代码，我希望收到 aMethod 函数的输出。但是，如果我从 tsconfig 中删除“模块”：“系统”，我可以在节点控制台中获得输出。

我添加了 angular 及其依赖项，连同 system.js 作为 npm 包。

我的问题是：

此时我做错了什么，因为我无法从转译的 TS 应用程序中获得任何输出？
如何将 system.js 与 gulp 结合使用，创建一个将 @angular 模块（核心等）复制到我的构建目录的任务，以便我的应用可以使用 Angular？
在转译时，将各种 typescript 文件转译成一个 javascript 文件有什么好处？

提前谢谢你。一如既往，我们非常感谢任何帮助。

项目文件

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "removeComments": false
    },
    "include": [
        "src/app/**/*"
    ],
    "exclude": [
        "gulpfile.js",
        "node_modules"
    ]
}

gulpfile.js

const gulp = require("gulp");
const del = require("del");
const ts  = require("gulp-typescript");
const tsProject = ts.createProject("tsconfig.json");

const appDir = "build/js";

// Tasks

gulp.task("clean", function() {
    del([appDir]);
});

gulp.task("compile", function() {
    return tsProject.src()
        .pipe(tsProject())
        .js
        .pipe(gulp.dest(appDir));
});

gulp.task("build", ['clean', 'compile'], function() {
});

main.ts

import { Test } from "./class";

let t1 = new Test();
t1.aMethod("test");

class.ts

export class Test 
{
    aMethod(s: string)
    {
        console.log(s);
    }
}

index.html

<DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Angular & Python App</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <script src="js/main.js"></script>
    </body>
</html>

【问题讨论】：

标签： javascript angular typescript gulp

【解决方案1】：

试试这个：
将所有必需的依赖项复制到构建目录，然后构建。
像这样创建你的 gulp 编译：

var typeScriptsPath = "src/**/*.ts";
const sourcemaps = require('gulp-sourcemaps');
const tsc = require("gulp-typescript");


/**
 * Compile TypeScript sources and create sourcemaps in build directory.
 */
gulp.task("compile", () => {
  let tsResult = gulp.src(typeScriptsPath)
    .pipe(sourcemaps.init())
    .pipe(tsc(tsProject));
  return tsResult.js
    .pipe(sourcemaps.write(".", {
      sourceRoot: '/src'
    }))
    .pipe(gulp.dest("build"));
});


/**
 * copy all dependencies to build directory
 */
gulp.task("libs", () => {
  return gulp.src([
      'core-js/client/shim.min.js',
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'systemjs/dist/system.js',
      'reflect-metadata/Reflect.js',
      'rxjs/**/*.js',
      'rxjs/**/*.js.map',
      'zone.js/dist/*.min.js',
      '@angular/*/bundles/**',
      'jquery/dist/*min.js',
      'lodash/lodash.min.js',
      'bootstrap/dist/js/*min.js',
      'bootstrap/dist/css/*min.css',
      'moment/min/*min.js',
      'underscore/underscore-min*',
      'angular2-cookie/**',
      'moment/**'
    ], {
      cwd: "node_modules/**"
    }) /* Glob required here. */
    .pipe(gulp.dest("build/lib"));
});

gulp.task("build", ['compile', 'libs'], () => {
  console.log("Building the project ...");
});

【讨论】：

【解决方案2】：

您应该使用 systemjs-builder 来构建 main.ts 文件，就像构建它的 systemjs 文件一样。所以，你的 gulp 文件应该是这样的：

var Builder = require('systemjs-builder');
var builder = new Builder('', 'systemjs.config.js');

 gulp.task('dist',['compile', 'bundle']);

 gulp.task('compile', shell.task([
     'tsc'
 ]));

 gulp.task('bundle', ['bundle:vendor', 'bundle:app'], function(){
    return gulp.src(['./dist/*.js'], {base:"."})
        .pipe(uglify({
            compress: true,
            mangle: true
        }))
        .pipe(gulp.dest('./'));
});

gulp.task('bundle:app', function () {
    return builder
        .buildStatic('app/main.js', './dist/main.bundle.js')
        .catch(function (err) {
            console.log('App bundle error');
            console.log(err);
        });
});

 gulp.task('bundle:vendor', function () {
    return builder
        .buildStatic('app/vendor.js', './dist/vendor.bundle.js')
        .catch(function (err) {
            console.log('Vendor bundle error');
            console.log(err);
        });
});

其中 vendor.js 文件包含所有 Angular 供应商库，例如：“zone”、“reflect”和“core-js-shim”。

现在你可以调用 gulp dist 任务来编译你所有的文件了。

【讨论】：