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

Way to control the order of concatenation with browserify?

假设我有两个文件,a.ts 和 b.ts。 a.ts 有一个从 b.ts 延伸的 class。如果我尝试使用 browserify a.ts b.ts -p [ tsify --target='ES5' ] > test.js 对它们进行浏览器化,则 a.ts 的输出 js 始终插入 b.ts.

的 js 之前

我的问题是,它们是否是一种强制 browserify 按指定顺序向输出文件添加内容的方法?

class答:

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

Class乙:

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 尚未定义。

browserify 的很大一部分目的是让加载顺序无关紧要。 ab 应该是模块,a 应该是 require('b').

我不懂 TypeScript,但我认为你需要这样的东西:

class答:

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

Class乙:

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

Modules in TypeScript > Going External

如果您在将这些模块与 browserify 捆绑在一起时出于某种原因真的想破坏 browserify 系统,那么您可能需要首先按照您想要的顺序连接它们,然后将连接后的文件提供给 browserify。这可能都可以用流来完成。