如何使用 TypeScript Playground 导入库答案

【问题标题】：How to import library with TypeScript Playground如何使用 TypeScript Playground 导入库
【发布时间】：2020-07-05 20:23:25
【问题描述】：

TypeScript Playground 似乎并不反对这个导入：

import * as _ from "underscore";

直到您尝试使用它，例如：

const equalResult = _.isEqual('ABC', '123');

然后，它会生成错误：

[ERR]: Executed JavaScript Failed:
[ERR]: Cannot use import statement outside a module

游乐场似乎理解这个库，因为它提供了 JSDoc，所以我认为这可以工作，但是如何？

【问题讨论】：

不是您问题的答案，但如果您还必须处理 NPM 导入，我建议您不要使用 TS Playground。我会改用 StackBlitz 或 CodePen（例如）。
仅供参考，其他选项不是答案。 TS Playground 是有目的的，你不需要 React Web 应用程序来运行 5 行代码。简单是它的主要优势。
TS Playground 的重点是重现编译错误或其他类型问题，而不是实际运行代码。

标签： typescript typescript-playground

【解决方案1】：

TypeScript Playground 并不是一个成熟的沙盒解决方案。它只是一个不需要依赖的简单类型浏览器。

对于您的用例，我建议改用CodeSandbox。它带有一大堆 TypeScript 模板，在创建沙箱时可供选择。 TypeScript Playground 还有一个导出菜单，您可以在其中直接在 CodeSandbox 中打开代码。

UI 是基于 VS Code 的，所以如果你习惯了，你会感到宾至如归。

【讨论】：

代码沙箱用于前端的东西。我们后端开发人员不明白这一点。
@user14492 不，不是。这是 NestJS 的后端示例：codesandbox.io/s/w1xru

【解决方案2】：

如果“导入”是指使用import 包含可以在运行时访问的 npm 包，那么这不是 TypeScript Playground 的功能，很遗憾；它用于测试语言和编译器的功能。

如果您想包含 npm 包、捆绑程序等，则需要使用沙盒环境；结帐CodeSandbox，正如其他人所建议的那样。

关于您的特定错误：

[ERR]: Executed JavaScript Failed:
[ERR]: Cannot use import statement outside a module

这是由于您当前的配置，而不是 TypeScript Playground 缺少包支持。默认情况下，您的 .js 输出可能如下所示：

import * as _ from "underscore";
const equalResult = _.isEqual('ABC', '123');

这是因为 Playground 中的默认 module 设置设置为 ESNext。

例如，如果我们将其更改为CommonJS，我们会得到：

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? 

// A bunch more lines .....

const _ = __importStar(require("underscore"));
const equalResult = _.isEqual('ABC', '123');

现在我们得到另一个错误，明确告诉我们我们的包不可用：

[ERR]: "Executed JavaScript Failed:" 
[ERR]: Check dependency list! Synchronous require cannot resolve module 'underscore'. 
       This is the first mention of this module!

虽然 Playground 足够智能，可以自动导入 import 语句的类型，但它不支持除此之外的外部模块。

【讨论】：

【解决方案3】：

我来到这里试图解决同样的问题，然后继续挖掘，这是我想出的最佳解决方案：

如果你去https://jsfiddle.net/，你可以选择“Typescript”作为你的语言和“underscore.js”作为你的库，它应该创建一个类似于游乐场的环境。语言和库可以通过点击JFiddle网站中JS文本框上方的语言类型来选择。

不回答您最初的问题，但对某人来说可能是可行的解决方法。

【讨论】：