typescript vite 静态资产 - TypeScript (1)

📌 相关文章

📜 typescript vite 静态资产 - TypeScript (1)

📅 最后修改于: 2023-12-03 15:35:24.265000 🧑 作者: Mango

使用 TypeScript 和 Vite 加载静态资产

概述

现代 Web 开发作为一个全栈开发工程师，常常会涉及到前端和后端技术，其中前端技术框架视图依赖于很多静态资源，例如图片、 CSS、 JS 文件等。如何统一加载这些静态资源？在本教程中，我们将使用 TypeScript 和 Vite 构建工具来实现这一目的。

Vite 简介

Vite 是一个基于 esbuild 的开发服务器和构建工具，它使用原生 ES 模块作为开发依赖，能够显著提高开发体验和构建速度。Vite 还提供了一套生产环境构建方案，将构建结果优化到最佳大小和体验。

静态资产加载

我们建议将静态资产存储在一个独立的目录中，例如 public 目录，这个目录会被 Vite 自动处理，且其中的所有文件会在构建时被复制到输出目录中。

我们可以通过以下方式在我们的 HTML 文件中使用这些静态文件：

<img src="/public/logo.png" alt="Logo" />

在代码中以相对路径使用 CSS 或 JS 文件：

/* public/styles.css */
body {
  background-image: url("../public/bg.png");
}

<!-- index.html -->
<head>
  <link rel="stylesheet" href="/public/styles.css" />
</head>
<body>
  <script src="/public/app.js"></script>
</body>

Vite 会自动处理这些请求并返回正确的静态资产。

TypeScript 集成

为了使用 TypeScript，我们需要在我们的项目中添加 TypeScript 依赖项：

npm install --save-dev typescript @types/node @types/react @types/react-dom

Vite 支持 tsconfig.json 文件，可以使用 TypeScript 来编写所有代码。我们需要做的就是在项目根目录中创建一个名为 tsconfig.json 的文件，并通过以下方式进行配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src",
    "types",
    "public"
  ]
}

在我们的代码中，我们可以使用以下方式引入静态文件：

import React from 'react';
import './styles.css';

function App() {
  return (
    <div>
      <img src="/public/logo.png" alt="Logo" />
    </div>
  );
}

export default App;

总结

在本文中，我们介绍了如何使用 TypeScript 和 Vite 来加载静态资产。希望本文对你有所帮助。