yy-web-scaffold-cli

概述

用于构建 web 开发脚手架的 cli 工具，支持的脚手架类型包括目前主流的 Vue 和 React，同时支持它们的 js 和 ts 版本，可以满足你的任何需要

使用方式:

1. npm install yy-web-scaffold-cli -g 或 yarn global add yy-web-scaffold-cli
2. yy-web-scaffold-cli create <your project name>

详述

下面是对工具集中每一个脚手架的具体详细介绍，可以根据自己的需求按需取用~

【js 版】Vue2

简介

该项目是基于Webpack4搭建的Vue2脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css 新语法特性
7. 集成了 vuex
8. 集成了 vue-router
9. 集成 axios
10. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量

使用

1. yarn dev 开发
2. yarn build 打包
3. yarn build:report 打包并查看报告

【ts 版】Vue2

简介

该项目是基于Webpack4搭建的Vue2脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css 新语法特性
7. 支持 typescript
8. 集成了 vue-router
9. 利用 vuex-module-decorators 集成了 vuex
10. 集成 axios
11. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量

使用

1. yarn dev 开发
2. yarn build 打包
3. yarn build:report 打包并查看报告

【js 版】Vue3

简介

该项目是基于Webpack5搭建的Vue3脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css3 新语法
7. 集成 vue-router4
8. 集成 vuex4
9. 集成 axios
10. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量

使用

1. yarn
2. yarn dev: 开发
3. yanr build: 打包

【ts 版】Vue3

简介

该项目是基于Webpack5搭建的Vue3脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css 新语法特性
7. 支持 typescript
8. 集成了 vue-router4
9. 集成了 vuex4
10. 集成 axios
11. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量

使用

1. yarn dev 开发
2. yarn build 打包
3. yarn build:report 打包并查看报告

【js 版】React16

简介

该项目是基于Webpack5搭建的React16脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css3 新语法
7. 集成 react-router-dom
8. 集成 axios
9. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量

使用

1. yarn
2. yarn dev: 开发
3. yanr build: 打包

【ts 版】React16

简介

该项目是基于Webpack5搭建的React16脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css3 新语法
7. 集成 react-router-dom
8. 集成 axios
9. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量
10. 支持 typescript

使用

1. yarn
2. yarn dev: 开发
3. yanr build: 打包

【js 版】React17

简介

该项目是基于Webpack5搭建的React17脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css3 新语法
7. 集成 react-router-dom
8. 集成 axios
9. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量

使用

1. yarn
2. yarn dev: 开发
3. yanr build: 打包

【ts 版】React17

简介

该项目是基于Webpack5搭建的React17脚手架，包含的功能如下:

1. 热模块更新(HMR)
2. 支持 scss 语法
3. 图片资源的引入
4. 支持 js 新版本语法
5. 支持对打包构建产物的分析
6. 支持 css3 新语法
7. 集成 react-router-dom
8. 集成 axios
9. 集成 lint-staged、husky、commitlint、eslint、prettier 工具链，用于规范代码风格与提高代码质量
10. 支持 typescript

使用

1. yarn
2. yarn dev: 开发
3. yanr build: 打包

lerna-scaffold

简介

基于 lerna 搭建的脚手架，集成了

• husky
• commitlint
• prettier
• pnpm

cra-rewired

简介

基于 react 官方的 cra 脚手架，利用 customize-cra 和 react-app-rewired 进行自定义扩展

结语

如果你对该工具有任何建议，那么欢迎提 issue ! ^_^

最后的最后，如果你喜欢这个项目，请给一个 star⭐ 吧！