📅  最后修改于: 2023-12-03 15:35:24.265000             🧑  作者: Mango
现代 Web 开发作为一个全栈开发工程师,常常会涉及到前端和后端技术,其中前端技术框架视图依赖于很多静态资源,例如图片、 CSS、 JS 文件等。如何统一加载这些静态资源?在本教程中,我们将使用 TypeScript 和 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 依赖项:
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 来加载静态资产。希望本文对你有所帮助。