时间戳

首页 > 解决方案 > 如何将反应项目中的打字稿功能与常见的 html 网站共享？

javascript - 如何将反应项目中的打字稿功能与常见的 html 网站共享？

问题描述

我想将一个复杂的打字稿导出函数分享到一个简单的 HTML - javascript 网站

我尝试使用 npm tsc 将文件转换为 javascript，但生成的文件具有“导出”功能，会在浏览器控制台中创建错误。

我的函数.ts

export const getTest = (test: any) => {
    // Change test object
    return test;
};

生成 myFunction.js

Object.defineProperty(exports, "__esModule", { value: true });
exports.getTest = function (test) {
    // Change test object
    return test;
};

当我尝试在 HTML 文件中包含带有脚本标记的文件时，浏览器控制台实际上警告我“未捕获的 ReferenceError：未定义导出”。

我究竟做错了什么？

标签： javascripthtmlreactjstypescript

解决方案

为了使用原始myFunction.ts文件，您需要做的就是：

删除输入并将扩展名更改为.js：

export const getTest = (test) => {
    // Change test object
    return test;
};

然后，在<script>该 JavaScript 文件的 HTML 文件标记中，确保将属性设置type为module：

<script type="module" src="myFunction.js"></script>

最后，您需要import在您打算使用它的地方使用该功能。

只要您考虑浏览器兼容性，就应该这样做：

ES6 模块

为了最终明确这一点，这里有一个Plunkr来证明我的意思。

推荐阅读