Question

我一直在网上搜索，并找到了涵盖这个主题的各种教程。然而，我遇到的大多数人都不能很好地理解，已经过时，或者没有足够详细地介绍这个主题。

我只是想设置一个gulpfile：

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

这样结果就是一个有效的Angular应用程序。此时，我能够将TS编译为JS，但是，当我将main.js加载到index.html时，我收到以下错误：

未捕获的ReferenceError：未定义系统在main.js：1

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

我已将angular及其依赖项与system.js一起添加为npm包。

我的问题是：

此时我做错了什么，因为我无法从我已编译的TS应用程序中获得任何输出？
我如何利用gulp利用system.js来创建一个将@angular模块（核心等）复制到我的构建目录的任务，这样我的应用程序可以让我们成为Angular？
在转换时，将各种打字稿文件转换为单个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>

Answer 1

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

＆＃13;

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 ...");
});

＆＃13;

Answer 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文件包含所有角度供应商库，例如：＆＃39; zone＆＃39;，＆＃39;反映＆＃39;和＆＃39; core-js-shim＆＃39;。

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

使用Angular＆amp;配置gulp system.js

我的问题是：

项目文件

2 个答案: