大前端时代，怎能不懂自建脚手架？（1）

前言：听说不会做脚手架的前端不是好前端，本系列带你从0到1创建一个属于个人的脚手架，适合快速创建模板项目

最终完成效果可以点击查看 npm 包：create-tpl

1、梳理逻辑

0. 开发脚手架的模板一般有两种方式：第一种是直接将模板放置到某个仓库中，直接进行拉取克隆；第二种是将模板放置到项目本地，直接复制即可。这里我们采用 create-vite 的方式，使用第二种方式放置到本地再进行复制
1. 整理文件夹：将模板放置到本地后，将对应模板文件夹名称进行整理合并，生成对应的 json 格式进行读取
2. 读取参数：读取输入命令后，输入或选中的参数
3. 复制文件夹：通过参数判断需要生成的模板文件夹，生成到指定位置
4. 输出信息：最后一步输出信息，给用户查看是否生成成功的提示

逻辑梳理完成后，就可以开始我们项目的创建和编写了

2、初始化项目

0. 创建文件夹，输入命令 npm init -y

   

1. 右键生成一个 .editorconfig 文件

   

2. 在根目录下创建一个 index.js，这一步是为了创建命令后，执行指向的我们的 dist/index.js 文件

   #!/usr/bin/env node
   ​
   import './dist/index.js'
   

3. 在 package.json 中添加两个字段，一个将引入模式设置为 ESM，另一个是设置我们的自定义命令 test

   {
     // ...
     "type": "module",
     "bin": {
       "test": "index.js"
     },
   }
   

4. 此时我们再创建一个 gulpfile.js，这一步是为了帮助我们将多个编写的文件进行打包成一个，并进行压缩，同时我们可以使用 TS，这一步大家直接粘贴即可，因为不是我们主题的重点，效果大概是将我们的 TS 文件编译成 JS 并输出到 dist 文件夹中

   import gulp from "gulp"
   import ts from "gulp-typescript"
   import clean from "gulp-clean"
   import jsminfy from "gulp-uglify"
   import chalk from "chalk"
   ​
   const tsProject = ts.createProject('tsconfig.json');
   const FOLDER = "./src"
   const OUT_FOLDER = "./dist"
   const TS_FILE_PATH = FOLDER + "/**/*.{ts,tsx}"
   const NOT_TS_FILE_PATH = FOLDER + "/**/*.!(*ts|*tsx)"
   ​
   function handlerTs () {
     let handler = gulp.src(TS_FILE_PATH).pipe(tsProject()).js
     if (process.env.NODE_ENV === 'production') {
       handler = handler.pipe(jsminfy())
     }
     return handler.pipe(gulp.dest(OUT_FOLDER))
   }
   ​
   function handlerNotTsFile () {
     return gulp.src(NOT_TS_FILE_PATH)
       .pipe(gulp.dest(OUT_FOLDER))
   }
   ​
   const cleanFolder = function () {
     return gulp.src('./dist', { allowEmpty: true })
       .pipe(clean())
   }
   ​
   const startWatch = function () {
     // 开发环境下开启监听
     if (process.env.NODE_ENV === 'development') {
       gulp.watch(TS_FILE_PATH, handlerTs)
       gulp.watch(NOT_TS_FILE_PATH, handlerNotTsFile)
       console.log(`\n${chalk.bgRed(" watch ")} start watching...\n`);
     } else {
       console.log(`\n${chalk.bgBlue(" success ")} build successful.\n`);
       // 安全退出
       return Promise.resolve()
     }
   }
   ​
   gulp.task('default', gulp.series(cleanFolder, handlerTs, handlerNotTsFile, startWatch));
   

5. 初始化 TS 配置文件，创建 tsconfig.json

   {
     "compilerOptions": {
       "outDir": "dist",
       "target": "ES2020",
       "module": "ES2020",
       "moduleResolution": "Node",
       "strict": true,
       "declaration": false,
       "sourceMap": false,
       "isolatedModules": true,
       "esModuleInterop": true,
       "paths": {
         "@src/*": ["./src/*"]
       },
     },
     "include": ["src"],
     "exclude": ["template"]
   }
   

6. 创建文件夹 src ，并创建初始的 ts 文件 index.ts 到 src 下，此时你的文件夹应该跟我一样

   

3、下载依赖

如果速度慢，可以使用 cnpm 进行下载

npm i typescript gulp gulp-typescript gulp-clean gulp-uglify chalk cross-env

4、进行测试

4.1 设置命令

设置 package.json 的 script 字段：

{
  "scripts": {
    "watch": "cross-env NODE_ENV=development gulp"
  },
}

4.2 测试

执行刚刚设置的命令：

npm run watch

你可以看到如下的监听窗口界面，以及自动生成的 dist 文件夹：

4.3 生成全局命令

执行脚本，可以看到 Hello world! 即为成功（你已成功跨出第一步） ：

npm link
cra 

5、存储仓库

1. 在文件夹中创建一个 .gitignore 文件

   node_modules/
   dist/
   

2. 使用 git 推送到远程即可，本仓库点击这里可以查看，此时仓库列表如下：

   

6、总结

第一章节主要讲解了脚手架的基础逻辑，以及如何初始化项目和链接命令去使用执行脚本，在下一个章节，我们将正式开始编码！