TypeScript编译正常但生成的JavaScript导入Litepicker模块失败

错误根因 #

你当前导入的./node_modules/litepicker/dist/types/index是仅用于TypeScript编译阶段的类型声明文件，不属于可执行的JavaScript代码，不会被暴露给浏览器访问，所以请求返回404。
你之前改用declare let Litepicker: any的方案能正常运行，是因为HTML中提前通过<script>标签将Litepicker挂载到了全局作用域，但缺点是丢失了类型提示。

解决方案1：保留现有HTML全局引入方式（推荐，符合你当前的使用习惯） #

不需要修改HTML结构，仅需修改TS代码，用仅导入类型的语法获取类型提示，编译后导入语句会被自动移除，不会出现在最终JS文件中：

// 仅导入Litepicker的类型，编译后这行代码会被完全删除
import type Litepicker from 'litepicker';

// 声明全局作用域上的Litepicker类型，获得完整类型提示
declare global {
  interface Window {
    Litepicker: new (options: ConstructorParameters<typeof Litepicker>[0]) => Litepicker;
  }
}

// 直接使用全局挂载的Litepicker，既有类型提示，编译后也无多余导入
new window.Litepicker({
  element: document.getElementById('picker'),
});

这个方案不需要修改你的tsconfig配置，编译后的JS代码和你之前可用的版本几乎一致，仅保留实例化逻辑，不会产生额外的import请求。

解决方案2：纯ES模块引入方式 #

如果你不想在HTML中提前引入Litepicker的脚本，完全通过ES模块导入使用，需要做两处修改：

1. 修改test.ts的导入路径，指向实际的可执行JS文件：

// 导入实际的运行时JS文件，而非类型文件
import Litepicker from './node_modules/litepicker/dist/litepicker.js';

new Litepicker({
  element: document.getElementById('picker'),
});

2. 在tsconfig.json中补充模块相关配置，确保TS识别ES模块导入规则：

{
  "compilerOptions": {
    "target": "es2020",
    "sourceMap": false,
    "module": "ESNext",
    "moduleResolution": "Bundler"
  }
}

3. 移除HTML中提前引入Litepicker的<script>标签，避免重复加载。

内容的提问来源于stack exchange，提问作者rettiseert