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

要使用原始的@UtilityClass public class CycleChecks { /** * Take a root object and a function to get its edges to see if there are any cycles. * * @param root root object * @param adjacentFunction a function that would take an object and return an iterable of objects that are adjacent to it. * @param <T> an object that has edges * @return has a cycle. */ public <T> boolean isCyclic(T root, Function<T, Iterable<T>> adjacentFunction) { final Set<T> visited = new HashSet<>(); final Deque<T> recursion = new LinkedList<>(); final Deque<Node<T>> nodesToVisit = new LinkedList<>(); final Node<T> popRecursionNode = new Node<>(); nodesToVisit.add(new Node<>(root)); while (!nodesToVisit.isEmpty()) { final Node<T> frontOfQueue = nodesToVisit.pop(); if (frontOfQueue.isPopRecursion()) { recursion.pop(); continue; } T current = frontOfQueue.getObj(); if (recursion.contains(current)) { return true; } if (visited.contains(current)) { continue; } visited.add(current); recursion.push(current); for (T adjacent : adjacentFunction.apply(current)) { nodesToVisit.add(new Node<>(adjacent)); } nodesToVisit.add(popRecursionNode); } return false; } @Data private static class Node<T> { private final T obj; private final boolean popRecursion; public Node(T obj) { this.obj = obj; popRecursion = false; } public Node() { obj = null; popRecursion = true; } }文件，您需要做的是：

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

.js

然后，在该JavaScript文件的HTML文件的export const getTest = (test) => { // Change test object return test; };标记中，确保将<script>样式设置为type，如下所示：

module

最后，您需要在打算使用该功能的地方<script type="module" src="myFunction.js"></script>。

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

ES6 Modules

为使这一点最终清楚，这里有一个Plunkr以说明我的意思。

Answer 2

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

使用模块系统或删除export来创建用于创建全局名称的普通文件。

如何从React项目与常见的html网站共享打字稿功能？

2 个答案: