从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
相关推荐
有梦想的刺儿11 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具32 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json