typescript - 替换 Typescript 包上的 'require'

标签 typescript commonjs systemjs

我有一个主 TypeScript 文件,其中包含另一个文件的导入,如下所示:

import './app.run';

我使用tsproject将我的 ts 文件编译成一个包,然后在我的 html 页面中使用 System JS,如下所示:

System.import('app/app.module');

但是在我的包中,所有文件导入都被 commonjs require 语句替换,如下所示:

require('./app.run');

虽然不再存在 app.run 文件,因为所有内容都已捆绑。如何在不导入外部文件的情况下正确捆绑 ts?

最佳答案

在最新版本的 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;
}

您可以将 namesayHello 移出全局范围,并将您的足迹减少到单个变量:

var myNamespace = (function() {
    var name = 'Nicky';
    return {
        sayHello: function () {
            return 'Hello ' + name;
        }
    };
}());

这是令人钦佩的,因为另一个库有可能定义 namesayHello 并且最后加载的将获胜。

对于外部模块,文件就是模块。这实际上比上面的命名空间示例更好,因为全局范围内没有任何内容。当你加载一个模块时,你给它一个本地名称,并且没有污染。因此,您不需要将外部模块组织到内部模块或命名空间中。事实上,尝试这样做只会让你的代码变得更糟,而不是更好。

TypeScript 团队正在将内部模块重命名为“命名空间” - 请参阅 "Simplifying modules" in the TypeScript 1.5 release notes 下的注释。虽然这将解决“内部”或“外部”含义之间的混淆,但我认为它不会完全解决组合这两种模式的混淆。

Considering your reputation Steve, I am convinced

没有人的声誉意味着他们的言论应该是无懈可击的 - 所以请根据您自己的经验来做出最终决定。在这种情况下,您应该从骨子里感觉到内部和外部模块的组合正在创建令人不舒服的代码,而没有增加任何好处;但我可能是错的。

关于typescript - 替换 Typescript 包上的 'require',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31777388/

相关文章:

javascript - 在 ionic v2 中单击按钮切换段

reactjs - 在使用第三方东西时如何保持 Browserify 包大小合理(如果重要的话通过 grunt )

json - 为 karma 单元测试获取 json 文件

javascript - 在我的应用程序 angular2 aspnet core 中找不到错误 angular2-cookies/core.js

javascript - 如何检查我的复选框列表是否已选中或未选中 AngularJS 2

javascript - 使用Socket.IO传输的文件对象变成 'ArrayBuffer'?

typescript - NestJs Swagger 混合类型

javascript - CommonJs模块系统中 "module.exports"和 "exports"之间的区别

module - 使用 Angular JS 时如何加载 AMD 模块?

typescript - 带有 TypeScript 转译器的 JSPM bundle