时间戳

首页 > 解决方案 > Typescript 不会按原样发出导入语句

javascript - Typescript 不会按原样发出导入语句

问题描述

我index.html只导入一个脚本<script type="module" src="./index.js"></script>

顶部index.ts是现在标准的导入语句

import { PieChart } from "./pie-chart.js";
import { ChartLegend } from "./chart-legend.js";

但是 index.ts，当编译为 index.js 时，import 语句被完全删除，取而代之。我tsconfig.json的设置为

        "target": "ES2020",
        "module": "ESNext",

但无论“module”是否设置为 ES6、ES2015、ES2020 或 ESNext，它们的工作方式都是一样的。

浏览器现在本机理解 import 语句，并将正确导入文件（假设 .js 扩展名存在并且路径正确）。我通过将这些导入语句复制粘贴到生成的 .js 文件中进行了尝试，一切都亮了。

Typescript（版本 4.0.2）如何/为什么不能发出导入？

标签： javascripttypescriptmoduleecmascript-next

解决方案

如果导入的项目仅用作类型，Typescript 会从文件中删除导入。

import { PieChart } from "./pie-chart.js";

const pie = document.querySelector("pie-chart") as PieChart;

不会导致发出导入。但是，您可以使用“出于副作用”导入模块

import "./pie-chart.js";

并且将发出导入。你也可以两者都做。

import { PieChart } from "./pie-chart.js";
import "./pie-chart.js";

const pie = document.querySelector("pie-chart") as PieChart;

但这对于任何显着规模的应用程序可能都无法很好地扩展。

推荐阅读