如何将打字稿文件导入脚本标签

Posted 2023-03-13

【中文标题】如何将打字稿文件导入脚本标签

【英文标题】：How to import typescript file into script tag

【发布时间】：2021-04-14 10:24:35

【问题描述】：

我想要做的是将我的打字稿文件中的一个对象导入到脚本标签中

这就是我想做的事情

<div id="app-root"></div>
<script>
import config from '../config.ts';

let script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=$config.GOOGLE_MAPS_KEY`;

document.getElementsByTagName('script')[0].parentNode.appendChild(script);

</script>

我不确定这是否可行，但我的 react 应用程序正在 #app-root 中呈现，我正在尝试从我的配置中处理我的 API 密钥。当我运行它时没有任何反应，但如果我添加静态值，它似乎可以工作。

我期望发生的是将变量传递给脚本 src，脚本将成功执行。

【问题讨论】：

1.这是不可能的 2. 您可以将变量作为环境变量传递，并在运行时（开发环境）或构建时（生产环境）将其编译到索引模板中。请查阅 CRA 文档了解更多信息

【参考方案1】：

不，它不可能读取脚本标签中的 ts 文件（至少没有先将其编译为 js）。

但是，您可以做的是改用环境变量，并让 react-scripts 将其编译到您的模板中，就像您每次启动开发服务器或运行构建时所做的那样。

从这里开始：

https://create-react-app.dev/docs/adding-custom-environment-variables

首先，在我们项目的根目录下创建一个名为 .env 的 env 文件

接下来，让我们将环境变量添加到这个文件中：

REACT_APP_GOOGLE_MAPS_KEY=<your key>

最后，让我们修改 index.html 以引用我们的环境变量：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_KEY%"></script>

作为最后的想法，您可以在需要的地方以首选的反应方式包含您的谷歌地图依赖项，而不是遇到所有这些麻烦：通过使用反应插件。看一下这个。它将为您加载/卸载 api，并且您可以在加载 api 时从配置中传递您的密钥：

https://www.npmjs.com/package/@react-google-maps/api

【参考方案2】：

typescript 文件需要编译/转换为 JS（转换为 .js 文件）才能在浏览器中使用。

您可以在这里在线编译您的 TS 文件：https://www.typescriptlang.org/play 并将输出复制到 .js 中

或

通过命令行安装（假设你在 Windows 上）

npm install typescript // add -g if you want to install it globally
cd intoYourFolder // change directory to the folder where you have the .ts file
tsc *.ts // this will compile all typescript files in the directory
tsc yourFile.ts // this will compile only a specific file