如何生成一个独立的打字稿文件并在html中引用它？

Question

我正在使用 gulp-typescript 任务来生成一个包含所有需要的 js 文件。下一步是我需要在 html 中引用此文件。我该怎么做？

**project**
|
+-dist 
   |
   +- output.js
+-src
   | 
   +- a.ts    
   +- b.ts

gulpfile.js

var gulp = require('gulp')
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

var config = {
    app: 'src',
    dist: 'dist',
    fileName: 'output.js'
};

gulp.task('default', function () {
    var tsRes = gulp.src(config.app + '/scripts/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            out: config.fileName,
            isolatedModules: false,
            module: 'amd'
        }));
    return tsRes.js
        .pipe(concat(config.fileName))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dist));
});

output.js

define(["require", "exports"], function (require, exports) {
    var Greeter = (function () {
        function Greeter(message) {
            this.greeting = message;
            console.log('Greeter constructor has been called');
        }
        Greeter.prototype.greet = function () {
            return "Hello, " + this.greeting;
        };
        return Greeter;
    })();
    exports.Greeter = Greeter;
});

define(["require", "exports", './Greeter'], function (require, exports, model) {
    var greeter = new model.Greeter("world");
    console.log(greeter);
    var button = document.createElement('button');
    button.textContent = "Say Hello";
    button.onclick = function () {
        alert(greeter.greet());
    };
    document.body.appendChild(button);
});



//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyZWV0ZXIudHMiLCJtYWluLnRzIiwicG9ydGZvbGlvZGFzaGJvYXJkLndvcmtlci5qcyJdLCJuYW1lcyI6WyJHcmVldGVyIiwiR3JlZXRlci5jb25zdHJ1Y3RvciIsIkdyZWV0ZXIuZ3JlZXQiXSwibWFwcGluZ3MiOiI7SUFBQTtRQUVJQSxpQkFBWUEsT0FBZUE7WUFDdkJDLElBQUlBLENBQUNBLFFBQVFBLEdBQUdBLE9BQU9BLENBQUNBO1lBQ3hCQSxPQUFPQSxDQUFDQSxHQUFHQSxDQUFDQSxxQ0FBcUNBLENBQUNBLENBQUNBO1FBQ3ZEQSxDQUFDQTtRQUNERCx1QkFBS0EsR0FBTEE7WUFDSUUsTUFBTUEsQ0FBQ0EsU0FBU0EsR0FBR0EsSUFBSUEsQ0FBQ0EsUUFBUUEsQ0FBQ0E7UUFDckNBLENBQUNBO1FBQ0xGLGNBQUNBO0lBQURBLENBVEEsQUFTQ0EsSUFBQTtJQVRZLGVBQU8sVUFTbkIsQ0FBQTs7OztJQ1JELElBQUksT0FBTyxHQUFHLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN6QyxPQUFPLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBRXJCLElBQUksTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDOUMsTUFBTSxDQUFDLFdBQVcsR0FBRyxXQUFXLENBQUM7SUFDakMsTUFBTSxDQUFDLE9BQU8sR0FBRztRQUNoQixLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDeEIsQ0FBQyxDQUFBO0lBRUQsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUM7OztBQ1ZsQztBQUNBIiwiZmlsZSI6InBvcnRmb2xpb2Rhc2hib2FyZC53b3JrZXIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY2xhc3MgR3JlZXRlciB7XHJcbiAgICBncmVldGluZzogc3RyaW5nO1xyXG4gICAgY29uc3RydWN0b3IobWVzc2FnZTogc3RyaW5nKSB7XHJcbiAgICAgICAgdGhpcy5ncmVldGluZyA9IG1lc3NhZ2U7XHJcbiAgICAgICAgY29uc29sZS5sb2coJ0dyZWV0ZXIgY29uc3RydWN0b3IgaGFzIGJlZW4gY2FsbGVkJyk7XHJcbiAgICB9XHJcbiAgICBncmVldCgpIHtcclxuICAgICAgICByZXR1cm4gXCJIZWxsbywgXCIgKyB0aGlzLmdyZWV0aW5nO1xyXG4gICAgfVxyXG59IiwiaW1wb3J0IG1vZGVsID0gcmVxdWlyZSgnLi9HcmVldGVyJyk7XHJcbnZhciBncmVldGVyID0gbmV3IG1vZGVsLkdyZWV0ZXIoXCJ3b3JsZFwiKTtcclxuY29uc29sZS5sb2coZ3JlZXRlcik7XHJcblxyXG52YXIgYnV0dG9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7XHJcbmJ1dHRvbi50ZXh0Q29udGVudCA9IFwiU2F5IEhlbGxvXCI7XHJcbmJ1dHRvbi5vbmNsaWNrID0gZnVuY3Rpb24oKSB7XHJcblx0YWxlcnQoZ3JlZXRlci5ncmVldCgpKTtcclxufVxyXG5cclxuZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChidXR0b24pO1xyXG4iLG51bGxdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ==

我想我需要使用 require.js 来引用它，但是由于这是一个文件，我不知道如何调用所需的模块。

理想情况下，我需要的只是一个完全没有 require.js 的 *.min.js 文件。

编辑：

我进行了研究，发现了这篇很棒的文章： http://www.davidkudera.com/2015/02/28/typescript-gulp-bower-browserify/

Answer 1

您需要：

使用 <script> 标签加载 require.js。
创建一个 require.config.js 文件并使用 <script> 标签加载它。
使用 <script> 标签加载文件 output.js。

另一种选择是将您的模块编译成 CommonJS 模块（以下是我的一个项目的示例）：

var gulp        = require("gulp"),
    browserify  = require("browserify"),
    source      = require("vinyl-source-stream"),
    buffer      = require("vinyl-buffer"),
    tsc         = require("gulp-typescript");

var tsProject = tsc.createProject({
  removeComments : false,
  noImplicitAny : false,
  target : "ES5",
  module : "commonjs",
  declarationFiles : false
});

gulp.task("build-source", function() {
  return gulp.src(__dirname + "/source/**/**.ts")
             .pipe(tsc(tsProject))
             .js.pipe(gulp.dest(__dirname + "/build/source/"));
});

然后您可以使用 Browserify 创建一个可以直接在浏览器中加载的文件：

gulp.task("bundle-source", function () {
  var b = browserify({
    standalone : 'inversify',
    entries: __dirname + "/build/source/inversify.js",
    debug: true
  });

  return b.bundle()
    .pipe(source("inversify.js"))
    .pipe(buffer())
    .pipe(gulp.dest(__dirname + "/bundled/source/"));
});

如何生成一个独立的打字稿文件并在html中引用它？

How to generate a self-dependent typescript file and reference it in html?

build

typescript

gulp