创建一个可以构建的前端项目
1. 为什么需要构建项目？构建项目的好处
- 提高兼容性：
转译现代 JavaScript（如 ES6+）为兼容性更好的代码（如 ES5），支持旧浏览器。
- 模块化支持：
将模块化代码（如 ES Modules 或 CommonJS）打包为浏览器兼容的文件。
- 自动化
2. 构建项目的常用方法
```
以下是一些常用的构建工具及方法：
Vite：
现代的前端构建工具，支持快速开发和构建。
内置支持 Vue、React 等框架，速度极快。
Webpack：
功能强大的模块打包工具，灵活性高，可定制性强。
适合复杂项目。
Parcel：
零配置打包工具，简单易用，适合小型到中型项目。
Rollup：
专注于 JavaScript 和库的打包，支持 Tree Shaking。
适合开发 NPM 库。
Gulp：
基于任务流的工具，适合对单独文件执行特定操作（如编译、压缩等）。
ESBuild：
超高速构建工具，适合对性能有高要求的项目。
```
3. 哪些项目不需要构建项目
```
简单静态网站：
仅包含 HTML、CSS 和 JavaScript 的静态页面（如个人简历页、小型信息展示页）。
无需模块化的项目：
代码不涉及模块化、不需要编译现代 JavaScript 特性的情况。
无第三方依赖的项目：
不使用 npm、包管理器或框架的项目。
未使用构建工具的历史项目：
例如基于 jQuery 或直接编写 DOM 操作的传统项目。
小型 Demo 或原型：
```
4. Demo
4.1 vite
mkdir svg-use && cd svg-use
yarn init -y
yarn add vite
yarn add react react-dom # React 项目
yarn add vue # Vue 项目
yarn add axios # HTTP 请求库
我选择的是 yarn add vue
// 安装开发依赖
yarn add -D typescript eslint prettier
我选择的是 yarn add -D eslint prettier
创建项目结构, 和vite的配置文件
|-public
|-src
|-main.js
├── index.html
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖
配置构建工具 vite.config.js 使用 Vite (适用于 React/Vue/Vanilla JS 等项目)
vite.config.js
import {defineConfig} from 'vite';
export default defineConfig({
root: './',
publicDir: 'public', // 默认是 public 文件夹
build: {
outDir: 'dist'
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
import { createApp } from 'vue'; // 导入 Vue 的 createApp 函数
import App from './App.vue'; // 导入 App.vue 主组件
// 创建 Vue 应用并挂载到 #app DOM 节点
createApp(App).mount('#app');
App.js
<template>
<div id="app">
<h1>Welcome to My Vue App!</h1>
<p>This is the main application component.</p>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
#app {
font-family: Arial, sans-serif;
text-align: center;
color: #333;
}
</style>
安装 @vitejs/plugin-vue
在项目中添加 Vue 插件：
bash
复制代码
yarn add @vitejs/plugin-vue --dev
vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 引入 Vue 插件
export default defineConfig({
plugins: [vue()], // 添加插件
root: './',
publicDir: 'public',
build: {
outDir: 'dist'
}
});
yarn dev
