从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
相关推荐
拉不动的猪5 分钟前
管理不同权限用户的左侧菜单展示以及权限按钮的启用 / 禁用之其中一种解决方案
前端·javascript·面试
西陵15 分钟前
前端框架渲染DOM的的方式你知道多少?
前端·javascript·架构
小九九的爸爸16 分钟前
我是如何让AI帮我还原设计稿的
前端·人工智能·ai编程
海的诗篇_36 分钟前
前端开发面试题总结-JavaScript篇(一)
开发语言·前端·javascript·学习·面试
じ☆ve 清风°1 小时前
理解JavaScript中map和parseInt的陷阱:一个常见的面试题解析
开发语言·javascript·ecmascript
江城开朗的豌豆1 小时前
eval:JavaScript里的双刃剑,用好了封神,用不好封号!
前端·javascript·面试
Forever Nore1 小时前
前端技能包
前端
江城开朗的豌豆1 小时前
JavaScript篇:前端定时器黑科技:不用setInterval照样玩转循环任务
前端·javascript·面试
书中自有妍如玉1 小时前
.net 使用MQTT订阅消息
java·前端·.net
江城开朗的豌豆2 小时前
JavaScript篇:自定义事件:让你的代码学会'打小报告'
前端·javascript·面试