Question

这是我的代码：

import AddToCartBtn from "./AddToCartBtn";
import * as React from "react";
import * as ReactDOM from "react-dom";

declare var document:Document;
var _handler : __React.MouseEventHandler;

ReactDOM.render(<AddToCartBtn clickHandler={_handler}></AddToCartBtn>, document.getElementById("bd"));

并编译为js，如：

define(["require", "exports", "./AddToCartBtn", "react", "react-dom"], function (require, exports, AddToCartBtn_1, React, ReactDOM) {
    var _handler;
    ReactDOM.render(React.createElement(AddToCartBtn_1.default, {"clickHandler": _handler}), document.getElementById("bd"));
});

它是一个定义函数，不起作用。我如何获得require函数？

Answer 1

您正在使用--module（或-m）设置为amd进行编译。你应该使用commonjs。

Answer 2

预期定义功能。您需要在全局范围内定义需要它才能工作。根据您的设置，有各种方法可以实现这一点。我一直使用下面列出的方法：

通常可以通过html中的脚本标记导入require来完成（给定反应的使用，我假设你的目标是浏览器）。假设您的ts文件编译为main.js.此示例直接来自RequireJS docs

<script data-main="main" src="require.js"></script>

另一种选择是在其后的不同脚本标签中调用require：

<script src="require.js"></script>
<script>
    require(["main"]);
</script>

Answer 3

只需将tsconfig.json设置切换为：

{ "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "commonjs", "removeComments": false, "sourceMap": true, "jsx": "react" } }

然后，您将模块系统设置为commonjs，这是打字稿的默认模块系统。

如何在打字稿中定义require函数

3 个答案: