1、手动创建 react 项目
- 创建 react-dome 目录，进入 react-dome目录
2、安装项目依赖
1、创建 package.json 文件
- 打开控制台执行 npm init -y 生成 package.json文件
2、安装 React React-dom（v18x版本）
- 执行 npm install react react-dom 指令
3、安装Webpack（v5版本）
- 执行 npm install webpack webpack-cli webpack-dev-server 指令
- 执行 npm install html-webpack-plugin 指令
4、安装TypeScript（v5版本）
- 执行 npm install typescript ts-loader 指令
- 执行 npm install @types/react @types/react-dom @types/node 指令安装 react、react-dom 、node的ts类型接口等
5、安装babel
- 执行 npm install babel babel-loader 指令
6、安装Less（v4版本）
- 执行 npm install less style-loader css-loader less-loader 指令
6、安装结果
3、目录结构
- 在根目录下创建 public 目录，用于存放项目本地文件
- 创建 /public/index.html文件，作为打包结果 HTML 模版文件
- 在根目录下创建 src 目录，用于存放项目文件
- 创建 /src/index.tsx文件，作为项目主入口文件
- 创建 /src/app.tsx文件，作为项目的主组件
- 创建 /src/global.less文件，作为项目全局样式文件
- 创建 /src/components目录，用于存放项目公共组件
- 创建 /src/images目录，用于存放项目图片
- 在根目录下创建 webpack.config.js 文件，用于管理 Webpack 相关配置
- 在根目录下创建 tsconfig.json 文件，用于管理 Typescript 相关配置
- 在根目录下创建 .babelrc 文件，用于管理 Babel 相关配置
4、代码补充
1、配置webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development", // 指定开发模式
entry: {
main: "./src/index.tsx", // 指定入口文件
},
output: {
path: path.resolve(__dirname, "dist"), //指定出口文件
filename: "js/chunk-[contenthash.js", // 由生成的内容产生的hash
},
resolve: {
// 配置模块如何解析
extensions: [".ts", ".tsx", ".js", ".jsx", ".json"], // 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
},
devServer: {
static: path.join(__dirname, "public"), // 静态文件目录，用于托管HTML文件等
open: true,
port: 8080,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
// 配置html-webpack-plugin
template: "./public/index.html", // 指定模版文件
filename: "index.html", // 包后的html文件名称
inject: "body", // 指定打包后的js插入到html的body
}),
],
module: {
rules: [
{
test: /\.(ts|tsx)$/, // 处理.ts/.tsx文件
loader: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
ues: ["style-loader", "css-loader"],
},
{
test: /\.less$/, // 处理less文件
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
exclude: /node_modules/,
},
],
},
};
2、配置tsconfig.json文件
以下为 tsconfig.json 常用配置，可根据项目需求选择相关配置
{
"compilerOptions": {
/* 基本选项 */
"target": "es5", // 指定 ECMAScript 目标版本，如："es3", "es5", "es6", "es2015", "es2016", "esnext" 等
"module": "es6", // 指定生成代码的模块系统，如："es6", "commonjs", "amd", "system", "umd", "es2015", "es2020"等
"lib": [], // 指定要包含在编译中的库文件列表，例如：["dom", "dom.iterable", "esnext"]
"allowJs": true, // 允许编译 JavaScript 文件
"checkJs": true, // 启用在 .js 文件中的 JSDoc 类型检查
"jsx": "preserve", // 指定 JSX 代码的生成："preserve", "react-native", 或 "react"
"declaration": true, // 生成对应的 ".d.ts" 文件
"declarationMap": true, // 生成对应的 ".d.ts.map" 文件以支持编辑器中的跳转
"sourceMap": true, // 生成对应的 ".map" 文件
"outDir": "./ts", // 指定输出目录，所有的输出文件将被放置在此目录下
"rootDir": "./", // 指定输入文件的根目录，用于控制输出目录结构
"composite": true, // 启用项目编译，用于构建项目间的依赖关系
"tsBuildInfoFile": "./", // 指定文件以存储增量编译信息，需要指定对应的文件路径
"removeComments": false, // 删除编译后的所有注释
"noEmit": true, // 不生成输出文件，只进行类型检查
"importHelpers": true, // 从 tslib 导入辅助工具函数，如 "__extends", "__rest", 等辅助函数
"downlevelIteration": true, // 当目标为 "ES5" 或 "ES3" 时，为迭代器提供完全支持
/* 严格的类型检查选项 */
"strict": true, // 启用所有严格的类型检查选项
"noImplicitAny": false, // 在表达式和声明上有隐含的 any 类型时报错
"strictNullChecks": true, // 严格的 null 检查
"strictFunctionTypes": true, // 函数类型的严格检查
"strictBindCallApply": true, // 严格的 bind/call/apply 检查
"strictPropertyInitialization": true, // 严格的属性初始化检查
"noImplicitThis": true, // 当 'this' 表达式值为 'any' 类型时报错
"alwaysStrict": true, // 以严格模式解析并为每个源文件写入 "use strict"
/* 额外的检查 */
"noUnusedLocals": true, // 报告未使用的局部变量错误
"noUnusedParameters": true, // 报告未使用的参数错误
"noImplicitReturns": true, // 不是所有代码路径都返回值时报错
"noFallthroughCasesInSwitch": true, // 报告 switch 语句的 case 无故贯穿
/* 模块解析选项 */
"moduleResolution": "node", // 选择模块解析策略，可能的值："node" 或 "classic"
"baseUrl": "./", // 用于相对模块名的基目录，指定解析非相对模块名的基准目录
"paths": {}, // 模块名到基于 'baseUrl' 的路径映射的列表，例如：{ "module": ["path/to/module"] }
"rootDirs": [], // 根文件夹列表，其组合内容表示运行时项目结构
"typeRoots": [], // 包含类型声明的文件夹列表，可以是例如 ["./typings", "./node_modules/@types"]
"types": [], // 需要包含的类型声明文件，例如：["node", "jest"]
"allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中默认导入
"esModuleInterop": true, // 启用esModule风格的导入支持
"preserveSymlinks": true, // 不解析符号链接的实际路径
/* Source Map 选项 */
"sourceRoot": "./", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
"inlineSources": true, // 将代码和 source maps 生成到一个文件中
/* 其它选项 */
"experimentalDecorators": true, // 启用实验性的装饰器支持
"emitDecoratorMetadata": true, // 为装饰器提供的类型元数据添加设计类型元数据支持
"skipLibCheck": false, // 跳过声明文件的类型检查，对声明文件 (.d.ts) 跳过类型检查
"forceConsistentCasingInFileNames": true, // 确保在引用文件时使用一致的大小写
"resolveJsonModule": true, // 允许 TypeScript 解析 JSON 模块
/* 插件选项 */
"plugins": [] // 插件的配置项，提供一个数组来配置插件
},
"include": ["src/**/*.ts"], // 指定要编译的文件夹和模式，例如：["src/**/*.ts"]
"exclude": ["node_modules"], // 指定编译过程中需要跳过的文件夹和模式
// "extends": "", // 指定要继承的另一个配置文件的路径
// "files": ["core.ts","sys.ts","types.ts"], // 指定要包含在编译中的单个文件列表
"references": [] // 用于配置项目引用，管理 TypeScript 项目之间的依赖关系
}
项目采用配置
3、配置.babelrc文件
{
"presets": ["@babel/preset-env"]
}
4、配置package.json文件
以下为 package.json 常用配置，可根据项目需求选择相关配置
{
"name": "react-dome", // 项目名称
"version": "1.0.0", // 项目版本
"description": "", // 项目描述
"keywords": "react typescript webpck less", // 项目关键字
"author": "前端小D", // 项目作者 string 或 {name,email,url}
"contributors": [], // 项目贡献者 string[] 或 {name,email,url}[]
"homepage": "", // 项目主页地址
"repository": "", // 项目仓库地址 string 或 {type,url}
"bugs": {}, // 项目提交bug地址 {url,email}
"main": "index.ts",
"scripts": { // 运行脚本
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
"license": "ISC", /*
表示该项目采用了ISC许可协议，这意味着任何人可以免费地获取、使用、复制、修改和分发该项目的源代码，只要他们在分发时保留原始的许可声明，并且不对用户提供任何担保，也不承担因使用软件产生的责任。这种许可方式鼓励代码的共享和再利用，是开源软件生态系统中的常见做法之一。
*/
"dependencies": { // 声明的是项目的生产环境中所必须的依赖包
/*
"css-loader": "7.1.2", // 固定版本号 在安装依赖时，只安装此固定版本
"less": "~4.3.0", // 波浪号 表示安装4.3.x，不会更改主版本号和次版本号
"less-loader": "^12.3.0", // 插入号 表示安装12.x的最新版本，不会更改主版本号
*/
"@types/node": "^24.0.12",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"css-loader": "^7.1.2",
"html-webpack-plugin": "^5.6.3",
"less": "^4.3.0",
"less-loader": "^12.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"style-loader": "^4.0.0",
"ts-loader": "^9.5.2",
"typescript": "^5.8.3",
"webpack": "^5.100.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-loader": "^10.0.0",
}
}
5、编辑 public/index.html 文件
6、编辑 src/index.tsx 文件
7、编辑 App.tsx 文件
8、创建 src/components/HelloWorld.tsx
5、结果
- 执行 npm run build 进行打包，在根目录下会生成 /dist 目录，
- 执行 npm start 指令，可直接运行项目，查看代码运行结果
扫一扫
1403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
