用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 的很大一部分目的是让加载顺序无关紧要。 a
和 b
应该是模块,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。这可能都可以用流来完成。
假设我有两个文件,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.
我的问题是,它们是否是一种强制 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 的很大一部分目的是让加载顺序无关紧要。 a
和 b
应该是模块,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。这可能都可以用流来完成。