从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
相关推荐
【赫兹威客】浩哥10 分钟前
【赫兹威客】Node.js安装教程
node.js
pas13610 分钟前
35-mini-vue 实现组件更新功能
前端·javascript·vue.js
前端达人16 分钟前
为什么聪明的工程师都在用TypeScript写AI辅助代码?
前端·javascript·人工智能·typescript·ecmascript
快乐点吧16 分钟前
使用 data-属性和 CSS 属性选择器实现状态样式控制
前端·css
EndingCoder1 小时前
属性和参数装饰器
java·linux·前端·ubuntu·typescript
小二·1 小时前
Python Web 开发进阶实战:量子机器学习实验平台 —— 在 Flask + Vue 中集成 Qiskit 构建混合量子-经典 AI 应用
前端·人工智能·python
TTGGGFF1 小时前
控制系统建模仿真(十):实战篇——从工具掌握到工程化落地
前端·javascript·ajax
郝学胜-神的一滴1 小时前
深入解析C/S架构与B/S架构:技术选型与应用实践
c语言·开发语言·前端·javascript·程序人生·架构
s19134838482d2 小时前
javascript练习题
开发语言·javascript·ecmascript
这是个栗子2 小时前
前端开发中的常用工具函数(二)(持续更新中...)
开发语言·前端·javascript