Vite + TypeScript + Node 开发一个初始化项目的脚手架

Vite + TypeScript + Node 开发一个初始化项目的脚手架

技术栈

• Vite + TypeScript + Node
• 一点点 Vite 知识，一点点 JavaScript 知识（不会 TypeScript 也没事），少许 Node 知识，这样你就可以开始开发一个 Cli 了

思路

• 利用 Vite 将 TypeScript 打包成 JavaScript 文件 从而使 Node 识别

开发

初始化

• 创建一个项目文件夹，并初始化 package.json

# 创建文件夹
mkdir project-cli

# 进入文件夹根目录
cd project-cli

# 初始化 package.json
npm init -y

• 安装依赖

# dependencies
npm i commander download-git-repo

# devDependencies
npm i @types/node typescript vite -D

• 依赖特性

  • commander: 命令
  • download-git-repo: 下载模板工具
  • vite: 项目构建工具
  • typescript: 编程语言

• 命令配置文件

// package.json
{
  "bin": {
    "create-mine": "bin/create-mine.js",
    "me": "bin/create-mine.js"
  },
  "scripts": {
    "build": "node scripts/build",
  }
}

// bin/create-mine.js
#!/usr/bin/env node
require('../index.js')

// scripts/build.js
const { resolve } = require('path')
const { build } = require('vite')

!(async () => {
  try {
    await build({
      configFile: resolve(__dirname, '../vite.config.ts')
    })
  } catch (e) {
    process.exit(1)
  }
})()

• 项目配置文件

import { UserConfig } from 'vite'
import { resolve } from 'path'

const config: UserConfig = {
  root: __dirname,
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  build: {
    target: 'esnext',
    outDir: resolve(__dirname, './dist'),
    lib: {
      entry: resolve(__dirname, './src/index.ts'),
      formats: ['cjs']
    },
    rollupOptions: {
      external: ['path', 'child_process', 'fs', 'commander', 'download-git-repo'],
      output: {
        entryFileNames: '[name].js'
      }
    },
    ssr: false,
    ssrManifest: false,
    emptyOutDir: true
  }
}

export default config

开发主程序

// index.ts
import { program } from 'commander'
import { version } from '@/../package.json'

program.version(version, '-v, --version', '输出版本号') // 重置指令
program.parse(process.argv) // 解析命令

• 下载模板

// down.ts
import download from 'download-git-repo'

// `direct:模板地址#分支`
download(`direct:https://gitee.com/biaovorg/project-template.git#vue`, process.cwd(), { clone: true })

本地测试

# 关联
npm link
# 测试
me -v
#或者
create-mine -v

发布

• 如果你之前没有登录 npm 官网（确保你的源是 npm ,而不是 taobao），则需要登录
• 如果已登录，则直接发布即可

# 登录
npm login
# 发布
npm publish

• 去看下 npm 官网上看发布是否成功：create-mine
• 网址查看：https://www.npmjs.com/package/包名，例如：https://www.npmjs.com/package/create-mine

总结

• 思路是不是很简单，如果有细节部分不明确可以参考源码
• Github 源码
• 作用：当你后续想要开发自己的作品集的时候，可以节省重新搭建项目的时间