如何配置PIXI.js+TypeScript+Live Server环境 实现自动编译与代码提示

一、现有纯JS项目快速获取智能提示（无需修改运行代码） #

如果你暂时还不想迁移TS，只想先获得代码补全提示，按以下步骤配置即可：

• 项目根目录执行命令安装PIXI类型包：

npm install pixi.js --save-dev

• 根目录新建jsconfig.json文件，写入以下配置：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "checkJs": true
  },
  "include": ["./**/*.js"]
}

• 根目录新建类型声明文件global.d.ts，声明全局PIXI变量：

declare const PIXI: typeof import('pixi.js')

配置完成后重启VS Code，即可获得完整的PIXI代码补全和类型提示。

二、迁移TypeScript+免手动编译最优配置 #

推荐用Vite作为构建工具，天然支持TS自动编译、热更新，无需任何手动编译操作，配置步骤如下：

1. 初始化项目依赖

# 初始化package.json（已有可跳过）
npm init -y
# 安装所需依赖
npm install typescript vite pixi.js --save

2. 根目录新建tsconfig.json配置文件：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true
  },
  "include": ["src"]
}

3. 调整项目结构：

• 新建src目录，将原有的js代码移入，可逐一把后缀改为.ts完成迁移，allowJs配置支持JS和TS文件共存，可逐步迁移
• 根目录的index.html中删除原有PIXI的CDN引入，添加入口脚本引用：

<script type="module" src="/src/main.ts"></script>

4. 在package.json中添加运行脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

5. 运行开发服务：

npm run dev

后续修改TS文件会自动编译、热更新，完全不需要手动执行编译命令，比原有Live Server开发效率更高。

备选轻量方案（无需更换原有Live Server工作流） #

如果不想引入Vite，仅需要TS自动编译为JS供原有Live Server使用，可直接用TS自带的监听模式：

• 安装typescript依赖

npm install typescript --save-dev

• tsconfig.json中配置输出目录和开启JS兼容：

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "./dist",
    "allowJs": true
  },
  "include": ["./src/**/*"]
}

• 启动监听模式，修改TS文件会自动编译到dist目录：

npx tsc --watch

原有Live Server指向编译后的JS文件即可正常运行。

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