Question

说我有两个文件，a.ts和b.ts. a.ts有一个从b.ts延伸的类。如果我尝试使用browserify a.ts b.ts -p [ tsify --target='ES5' ] > test.js浏览它们，那么a.ts的输出js总是在来自b.ts的js之前插入。

我的问题是，它们是一种强制浏览器以指定顺序将内容添加到输出文件的方法吗？

A类：

module Widget {
    export class A extends B {
        constructor() {
            super();
            console.log('monkey: ', this.getMonkey());
        }
    }
}

B组：

module Widget {
    export class B {
        private monkey = 'Baboon';
        public getMonkey() {
            return this.monkey;
        }
    }
}

组合输出的浏览器JS：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
/// <reference path="B.ts" />
var Widget;
(function (Widget) {
    var A = (function (_super) {
        __extends(A, _super);
        function A() {
            _super.call(this);
            console.log('monkey: ', this.getMonkey());
        }
        return A;
    })(Widget.B);
    Widget.A = A;
})(Widget || (Widget = {}));

},{}],2:[function(require,module,exports){
var Widget;
(function (Widget) {
    var B = (function () {
        function B() {
            this.monkey = 'Baboon';
        }
        B.prototype.getMonkey = function () {
            return this.monkey;
        };
        return B;
    })();
    Widget.B = B;
})(Widget || (Widget = {}));

},{}]},{},[2,1]);

正如您所看到的，当A试图扩展Widget.B时，它失败了，因为.B尚未定义。

Answer 1

浏览器化的很大一部分是使加载顺序无关紧要。 a和b应为模块，a应为require('b')。

我不知道TypeScript，但我认为你需要这样的东西：

A类：

import B = require('./path/to/B');
export class A extends B {
    constructor() {
        super();
        console.log('monkey: ', this.getMonkey());
    }
}

B组：

export class B {
    private monkey = 'Baboon';
    public getMonkey() {
        return this.monkey;
    }
}

请参阅Modules in TypeScript > Going External。

如果您真的想在使用browserify捆绑这些模块时出于某种原因而破坏browserify系统，那么您可能需要首先按照您想要的顺序连接它们，并提供连接文件以进行浏览。这可能都是用流完成的。

用browserify控制连接顺序的方法？

1 个答案: