【源码】基于 React 和 TypeScript 的 FlyingCandy 脚手架

项目简介

Flying-Candy 是一个由 webpack 构建的 react + typescript 脚手架。因在 Vue2.6+ 项目引入 typescript 时问题众多，所以搭建此脚手架，以更好地结合 react 和 typescript 进行开发。该脚手架利用 Eslint 和 Prettier 规范代码风格、检测代码质量，借助 Webpack 及相关插件优化开发和生产环境。

项目的主要特性和功能

代码规范与质量检测

• Eslint：采用 ts 官方推荐的 Eslint，结合 Airbnb 规范等插件检测代码质量。
• Prettier：规范代码风格，支持保存自动修复，项目中的.vscode 文件夹会覆盖本地配置，优先使用项目配置。

构建工具配置

• Webpack 配置分离：用 webpack-merge 实现配置分离，公共配置放 common 文件，合并开发和生产环境配置。
• 跨平台环境变量：利用 cross-env 实现跨平台设置环境变量。
• loader 配置：支持多种文件类型处理，如用 sass-loader、css-loader 处理 scss 文件，file-loader 和 url-loader 处理图片和字体文件。
• 插件使用：
  • 生产环境：包含 html-webpack-plugin、copy-webpack-plugin、mini-css-extract-plugin 等，实现静态资源复制、css 单独打包、清除上次打包文件和去除未使用样式等功能。
  • 开发环境：使用 webpackbar、fork-ts-checker-webpack-plugin、friendly-errors-webpack-plugin 等，优化终端信息展示和错误提醒。
• 优化配置：使用 terser-webpack-plugin 压缩 js 代码，optimize-css-assets-webpack-plugin 压缩 css 代码，可研究 splitChunks 拆分包和提取公共 js。

持续集成

安装使用步骤

假设用户已经下载了本项目的源码文件，按以下步骤操作： 1. 安装依赖：在项目根目录下执行 yarn install 命令安装项目依赖。 2. 本地运行：执行 yarn serve 命令启动项目。 3. 打包：执行 yarn build 命令进行项目打包，生成生产环境下的静态文件。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】