从0到1使用TS实现一个node.js脚手架工具

1.新建一个项目文件夹,然后初始化一下项目文件

bash 复制代码
npm init -y

2.创建一个src文件夹,里面放index.ts

TypeScript 复制代码
#!/usr/bin/env node

import prompts from "prompts";
import path from "node:path";
import fs from "node:fs";
const bootstrap = async () => {
    const result =  await prompts([
        {
            type: "text",
            name: "projectName",
            message: "请输入项目名称:"
        },
    ]);
    const targetPath = path.resolve(process.cwd(), result.projectName);
    const sourcePath = path.resolve(__dirname, "../template");
    console.log(targetPath);
    fs.cpSync(sourcePath, targetPath,{
        recursive: true,
    });
    fs.renameSync(
        path.resolve(targetPath, "_gitignore"),
        path.resolve(targetPath, ".gitignore")
    );
    console.log(`
    项目创建成功!!
    cd ${result.projectName}
    npm install
    npm run dev
    `)
};
bootstrap();

3.需要安装的依赖

bash 复制代码
npm i -D typescript tsup prompts @types/prompts

4.配置ts文件

根目录下创建tsconfig.json

TypeScript 复制代码
{
    "include": ["src"],
    "compilerOptions": {
        "target": "ES2022",
        "module": "ES2022",
        "moduleResolution": "Bundler",
        "outDir": "dist",
        "skipLibCheck": true,
        "declaration": false,
        "strict": true,
        "rootDir": "src"
    }
}

5.配置tsup

根目录下创建tsup.config.ts

TypeScript 复制代码
import { defineConfig } from 'tsup'

export default defineConfig({
    target:"node18",
    entry:["src/index.ts"],
    clean: true,
    format:["cjs"],
    minify: true,
    platform: "node",
    outDir: "dist",
})

6.配置package.json文件

名字起create-xxx

TypeScript 复制代码
{
  "name": "create-cocobin",
  "version": "1.0.0",
  "description": "",
  "bin": {
    "create-cocobin": "dist/index.js"
  },
  "file": [
    "dist",
    "template"
  ],
  "scripts": {
    "dev": "tsup --watch",
    "build": "tsup",
    "typecheck": "tsc --noEmit",
    "release": "release-it"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@types/prompts": "^2.4.9",
    "prompts": "^2.4.2",
    "release-it": "^17.2.1",
    "tsup": "^8.0.2",
    "typescript": "^5.4.5"
  },
  "release-it": {
    "hooks": {
      "after:bump": "npm run build"
    }
  }
}

7.创建template文件夹,里面放入要传入的项目

里面把.gitignore文件改成_gitignore --> 避免影响文件

不要node_module文件夹

不要pnpm-lock.yaml文件

8.下载发布工具

bash 复制代码
npm init release-it

9.添加.gitignore

TypeScript 复制代码
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

10.发布到npm

bash 复制代码
npm run dev
bash 复制代码
git init
bash 复制代码
npm config set registry https://registry.npmjs.org/
bash 复制代码
npm login 

提交到github

bash 复制代码
npm run release
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt