Javascript 使用script.js从Typescript加载模块_Javascript_Typescript

Javascript 使用script.js从Typescript加载模块

javascript typescript

Javascript 使用script.js从Typescript加载模块,javascript,typescript,Javascript,Typescript,我希望能够使用typescript从cdn加载外部依赖项，如下所示： declare var $script: any; $script(["//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js", "//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js" ], () => { import * as React from

我希望能够使用typescript从cdn加载外部依赖项，如下所示：

declare var $script: any;


$script(["//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js",
    "//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"
], () => {       
   import * as React from "react";
   import * as ReactDOM from "react-dom";

    ReactDOM.render(
        <Hello compiler="TypeScript" framework="React" />,
        document.getElementById("example")
    );
});

…如果我们将导入语句移到文件的顶部，它们将失败，因为依赖项尚未加载

有没有一种方法可以使用scriptjs根据需要通过typescript加载依赖项？

当使用模块加载器加载脚本时，应该使用您正在使用的

import

语句（

amd

，

system

，等等），但是，既然您没有这样做，那么您需要使用

reference

标记来告诉编译器在哪里找到要响应的定义：

/// <reference path="react.d.ts" />
/// <reference path="react-dom.d.ts" />

$script(["//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js",
    "//cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"
], () => {
    ReactDOM.render(
        <Hello compiler="TypeScript" framework="React" />,
        document.getElementById("example")
    );
});

这有助于编译（无错误），但会产生以下结果：

var React = require("react");
var ReactDOM = require("react-dom");

这对您没有帮助，因为您在运行时没有

require

我还没有设法让它工作，我写这个答案只是为了通过我尝试过的，并给你一个选择：使用模块系统。
例如，使用：

配置（以html为例）：

然后在

.tsx

文件中：

import React = require("react");
import ReactDOM = require("react-dom");

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("example")
);

import React=require（“React”）；
导入ReactDOM=require（“ReactDOM”）；
ReactDOM.render(
,
document.getElementById（“示例”）
);

模块系统将按照正确的顺序为您加载内容，导入过程非常简单。

您不必使用SystemJS，还有其他模块加载器。当使用模块加载器加载脚本时，应使用您正在使用的

import

语句（

amd

，

system