npm官网仓库发布前端脚手架

简介

前端工程化脚手架可以帮助团队统一项目结构、规范代码风格、提高开发效率和代码质量。

项目初始化

创建一个空文件夹

npm init

在根目录下新建bin文件夹下面新建cli文件

配置脚手架 把模版文件下的内容替换到src下面

#!/usr/bin/env node
const path = require('path')
const fs = require('fs-extra')
const inquirer = require('inquirer')
const ora = require('ora')

const setGradient = require('../gradient')

// 新建项目模式
async function createProjectMode() {
  // 用户输入新白包名称
  const { newName } = await inquirer.prompt({
    type: 'input',
    name: 'newName',
    message: '输入新的白包名称：'
  })

  // 读取当前根目录下的 templates 文件夹中的 demo 模板文件夹
  const templatesDir = path.join(process.cwd(), 'templates')
  const demoDir = path.join(templatesDir, 'demo')
  const loadingDemo = ora('正在复制 Demo 模板文件夹并重命名...')
  loadingDemo.start()

  // 判断 demo 文件夹是否存在
  if (!fs.existsSync(demoDir)) {
    loadingDemo.fail('Demo 模板文件夹不存在！')
    process.exit(1)
  }

  // 生成新模板文件夹路径
  const newTemplateDir = path.join(templatesDir, newName)

  // 判断新模板文件夹是否已存在
  if (fs.existsSync(newTemplateDir)) {
    loadingDemo.fail('新的模板名称已存在！')
    process.exit(1)
  }

  // 复制 demo 模板文件夹并重命名为新模板名称
  fs.copySync(demoDir, newTemplateDir, { overwrite: true })

  loadingDemo.succeed('复制 Demo 模板成功!')

  // 获取最新的模板列表
  const updatedTemplates = fs.readdirSync(templatesDir)

  inquirer
    .prompt({
      type: 'list',
      name: 'template',
      message: '选择白包：',
      choices: updatedTemplates // 更新后的模板列表
    })
    .then(({ template }) => {
      console.log(setGradient(`当前选择白包为：${template}`))

      const dest = path.join(process.cwd(), 'src')

      const loadingCopy = ora('正在下载模板文件...')
      loadingCopy.start()

      // 下载模板文件到目标位置
      fs.copySync(path.join(templatesDir, template), dest, { overwrite: true })

      loadingCopy.succeed('创建白包成功!')
      console.log(setGradient(`白包${template}复制完成！`))
    })
}

// 开发模式
function developMode() {
  const templatesDir = path.join(process.cwd(), 'templates')
  const updatedTemplates = fs.readdirSync(templatesDir)

  inquirer
    .prompt({
      type: 'list',
      name: 'template',
      message: '选择白包：',
      choices: updatedTemplates // 更新后的模板列表
    })
    .then(({ template }) => {
      console.log(setGradient(`当前选择白包为：${template}`))

      const dest = path.join(process.cwd(), 'src')

      const loadingCopy = ora('正在下载模板文件...')
      loadingCopy.start()

      // 下载模板文件到目标位置
      fs.copySync(path.join(templatesDir, template), dest, { overwrite: true })

      loadingCopy.succeed('创建白包成功!')
      console.log(setGradient(`白包${template}复制完成！`))
    })
}

async function createWechatTemplate() {
  console.log(setGradient('微信小程序矩阵脚手架'))

  // 用户选择新建项目模式还是开发模式
  const { projectMode } = await inquirer.prompt({
    type: 'list',
    name: 'projectMode',
    message: '选择模式：',
    choices: ['新建项目模式', '开发模式']
  })

  if (projectMode === '新建项目模式') {
    createProjectMode()
  } else {
    developMode()
  }
}

module.exports = createWechatTemplate

在cli文件引入脚手架

#! /usr/bin/env node
const path = require('path')
const fs = require('fs-extra')
const program = require('commander')
const inquirer = require('inquirer')
const downloadGitRepo = require('download-git-repo')
const ora = require('ora')
const package = require('../package.json')
const templates = require('./templates.js')

const setGradient = require('./gradient')

// 脚手架

const createWechatTemplate = require('./command/wechat.js')

// 定义当前版本

program.version(`v${package.version}`)


// 定义命令 wechat
program
  .command('wechat')
  .description('微信小程序矩阵脚手架')
  .action(() => {
    createWechatTemplate()
  })

// 解析用户执行命令传入参数
program.parse(process.argv)

// console.log(setGradient(`Apus-前端项目脚手架`))

把脚手架挂载到全局

npm link

使用npm publish 发布脚手架

npm publish

发布成功之后可以在npm官网搜到

全局安装脚手架

npm install apus-cli -g