如何为Preact简易模板添加TypeScript与SCSS支持？

完全可以给官方的「simple」模板扩展TypeScript和SCSS支持，以下是具体步骤：

1. 初始化simple模板项目 #

首先创建基础的simple模板项目：

npx create-preact-app my-ts-preact-app --template simple
cd my-ts-preact-app

2. 安装TypeScript相关依赖 #

安装TypeScript核心包、Preact的TypeScript预设以及兼容的类型声明：

npm install -D typescript @types/react @preact/preset-typescript

注：@types/react是因为Preact的类型系统兼容React类型，无需额外的Preact专属类型包

3. 创建并配置TypeScript配置文件 #

在项目根目录新建tsconfig.json，写入以下配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

4. 迁移JS文件为TS/TSX格式 #

• 将src/index.js重命名为src/index.tsx
• 将src/app.js重命名为src/app.tsx

修改src/app.tsx，添加基础类型声明：

export default function App(): JSX.Element {
  return (
    <div class="app">
      <header>
        <h1>Preact + TypeScript + SCSS</h1>
      </header>
    </div>
  );
}

5. 添加SCSS支持 #

安装Sass预处理器：

npm install -D sass

将src/style.css重命名为src/style.scss，然后修改src/index.tsx中的导入路径：

import './style.scss';

现在你可以在style.scss中使用SCSS语法编写样式了。

6. 验证项目运行 #

启动开发服务器测试：

npm run dev

如果能正常打开页面，再测试生产构建：

npm run build

完成以上步骤后，你就得到了一个和官方simple模板结构一致、同时支持TypeScript和SCSS的轻量Preact项目。

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