build personal scaffolding

1 Introduction

1.1 Purpose

Make the project quickly enter the development stage and solve the problem that everything is difficult at the beginning

1.2 Final effect

By running the command, the code template is downloaded from the remote end, and the folder name and part of the package.json information can be customized

2 directory structure

GitHub
Gitee

├── package.json
├── template.json
├── node_modules
├── bin
│   └── yana-cli.js                                     # 命令脚本
├── lib
│   ├── util
│   │   ├── generator.js
│   │   └── git-user.js
│   ├── create.js                                       # 选择一个模板生成项目
│   └── list.js                                         # 查看模板列表

3 Create commands

Try not to use Git Bash, there may be failure problems such as arrows and colors, use CMD directly

3.1 package.json file initialization

$ npm init --yes

3.2 New yana-cli.js

• Create a new bin folder in the root directory
• Create a new yana-cli.js under the bin folder
• Paste the following into yana-cli.js

#! usr/bin/env node
console.log(process.argv)

#! usr/bin/env node: This line of code cannot be deleted, telling the system that the current script will be parsed and executed by Node.js

3.3 Add command path

Find package.json in the root directory and add the bin field

"bin": {
    
    
  "yana-cli": "bin/yana-cli.js"
}

3.4 Add soft link

$ npm link

• Execute this command to add a soft link to the global, and it can be directly used globally after successyana-cli
• If the command fails to execute, you can check the corresponding solution on the Internet
• In the end, it cannot be successfully executed, and can be directly used node bin/yana-clito replace subsequent yana-cliexecution commands

3.5 Test commands

$ yana-cli

successfully outputs the following

[
  'xxx\xxx\node.exe',
  'xxx\xxx\bin\yana-cli'
]

4 Simplified command parsing

4.1 install commander

$ npm i commander

4.2 Modify the yana-cli.js file

#! /usr/bin/env node
const program = require('commander')
const config = require('../package.json')

program.version(config.version, '-v, --version')

// 定义使用方法
program
  .command('create')
  .description('选择模板生成项目')
  .action(() => {
    
    
    require('../lib/create')
  })

program
  .command('list')
  .description('查看当前可用模板')
  .action(() => {
    
    
    require('../lib/list')
  })

// 解析参数
program.parse(process.argv)
if (!program.args.length) {
    
    
  program.help()
}

Execute yana-cli to output the following

5 Add list command

5.1 Create a new list.js file

• Create a new lib folder in the root directory
• Create a new list.js under the lib folder
• Paste the following into list.js

const template = require('../template.json')

console.log('当前模板列表如下：\n')
console.log(template)

5.2 Create a new template.json file

• Create a new template.json file in the root directory
• Paste the following into template.json

{
    
    "vue3-project-template":"https://gitee.com/YanaDH/vue3-project-template.git"}

Execute yana-cli list to output the following

6 Added create command

6.1 Installing plugins

$ npm i download-git-repo inquirer handlebars

• download-git-repo : Execute git clone to clone the template repository
• Inquirer customizes templates based on user input
• handlebars replaces project meta information in package.json

package.json refers to vue3-project-templatethe package.json file in the template repository configured by the template.json file, and the place that needs to be replaced needs to be { {}}wrapped

6.2 New create.js

• Create a new create.js under the lib folder
• Paste the following into create.js

const templateUrl = require('../template.json')['vue3-project-template']
const download = require('download-git-repo')
const inquirer = require('inquirer')
// 新增项
const fs = require('fs')
const path = require('path')
const handlebars = require('handlebars')

download(`direct:${
      
      templateUrl}`, 'tmp', {
    
     clone: true }, (err) => {
    
    
  if (err) return
  const packagePath = path.join(__dirname, '../', '/tmp/package.json')
  const content = JSON.stringify(require(packagePath), '', '\t')
  const template = handlebars.compile(content)
  inquirer
    .prompt([
      {
    
     name: 'name', message: '请输入项目名称' },
      {
    
     name: 'description', message: '请输入项目描述' },
      {
    
     name: 'author', message: '请输入项目作者' },
    ])
    .then((params) => {
    
    
      const result = template(params)
      fs.writeFileSync(packagePath, result)
      console.log(params)
    })
})

6.3 create command test

$ yana-cli create

If the inquirer reports an error, reduce the inquirer version to 8.2.4

The terminal outputs the following

A tmp folder is generated corresponding to the directory, and the name, description, and author in the downloaded template warehouse package.json file are the contents just entered

7 Publish NPM package

If you do not have an npm account, you need to register one first

# 1. 登录npm，输入用户名、密码
$ npm login
# 2. 发布
$ npm publish

After the release is successful, it can be installed directly npm i yana-clithrough

8 Scaffold optimization

GitHub
Gitee

8.1 Installing plugins

$ npm i chalk ora metalsmith

• chalk : add color to console printouts
• ora: add loading to the console print content
• metalsmith : custom folder name

8.2 Add generator.js file

Replace the name, description, author in the package.json file

• util folder under the bin folder
• Create a new generator.js file under the util folder
• Paste the link content into generator.js

8.3 Add git-user.js file

Directly set the author in the package.json file to the username of the local Git configuration

• Create a new git-user.js file under the util folder
• Paste the link content into git-user.js

8.4 Modify the create.js file

The console adds color, loading, etc.,
and pastes the link content into create.js

$ yana-cli create

• If ora reports an error, downgrade the ora version to 8.2.4
• If chalk reports an error, downgrade the chalk version to 4.1.1
  

9 Automatic Deployment

9.1 Get NPM TOKEN

Generate NPM TOKEN in npm

9.2 Configure NPM TOKEN

Push the yana-cli scaffolding project to GitHub, and configure the generated NPM TOKEN to the corresponding repository on GitHub

9.3 Add Action script

• Paste the following into mian.yml
• The NODE_AUTH_TOKENcorresponding value secrets.npm_tokenneeds npm_tokento be consistent with the NPM TOKEN name configured in the previous step
• When there is code push to the warehouse, the Action script will be executed automatically, and the package will be published to NPM

name: Publish To Npm
on:
  push:
    branches: [ "master" ]
 
jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${
    
    {
    
    secrets.npm_token}}