在Pug中引用TypeScript文件的问题及最佳实践咨询

1. TypeScript引用的最佳实践 #

是的，必须先将TypeScript编译为JavaScript后再在Pug文件中引用。浏览器本身无法直接解析TypeScript代码，直接引用.ts文件时，服务器会错误地将其识别为video/mp2t类型的MIME（这是服务器默认类型匹配的常见问题），最终导致加载报错。

2. TypeScript编译脚本配置 #

步骤1：配置tsconfig.json #

在项目根目录创建tsconfig.json文件，指定编译规则与输出目录，示例配置如下：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "outDir": "./dist/javascripts", // 编译后的JS文件输出到dist/javascripts目录
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["./javascripts/**/*.ts"] // 指定需要编译的TS文件所在目录
}

步骤2：添加npm编译脚本 #

在项目的package.json中添加编译脚本，方便快速执行编译操作：

{
  "scripts": {
    "build:ts": "tsc", // 执行单次编译
    "watch:ts": "tsc --watch" // 监听TS文件变化，自动重新编译
  }
}

运行编译命令：

• 单次编译：npm run build:ts
• 实时监听编译：npm run watch:ts

3. 编译到dist目录后的路径问题 #

不需要将Pug文件和CSS文件移到dist目录，解决路径报错的核心是调整资源引用路径，并配置服务器的静态文件映射：

调整Pug中的JS引用路径 #

修改你当前的Pug代码，将TS文件的引用替换为编译后的JS文件路径：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Autocomplete!</title>
    <link rel="stylesheet" href="/stylesheets/normalize.css">
    <link rel="stylesheet" href="/stylesheets/autocomplete.css">
    <script src="/dist/javascripts/autocomplete.js"></script> <!-- 修改为编译后的JS路径 -->
  </head>
  <body>
    <div class="app">
      <p>
        <input name="country">
      </p>
    </div>
  </body>
</html>

配置服务器静态目录 #

以Express服务器为例，同时将原静态资源目录和dist目录设置为静态文件目录，确保服务器能正确找到所有资源：

const express = require('express');
const app = express();

// 配置静态文件目录，优先读取dist目录，再读取原目录资源
app.use(express.static('dist'));
app.use(express.static('.'));

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