替换Typescript包上的“ require” [英] Replace 'require' on Typescript bundle

问题描述

我有一个主要的TypeScript文件，并且可以导入到另一个文件，如下所示：

I have a main TypeScript file with an import to another file like so:

import './app.run';

我使用 tsproject 将我的ts文件编译成一个单独的包，然后像这样在我的html页面中使用System JS：

I use tsproject to compile my ts files into a single bundle and then use System JS in my html page like so:

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

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

But in my bundle, all the file imports are replaced with commonjs require statements, like so:

require('./app.run');

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

While there is no longer a app.run file present, because everything is bundled. How do I properly bundle ts without external file imports?

推荐答案

在最新版本的TypeScript中（在撰写本文时为1.5 ）您将使用ES6样式的模块导入：

In the very latest version of TypeScript (which is 1.5 at the time of writing) you would use the ES6 style of module imports:

import * as Alias from "./app.run";

并使用 SystemJS 模块类型进行编译。

And compile with the SystemJS module kind.

tsc --module systemjs app.ts

这应该是您想要的最简单的路线。 SystemJS支持是1.5的全新功能。

This should be the easiest route to what you want. The SystemJS support is brand new to 1.5.

内部/外部模块的说明...

Notes on internal / external modules...

有关于内部和外部模块有很多困惑，但是我对此的（强烈）建议是您不应混用内部和外部模块。

There has been a lot of confusion about internal and external modules, but my (strong) advise on the subject is that you shouldn't mix internal and external modules.

内部模块背后的想法是模拟编写JavaScript时用来隐藏信息而不是将其放在全局范围内的通用模式。道格·克罗克福德（Doug Crockford）在这一点上广为宣传。本质上，如果您使用以下JavaScript：

The idea behind internal modules was to simulate a common pattern were using when writing JavaScript to hide information rather than drop it on the global scope. Doug Crockford spread the word on this one. Essentially, if you have this JavaScript:

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

您可以使用名称和 sayHello 移出全局范围，并将您的足迹减少到单个变量：

You could take name and sayHello out of the global scope and reduce your footprint to a single variable:

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

这是令人钦佩的，因为另一个库有可能定义 name 或 sayHello ，以最后加载的那个为准。

This is admirable, because there is a chance another library will define name or sayHello and whichever loaded last would win.

对于外部模块，文件为模块。实际上，这比上面的命名空间示例更好，因为 nothing 最终都落在了全局范围内。加载模块时，请为其指定一个本地名称，并且不会造成污染。因此，您不需要将外部模块组织到内部模块或名称空间中。实际上，这样做会使您的代码更糟，而不是更好。

With external modules, the file is the module. This actually goes one better than the namespace example above, because nothing ends up on the global scope. When you load a module, you give it a local name and there is no pollution. For this reason, you don't need to organise your external modules into internal modules or namespaces. In fact, attempting to do so makes your code worse, not better.

TypeScript团队正在将内部模块重命名为命名空间-请参见简化模块 。虽然这将解决内部或外部之间的混淆，但我认为这不会完全解决将两种模式组合在一起的混淆。

The TypeScript team are renaming internal modules to "namespaces" - see the note under "Simplifying modules" in the TypeScript 1.5 release notes. While this will resolve the confusion between what is meant by "internal" or "external", I don't think it will entirely solve the confusion about combining the two patterns.

考虑到您的声誉，史蒂夫（Steve），我相信

Considering your reputation Steve, I am convinced

没有人享有声誉，这意味着他们的话不容小each -因此，请根据自己的经验做出最终决定。在这种情况下，您应该感觉到内部和外部模块的组合正在创建令人不适的代码，而没有增加任何好处。但是我可能是错的。

Nobody has a reputation that means their word should be unimpeachable - so use your own experience to make the final decision. In this case, you should feel in your bones that the combination of internal and external modules is creating uncomfortable code without adding any benefit; but I could be wrong.

这篇关于替换Typescript包上的“ require”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！