%20(2).svg)
项目简介
本项目是基于Webpack和TypeScript构建的React项目，集成了Less资源管理和完整的开发流程。采用模块化开发，以Webpack为模块打包工具、TypeScript为编程语言、React为前端框架、Less为CSS预处理器。项目配置完善，覆盖代码管理、资源管理、测试、构建等环节，适合前端开发入门与参考。
项目的主要特性和功能
1. 核心技术栈
- Webpack：负责将各模块打包成可在浏览器运行的静态资源。
- TypeScript：提供静态类型检查和强大类型系统，提升代码可读性与可维护性。
- React：提供高效的组件化开发方式，提高开发效率和代码质量。
- Less：提供变量、混合、函数等高级功能，便于样式管理。
2. 项目结构
采用标准目录结构，src存源代码，dist存打包后的静态资源，public存公共文件。
3. 资源管理
支持对React组件和Less样式的管理，通过Webpack的loader配置处理各类资源，包括图片、字体等静态资源。
4. 开发流程
- Git版本管理：用Git作为版本管理工具，借助
commitlint和commitizen实现Git Commit规范化和自动化。 - 热更新：通过Webpack的
devServer实现热更新和实时预览，提高开发效率。
5. 构建流程
通过Webpack的production配置构建项目，支持代码压缩和优化，生成可用于生产环境的静态资源。
6. 测试
支持代码的单元测试，通过配置Jest等测试工具实现代码全面覆盖和自动化测试。
安装使用步骤
1. 项目初始化
bash
mkdir demo
cd demo
npm init
git init
2. 安装依赖
安装React和Babel：
bash
npm i -S react react-dom
npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
安装Webpack及相关插件：
bash
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i -D babel-loader style-loader css-loader
安装TypeScript及相关类型定义：
bash
npm i -D typescript ts-loader @types/node @types/react @types/react-dom
安装Less及相关Loader：
bash
npm i -D less less-loader
3. 配置Babel
在项目根目录创建.babelrc文件：
json
{
"presets": ["@babel/react", "@babel/env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
4. 配置Webpack
在项目根目录创建webpack.config.js文件：
```javascript
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = { entry: "./src/index.tsx", output: { path: path.join(__dirname, "/dist"), filename: "js/[name].[hash:8].js", }, devServer: { port: 8000, }, module: { rules: [ { test: /.tsx?$/, exclude: /node_modules/, loader: "babel-loader", }, { test: /.css$/, use: ["style-loader", "css-loader"], }, { test: /.less$/, use: [ "style-loader", { loader: "css-loader", options: { importLoaders: 2, sourceMap: true, }, }, { loader: "less-loader", options: { sourceMap: true, }, }, ], }, ], }, resolve: { extensions: [".tsx", ".ts", ".jsx", ".js"], alias: { "@components": path.resolve(__dirname, "./src/components"), "@constants": path.resolve(__dirname, "./src/constants"), }, }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, "src/index.html"), }), ], }; ```
5. 配置TypeScript
在项目根目录创建tsconfig.json文件：
json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "Node"
}
}
6. 启动项目
在package.json中添加启动脚本：
json
"scripts": {
"start": "webpack serve --mode development --open --hot",
"build": "webpack --mode production"
}
运行以下命令启动项目：
bash
npm start
7. 提交代码
配置Git Hooks和Commit规范：
bash
npm install husky -D
npm set-script prepare "husky install"
npm run prepare
npm i @commitlint/cli @commitlint/config-conventional -D
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npm install commitizen -D
npm install cz-git -D
在项目根目录创建commitlint.config.js文件：
javascript
module.exports = {
extends: ["@commitlint/config-conventional"],
rules: {},
prompt: {
messages: {
type: "选择你要提交的类型 :",
scope: "选择一个提交范围（可选）:",
customScope: "请输入自定义的提交范围 :",
subject: "填写简短精炼的变更描述 :\n",
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
footerPrefixsSelect: "选择关联issue前缀（可选）:",
customFooterPrefixs: "输入自定义issue前缀 :",
footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
confirmCommit: "是否提交或修改commit ?",
},
types: [
{ value: "feat: 特性", name: "特性: 新增功能" },
{ value: "fix: 修复", name: "修复: 修复缺陷" },
{ value: "docs: 文档", name: "文档: 文档变更" },
{ value: "style: 格式", name: "格式: 代码格式（不影响功能，例如空格、分号等格式修正）" },
{ value: "refactor: 重构", name: "重构: 代码重构（不包括 bug 修复、功能新增）" },
{ value: "perf: 性能", name: "性能: 性能优化" },
{ value: "test: 测试", name: "测试: 添加疏漏测试或已有测试改动" },
{ value: "chore: 构建", name: "构建: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）" },
{ value: "ci: 集成", name: "集成: 修改 CI 配置、脚本" },
{ value: "revert: 回退", name: "回退: 回滚 commit" },
{ value: "build: 打包", name: "打包: 项目打包发布" },
],
useEmoji: true,
},
};
提交代码：
bash
npm run commit
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】