如何与一个普通的HTML网站共享一个反应项目的打字稿功能？

Question

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

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

myFunction.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：导出未定义”。

我究竟做错了什么？

Answer 1

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

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

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

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

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

最后，您需要在要使用它的位置import该功能。

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

ES6模块

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

Answer 2

export关键字创建一个模块，该模块只能与模块系统（如webpack）一起使用。

要么使用一个模块系统或丢弃export创建一个用于创建全局名称一个正常的文件。