我一直在尝试将我的 TypeScript“应用程序” bundle 到一个 javascript 文件中。
我没有使用任何 bundler ,而是使用 TSC(使用 TypeScript 2.2)。除了我自己的 ts 文件,我的应用程序还使用外部模块,例如 immutablejs。
我阅读了所有可能的线程、文档,但我找不到仅使用 TSC 将外部模块(来自 node_modules ) bundle 到我编译/转译的 javascript 文件中的方法。
在下方您可以找到我最新代码/配置的示例以及我尝试的结果。
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"removeComments": true,
"sourceMap": true,
"allowJs": true
}
}
app.ts - 注意:./something.ts 已成功 bundle 。
/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
import * as something from "./something";
import * as Immutable from "immutable";
console.log( something.test );
const map1 = Immutable.Map( { a: 1, b: '2', c: 'cu' });
console.log( map1.get( 'a') )
1#:使用 tsc-bundle ( https://www.npmjs.com/package/typescript-bundle )
这个方法不仅没有绑定(bind)immutableJs,还抛出错误:require is not defined。
var dragonfly = (function () {
var main = null;
var modules = {
"require": {
factory: undefined,
dependencies: [],
exports: function (args, callback) { return require(args, callback); },
resolved: true
}
};
function define(id, dependencies, factory) {
return main = modules[id] = {
dependencies: dependencies,
factory: factory,
exports: {},
resolved: false
};
}
function resolve(definition) {
if (definition.resolved === true)
return;
definition.resolved = true;
var dependencies = definition.dependencies.map(function (id) {
return (id === "exports")
? definition.exports
: (function () {
if(modules[id] !== undefined) {
resolve(modules[id]);
return modules[id].exports;
} else return require(id)
})();
});
definition.factory.apply(null, dependencies);
}
function collect() {
Object.keys(modules).map(function (key) { return modules[key]; }).forEach(resolve);
return (main !== null)
? main.exports
: undefined
}
define("something", ["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.test = "oie";
});
define("app", ["require", "exports", "something", "immutable"], function (require, exports, something, Immutable) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
console.log(something.test);
var map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' });
console.log(map1.get('a'));
});
//# sourceMappingURL=app.js.map
return collect();
})();
#2 - 使用 TSC with module = system ( tsc src/app.ts -m system --outfile build/app.js )
此方法也没有 bundle immutableJs,但也抛出错误:System is not defined
System.register("something", [], function (exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var test;
return {
setters: [],
execute: function () {
exports_1("test", test = "oie");
}
};
});
/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
System.register("app", ["something", "immutable"], function (exports_2, context_2) {
"use strict";
var __moduleName = context_2 && context_2.id;
var something, Immutable, map1;
return {
setters: [
function (something_1) {
something = something_1;
},
function (Immutable_1) {
Immutable = Immutable_1;
}
],
execute: function () {/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
console.log(something.test);
map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' });
console.log(map1.get('a'));
}
};
});
#3 - 使用 tsc with module = amd ( tsc src/app.ts -m amd --outfile build/app.js )
该方法不仅没有绑定(bind)immutableJs,还抛出错误:define is not defined。
define("something", ["require", "exports"], function (require, exports) {
"use strict";
exports.__esModule = true;
exports.test = "oie";
});
/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
define("app", ["require", "exports", "something", "immutable"], function (require, exports, something, Immutable) {
"use strict";
exports.__esModule = true;
console.log(something.test);
var map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' });
console.log(map1.get('a'));
});
结论:能够 bundle 外部库而不需要这些流行的 bundler (如 webpack、browserify、gulp 等)对我的项目的 future 非常重要......
有谁能帮帮我吗?
提前致谢
TF!
最佳答案
刚刚注意到您的帖子和免责声明,我是 typescript-bundle 的作者。您可以将 ImmutableJS 与以下内容 bundle 在一起。
tsc-bundle --project ./tsconfig.json --importAs immutable=Immutable
有关此开关的一些文档 here
这将创建一个额外的解析器,尝试从窗口对象解析不可变的。如果您在页面中包含依赖脚本(通过 <script>
标记)并且需要在您的包中引用该全局名称(在本例中为不可变)(并且您需要使用 .d.ts 文件),这通常是这种情况使用名为“不可变”的环境模块从@types/* 中提取)
上面一行产生了下面的 resolve() 函数。
function resolve(definition) {
if (definition.resolved === true)
return;
definition.resolved = true;
var dependencies = definition.dependencies.map(function (id) {
return (id === "exports")
? definition.exports
: (function () {
if(modules[id] !== undefined) {
resolve(modules[id]);
return modules[id].exports;
} else if(id === "immutable") {
return window["Immutable"];
} else {
try {
return require(id);
} catch(e) {
throw Error("module '" + id + "' not found.");
}
}
})();
});
definition.factory.apply(null, dependencies);
}
这与您将在 npm @types/* 存储库(假定为 UMD)中找到的大多数声明相悖,并允许 bundle 有效地从环境中提取模块(全局变量名称)。
希望对你有帮助
关于Typescript Compiler - bundle 外部库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43452087/