如果我在打字稿中使用`module("somelib"))，则无法在浏览器中运行 [英] If I use `module("somelib")` in typescript, it can't be running in browser

问题描述

我正在尝试在客户端的angularjs中使用打字稿.

I'm trying to use typescript with angularjs in the client-side.

我发现如果我使用外部模块，则生成的js将不会在浏览器中运行.

I found if I use external modules, the generated js won't be run in browser.

controllers.ts

/// <reference path="./libs/underscore.d.ts"/>

import _ = module("underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

生成的js将是:

var _ = require("underscore")
var test;
(function (test) {
    var Ctrl = (function () {
        function Ctrl($scope) {
            $scope.name = "Freewind";
            _.each($scope.name, function (item) {
            });
        }
        return Ctrl;
    })();
    test.Ctrl = Ctrl;    
})(test || (test = {}));

无法正常运行.但是，如果我删除module("underscore")部分，就可以了.

Which can't run correctly. But if I remove the module("underscore") part, it will be OK.

由于我在HTML中添加了underscore.js，因此我认为require()方法应该有问题.如何解决?

Since I have add underscore.js in the HTML, I think it should be something wrong with the require() method. How to fix it?

推荐答案

有两种方法可以在HTML页面中加载内容.

There are two ways to load stuff in your HTML pages.

第一个是在页面中手动包含所有脚本文件.您可以运行某种预发布步骤来合并和最小化代码-但是您对此负有责任，而不是将其留给代码去做.这通常称为捆绑.

The first one is to manually include all the script files in your page. You might run some kind of pre-release step to merge and minify your code - but you're taking responsibility for that instead of leaving it to the code to do. This is generally called bundling.

在捆绑的情况下，您只能在TypeScript代码中使用引用(而不是导入)，如下所示:

In the case on bundling, you only use references in your TypeScript code (not imports), like this:

/// <reference path="./libs/underscore.d.ts"/>

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

模块加载

如果要使用模块加载器(对于Web通常是RequireJS)，则可以使用import语句加载外部模块.通常，在这种情况下，您不需要引用...

Module loading

If you want to use a module loader, which for The Web is typically RequireJS, you can load External Modules using the import statement. Normally you wouldn't need the reference in this case...

import _ = module("./libs/underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

RequireJS与非模块

存在第三种情况，这很常见.如果您打算导入不是外部模块的内容(例如jQuery，但下划线也可能适合此模式)，最好使用参考和对RequireJS的手动调用.

RequireJS with non-modules

There is a third scenario, which is quite common. If you intend to import something that isn't an External Module (such as jQuery, but underscore may also fit this pattern), you are better off using a reference and a manual call to RequireJS.

RequireJS将为您加载依赖项，因此您将使用它包装主程序(它可能在单独的文件中，例如app.ts.

RequireJS will load the dependency for you, so you would wrap your main program with it (which would probably be in a separate file such as app.ts.

///<reference path="./libs/require.d.ts" />
///<reference path="./libs/underscore.d.ts" />

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

require(['underscore'], function (_) {
    var ctrl = new test.Crtl({});
});

您还可以使用require.config指定应用程序中下划线的路径.

You can also use require.config to specify the path to underscore in your application.

  require.config({
    paths: {
        "underscore": "libs/underscore"
    }
  });

这篇关于如果我在打字稿中使用`module("somelib"))，则无法在浏览器中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！