我有一个主要的TypeScript文件,导入到另一个文件,如下所示:
import './app.run';
我使用tsproject将我的ts文件编译成一个包,然后在我的html页面中使用System JS,如下所示:
System.import('app/app.module');
但是在我的包中,所有文件导入都被commonjs require语句替换,如下所示:
require('./app.run');
虽然不再存在app.run
个文件,因为所有内容都已捆绑在一起。如何在没有外部文件导入的情况下正确捆绑ts?
答案 0 :(得分:1)
在最新版本的TypeScript(which is 1.5 at the time of writing)中,您将使用ES6样式的模块导入:
import * as Alias from "./app.run";
使用SystemJS
模块编译。
tsc --module systemjs app.ts
这应该是您想要的最简单的路线。 SystemJS支持是1.5的全新支持。
关于内部/外部模块的说明......
关于内部和外部模块存在很多混淆,但我(强烈)关于这个主题的建议是you shouldn't mix internal and external modules。
内部模块背后的想法是模拟在编写JavaScript时隐藏信息而不是将其放在全局范围内时使用的常见模式。 Doug Crockford在这个问题上传播了这个词。基本上,如果你有这个JavaScript:
var name = 'Nicky';
function sayHello() {
return 'Hello ' + name;
}
您可以将name
和sayHello
从全局范围中移除,并将您的足迹减少到单个变量:
var myNamespace = (function() {
var name = 'Nicky';
return {
sayHello: function () {
return 'Hello ' + name;
}
};
}());
这是令人钦佩的,因为有可能另一个图书馆会定义name
或sayHello
,并且最后加载的任何人都会获胜。
使用外部模块,文件是模块。这实际上比上面的命名空间示例更好,因为 nothing 最终会在全局范围内结束。加载模块时,给它一个本地名称,没有污染。因此,您无需将外部模块组织到内部模块或命名空间中。事实上,尝试这样做会使您的代码变得更糟,而不是更好。
TypeScript团队正在将内部模块重命名为“名称空间” - 请参阅"Simplifying modules" in the TypeScript 1.5 release notes下的注释。虽然这将解决“内部”或“外部”的含义之间的混淆,但我认为它不会完全解决关于组合这两种模式的混淆。
考虑到你的名声史蒂夫,我确信
没有人声称他们的言论应该是无懈可击的 - 所以请用自己的经验做出最终决定。在这种情况下,您应该感觉到内部和外部模块的组合正在创建令人不舒服的代码而不会增加任何好处;但我可能错了。