TypeScript编译后Plotly依赖失效，如何自动替代手动修改导入？

方法1：通过TypeScript路径映射修正导入路径 #

修改你的tsconfig.json，添加baseUrl和paths配置，让TypeScript编译时自动替换Plotly的导入路径：

{
  "compilerOptions": {
    // 保留你原有的其他配置（比如target、outDir等）
    "baseUrl": "./",
    "paths": {
      "plotly.js-dist-min": ["node_modules/plotly.js-dist-min/plotly.min.js"]
    },
    "moduleResolution": "node",
    "esModuleInterop": true,
    "module": "ESNext" // 确保模块系统适配浏览器环境
  },
  // 其他配置（include、exclude等）
}

配置后，你TypeScript代码里的原导入语句import Plotly, { PlotlyHTMLElement } from "plotly.js-dist-min";在编译后会自动转换为指向node_modules中文件的相对路径，无需手动修改。

方法2：自动复制Plotly文件到dist目录 #

如果希望把Plotly文件打包到dist目录（避免依赖node_modules），可以使用copyfiles工具实现自动复制：

1. 安装依赖：

npm install copyfiles --save-dev

2. 修改package.json的scripts，合并编译和复制命令：

{
  "scripts": {
    "build": "tsc -p . && copyfiles node_modules/plotly.js-dist-min/plotly.min.js dist/"
  }
}

3. 修改TypeScript中的导入语句为指向dist目录的相对路径：

import Plotly, { PlotlyHTMLElement } from "./plotly.min.js";

之后执行npm run build，TypeScript会先编译代码，再自动把plotly.min.js复制到dist目录，编译后的JS文件导入路径会自动匹配。

补充：确保类型支持正常 #

如果遇到类型提示问题，安装Plotly的官方类型定义：

npm install @types/plotly.js --save-dev

这样你的TypeScript代码可以获得完整的Plotly类型支持，避免编译报错。

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