構(gòu)建mono-repo風格的腳手架庫

這篇具有很好參考價值的文章主要介紹了構(gòu)建mono-repo風格的腳手架庫。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

前段時間閱讀了 https://juejin.cn/post/7260144602471776311#heading-25 這篇文章；本文做一個梳理和筆記；

主要聚焦的知識點如下：

如何搭建腳手架工程
如何開發(fā)調(diào)試
如何處理命令行參數(shù)
如何實現(xiàn)用戶交互
如何拷貝文件夾或文件
如何動態(tài)生成文件
如何處理路徑
如何自動安裝依賴

step1：初始化工程

推薦使用pnpm搭建mono-repo風格的工程；

mono-repo工程可以包含多個子工程，并且每個子工程都可以獨立編譯打包，并將打包的產(chǎn)物發(fā)成npm包；

這樣在同一個工程中，我們可以寫庫，也可以寫demo；

步驟如下：

執(zhí)行 pnpm init 命令，生成package.json文件；
新建 pnpm-workspace.yaml 文件，添加如下配置：

packages: 
  - 'packages/*' 
  - 'demos/*'

配置后，聲明了 packages 和 demos 文件夾中子工程是同屬一個工作空間的，工作空間中的子工程編譯打包的產(chǎn)物都可以被其它子工程引用。

在packages文件夾下新建zy-cli文件夾；
cd 到 zy-cli文件夾下，運行 pnpm init 初始化；
zy-cli 下的 packages.json 中聲明 bin 命令 zy-script；

"bin": {
    "zy-script": "./bin/index.js"
  },

添加 bin文件夾，添加index.js文件；寫入如下代碼

#!/usr/bin/env node
console.log('hellow, zy-cli');

demos 文件夾中存放使用腳手架的演示項目，我們先建一個app文件夾；
執(zhí)行 pnpm init 命令，生成package.json文件；
在app中依賴 @zy/zy-cli ( 此處依賴名稱與zy-cli 的package.json 中 name一致 )

pnpm add @zy/zy-cli -F app 會在dependencies自動添加依賴；

并添加script指令 zy （與zy-cli中聲明的指令一致）；

"scripts": {
    "zy": "zy-script"
  },
  "dependencies": {
    "@zy/zy-cli": "workspace:^"
  },

執(zhí)行pnpm -i 安裝依賴；

構(gòu)建mono-repo風格的腳手架庫,arcgis

在app目錄下運行：pnpm zy；成功輸出了 hellow, zy-cli

構(gòu)建mono-repo風格的腳手架庫,arcgis

小節(jié)：

到目前為止，我們成功創(chuàng)建了mono-repo風格的項目結(jié)構(gòu)；

packages > zy-cli 是我們腳手架工程，在bin中自定義了指令；

demos > app 是使用 zy-cli 腳手架的示例工程，利用pnpm的workspace，指定了工作區(qū)中zy-cli依賴，在script中自定義使用 zy-cli中聲明的命令；

整個工程結(jié)構(gòu)如下：

  |-- my-cli
      |-- package.json
      |-- pnpm-lock.yaml
      |-- pnpm-workspace.yaml
      |-- demos
      |   |-- app
      |       |-- package.json
      |-- packages
          |-- zy-cli
              |-- package.json
              |-- bin
                  |-- index.js

現(xiàn)在，我們思考一下，一個腳手架工程需要哪些模塊？

命令參數(shù)模塊
用戶交互模塊
文件拷貝模塊
動態(tài)文件生成模塊
自動安裝依賴模塊

接下來，我們一步一步實現(xiàn)他們；

step2：命令參數(shù)模塊

當我們執(zhí)行命令的時候，經(jīng)常會帶一些參數(shù)，如何獲取并利用這些參數(shù)；

nodeJS 中 process 模塊，可以獲取當前進程相關(guān)的全局環(huán)境信息 - 命令行參數(shù)，環(huán)境變量，命令運行路徑等；

利用 progress.argv 獲取；

const process = require('process');
// 獲取命令參數(shù)
console.log(process.argv);

或者可以采用更便捷的方案 yargs 開源庫；

我們?yōu)閦y-cli 安裝 yargs：

pnpm add yargs --F zy-cli

注意：--F zy-cli 指的是指定給該工程安裝；-W 是全局安裝的意思

我們在zy-cli - bin - index.js 中寫入如下測試代碼

#!/usr/bin/env node
// 此處遵循CommonJS規(guī)范
const yargs = require('yargs');

console.log('name', yargs.argv.name);

在demos - app 目錄下執(zhí)行 pnpm zy --name=zhang

打印輸出如下：

構(gòu)建mono-repo風格的腳手架庫,arcgis

step3：創(chuàng)建子命令

我們在使用vue-cli的時候，都用過 vue creat app 之類的命令；creat就是子命令；

我們通過 yarg.command 來實現(xiàn)；

yargs.command(cmd, desc, builder, handler)

cmd：字符串，子命令名稱，也可以傳遞數(shù)組，如 ['create', 'c']，表示子命令叫 create，其別名是 c；
desc：字符串，子命令描述信息；
builder：子命令參數(shù)信息配置，比如可以設(shè)置參數(shù)（builder也可以是一個函數(shù)）：

- alias：別名；
- demand：是否必填；
- default：默認值；
- describe：描述信息；
- type：參數(shù)類型，string | boolean | number。

handler: 函數(shù)，可以在這個函數(shù)中專門處理該子命令參數(shù)。

下面我們定義一個creat命令：

#!/usr/bin/env node
const yargs = require('yargs');
console.log('name', yargs.argv.name);
yargs.command({
  // 字符串，子命令名稱，也可以傳遞數(shù)組，如 ['create', 'c']，表示子命令叫 create，其別名是 c
  command: 'create <name>',
  // 字符串，子命令描述信息；
  describe: 'create a new project',
  // 對象，子命令的配置項；builder也可以是一個函數(shù)
  builder: {
    name: {
      alias: 'n', // 別名
      demandOption: true, // 是否必填
      describe: 'name of a project', // 描述
      default: 'app' // 默認
    }
  },
  // 函數(shù)形式的
  // builder: (yargs) => {
  //   return yargs.option('name', {
  //     alias: 'n',
  //     demand: true,
  //     describe: 'name of a project',
  //     type: 'string'
  //   })
  // },
  handler: (argv) => {
    console.log('argv', argv);
  }
});

我們運行一下這個命令：pnpm zy create my-app

輸出如下：

構(gòu)建mono-repo風格的腳手架庫,arcgis

step4：增加用戶交互

當我們使用vue create xxx 的時候，命令行會出現(xiàn)選項式的交互，讓我們選擇配置；

這里我們也實現(xiàn)一下；使用 inquirer 庫；

運行命令安裝 pnpm add inquirer@8.2.5 --F zy-cli

inquirer主要做了三件事情：

詢問用戶問題
獲取用戶輸入
校驗用戶輸入

const inquirer = require('inquirer');

function inquirerPrompt(argv) {
  // 先獲取到了命令行中的name
  const { name } = argv;
  return new Promise((resolve, reject) => {
    inquirer.prompt([
      {
        type: 'input',
        name: 'name',
        message: '模板名稱',
        default: name,
        validate: function (val) {
          if (!/^[a-zA-Z]+$/.test(val)) {
            return "模板名稱只能含有英文";
          }
          if (!/^[A-Z]/.test(val)) {
            return "模板名稱首字母必須大寫"
          }
          return true;
        },
      },
      {
        type: 'list',
        name: 'type',
        message: '模板類型',
        choices: ['表單', '動態(tài)表單', '嵌套表單'],
        filter: function (value) {
          return {
            '表單': "form",
            '動態(tài)表單': "dynamicForm",
            '嵌套表單': "nestedForm",
          }[value];
        },
      },
      {
        type: 'list',
        message: '使用什么框架開發(fā)',
        choices: ['react', 'vue'],
        name: 'frame',
      }
    ]).then(answers => {
      const { frame } = answers;
      if (frame === 'react') {
        inquirer.prompt([
          {
            type: 'list',
            message: '使用什么UI組件庫開發(fā)',
            choices: [
              'Ant Design',
            ],
            name: 'library',
          }
        ]).then(answers1 => {
          resolve({
            ...answers,
            ...answers1,
          })
        }).catch(error => {
          reject(error)
        })
      }

      if (frame === 'vue') {
        inquirer.prompt([
          {
            type: 'list',
            message: '使用什么UI組件庫開發(fā)',
            choices: [ 'Element'],
            name: 'library',
          }
        ]).then(answers2 => {
          resolve({
            ...answers,
            ...answers2,
          })
        }).catch(error => {
          reject(error)
        })
      }
    }).catch(error => {
      reject(error)
    })
  })

}

exports.inquirerPrompt = inquirerPrompt;

其中 inquirer.prompt() 返回的是一個 Promise，我們可以用 then 獲取上個詢問的答案，根據(jù)答案再發(fā)起對應(yīng)的內(nèi)容。

在index.js 中引入并使用

#!/usr/bin/env node

const yargs = require('yargs');
const { inquirerPrompt } = require('./inquirer');

// 命令配置
yargs.command({
  // 字符串，子命令名稱，也可以傳遞數(shù)組，如 ['create', 'c']，表示子命令叫 create，其別名是 c
  command: 'create <name>',
  // 字符串，子命令描述信息；
  describe: 'create a new project',
  // 對象，子命令的配置項；builder也可以是一個函數(shù)
  builder: {
    name: {
      alias: 'n', // 別名
      demandOption: true, // 是否必填
      describe: 'name of a project', // 描述
      default: 'app' // 默認
    }
  },
  // 函數(shù)形式的
  // builder: (yargs) => {
  //   return yargs.option('name', {
  //     alias: 'n',
  //     demand: true,
  //     describe: 'name of a project',
  //     type: 'string'
  //   })
  // },
  handler: (argv) => {
    inquirerPrompt(argv).then((answers) => {
      console.log(answers);
    });
  }
}).argv;

我們運行 pnpm zy create my-app 試試：

構(gòu)建mono-repo風格的腳手架庫,arcgis

step5：文件夾拷貝

前幾節(jié)我們實現(xiàn)了一個可以讀取命令行的cli工程配置；

接下來，我們就要深入到cli腳手架的構(gòu)建；

首先是文件夾的拷貝。我們使用 copy-dir 庫來實現(xiàn)文件夾拷貝；

安裝：pnpm add copy-dir --F zy-cli

bin中創(chuàng)建copy.js，實現(xiàn)簡單的copy函數(shù)，check函數(shù)

const copydir = require('copy-dir')
const fs = require('fs');

function copyDir (from, to, option) {
  copydir.sync(from, to, option);
}

/**
 * Checks if a directory or file exists at the given path.
 * @param {string} path - The path to check for existence.
 * @returns {boolean} - Returns true if the directory or file exists, false otherwise.
 */
function checkMkdirExists(path){
  return fs.existsSync(path);
}

exports.copyDir = copyDir;
exports.checkMkdirExists = checkMkdirExists;

這幾個函數(shù)比較簡單，但是主要難點在于使用；具體來說就是 from，to參數(shù)；

先定個需求，我們運行 creat 選擇 form類型 命令的時候，需要將 zy-cli > src > form 文件夾拷貝到 demos > app > src > <app-name> 中；

我們分析一下，如何獲取當前模板的位置；也就是 copyDir 的 from 參數(shù)；

__dirname 是用來動態(tài)獲取當前文件模塊所屬目錄的絕對路徑。比如在 bin/index.js 文件中使用 __dirname ，__dirname 表示就是 bin/index.js 文件所屬目錄的絕對路徑 ~/Desktop/my-cli/zy-cli/bin。

使用 path.resolve( [from…], to )將相對路徑轉(zhuǎn)成絕對路徑；

那我們模板的路徑就是：path.resolve( __dirname，'../src/form' )；或者path.resolve( __dirname，'../src/${type}')

接下來，我們確定 copyDir 的 to 參數(shù)；也就是目標文件夾 <app-name>

我們運行腳手架命令是在 app 目錄下；pnpm zy 執(zhí)行的是 app > packages.json ，所以在node腳本中，可以使用 process.cwd() 獲取文件路徑；

那我們拷貝的目標路徑就是：path.resolve(process.cwd(), './src/${<app-name>}')

handler: (argv) => {
    inquirerPrompt(argv).then((answers) => {
      // 此處已經(jīng)獲取到了完整的模版參數(shù);開始進行文件處理
      const { name, type, frame, library } = answers;

      // 判斷是否存在該項目文件夾
      const isMkdirExists = checkMkdirExists(
        path.resolve(process.cwd(),`./${name}`)
      );

      if (isMkdirExists) {
        console.log( `${name}文件夾已經(jīng)存在`);
      } else {
        const templatePath = path.resolve(__dirname, `../src/${type}`);
        const targetPath = path.resolve(process.cwd(), `./${name}`);
        copyDir(templatePath, targetPath);
      }
    });
  }

運行一下命令：pnpm zy create my-app，選擇表單類型；回車，拷貝成功；

構(gòu)建mono-repo風格的腳手架庫,arcgis

step6：目錄守衛(wèi)

如果我需要將文件拷貝到 app > pages > <name> 下，由于沒有pages目錄，命令會報錯；

我們簡單實現(xiàn)一個目錄守衛(wèi)，幫我們創(chuàng)建不存在的目錄；

const copydir = require('copy-dir')
const fs = require('fs');

function copyDir (from, to, option) {
  // 目錄守衛(wèi),不存在的目錄結(jié)構(gòu)會去創(chuàng)建
  mkdirGuard(to);
  copydir.sync(from, to, option);
}

/**
 * Checks if a directory or file exists at the given path.
 * @param {string} path - The path to check for existence.
 * @returns {boolean} - Returns true if the directory or file exists, false otherwise.
 */
function checkMkdirExists(path){
  return fs.existsSync(path);
}

// 目錄守衛(wèi)
function mkdirGuard(target) {
  try {
    fs.mkdirSync(target, { recursive: true });
  } catch (e) {
    mkdirp(target)
    function mkdirp(dir) {
      if (fs.existsSync(dir)) { return true }
      const dirname = path.dirname(dir);
      mkdirp(dirname);
      fs.mkdirSync(dir);
    }
  }
}

exports.copyDir = copyDir;
exports.checkMkdirExists = checkMkdirExists;
exports.mkdirGuard = mkdirGuard;

step7：文件拷貝

文件操作，主要使用 fs.readFileSync 讀取被拷貝的文件內(nèi)容，然后創(chuàng)建一個文件，再使用 fs.writeFileSync 寫入文件內(nèi)容；這兩個api都是比較熟悉的老朋友了；不做過多介紹；

我們定義一個 copyFile函數(shù)：

function copyFile(from, to) {
  const buffer = fs.readFileSync(from);
  const parentPath = path.dirname(to);
  mkdirGuard(parentPath)
  fs.writeFileSync(to, buffer);
}

exports.copyFile = copyFile;

使用方法與copyDir 類似，只不過需要精確到文件；這里就不演示了；

step8：動態(tài)文件生成

我們在定義腳手架的時候，會獲取很多類型的命令參數(shù)，有些參數(shù)可能對我們模板文件產(chǎn)生影響。

例如，根據(jù)命令行中的name，動態(tài)修改packages中的name；

這里，我們需要依賴 mustache ；安裝：pnpm add mustache --F zy-cli

我們增加一個 renderTemplate 函數(shù)：

接受動態(tài)模板的path路徑，data：動態(tài)模版的配置數(shù)據(jù)；

Mustache.render(str, data) 接受動態(tài)模版和配置數(shù)據(jù)；

Mustache.render('<span>{{name}}</span>',{name:'張三'})

const Mustache = require('mustache');
function renderTemplate(path, data = {}) {
  const str = fs.readFileSync(path, { encoding: 'utf8' })
  return Mustache.render(str, data);
}
exports.renderTemplate = renderTemplate;

再定義一個copyTemplate 函數(shù)：

path.extname 獲取文件擴展名，如果不是tpl類型的，直接當做文件處理；

function copyTemplate(from, to, data = {}) {
  if (path.extname(from) !== '.tpl') {
    return copyFile(from, to);
  }
  const parentToPath = path.dirname(to);
  // 目錄守衛(wèi)
  mkdirGuard(parentToPath);
  // 寫入文件
  fs.writeFileSync(to, renderTemplate(from, data));
}

在index.js中試驗一下：

const templatePath = path.resolve(__dirname, `../src/${type}/packages.tpl`);
const targetPath = path.resolve(process.cwd(), `./${name}/packages.json`);
copyTemplate(templatePath, targetPath, {name: name})

{
  "name": "{{name}}",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

運行完創(chuàng)建命令后，成功生成packages.json 文件，并且將 name字段替換成功；

構(gòu)建mono-repo風格的腳手架庫,arcgis

擴展：mustache 一些用法補充：

基礎(chǔ)綁定：

Mustache.render('<span>{{name}}</span>',{name:'張三'})

綁定子屬性

Mustache.render('<span>{{ifno.name}}</span>', { ifno: { name: '張三' } })

循環(huán)渲染

// {{#key}} {{/key}} 開啟和結(jié)束循環(huán)
Mustache.render(
  '<span>{{#list}}{{name}}{{/list}}</span>',
  {
    list: [
      { name: '張三' },
      { name: '李四' },
      { name: '王五' },
    ]
  }
)

循環(huán)渲染 + 二次處理

Mustache.render(
  '<span>{{#list}}{{info}}{{/list}}</span>',
  {
    list: [
      { name: '張三' },
      { name: '李四' },
      { name: '王五' },
    ],
    info() {
      return this.name + ',';
    }
  }
)

條件渲染

// 使用 {{#key}} {{/key}} 語法 和 {{^key}} {{/key}} 語法來實現(xiàn)條件渲染，
// 當 key 為 false、0、[]、{}、null，既是 key == false 為真，
// {{#key}} {{/key}} 包裹的內(nèi)容不渲染，
// {{^key}} {{/key}} 包裹的內(nèi)容渲染
Mustache.render(
  '<span>{{#show}}顯示{{/show}}{{^show}}隱藏{{/show}}</span>',
  {
    show: false
  }
)

step9：實現(xiàn)自動安裝依賴

我們在選擇完框架和UI庫的時候，可以幫助目標項目自動安裝依賴；

我們使用 node 中提供的 child_process 子進程來實現(xiàn)；

child_process.exec(command, options, callback)

- command：命令，比如 pnpm install
- options：參數(shù)

- - cwd：設(shè)置命令運行環(huán)境的路徑
  - env：環(huán)境變量
  - timeout：運行執(zhí)行現(xiàn)在

- callback：運行命令結(jié)束回調(diào)，(error, stdout, stderr) =>{ }，執(zhí)行成功后 error 為 null，執(zhí)行失敗后 error 為 Error 實例，stdout、stderr 為標準輸出、標準錯誤，其格式默認是字符串。

我們定義一個 manager 函數(shù)；

const path = require('path');
const { exec } = require('child_process');

// 組件庫映射,前面是用戶輸入/選擇,后面是目標安裝的組件庫
const LibraryMap = {
  'Ant Design': 'antd',
  'iView': 'view-ui-plus',
  'Ant Design Vue': 'ant-design-vue',
  'Element': 'element-plus',
}

function install(cmdPath, options) {
  // 用戶選擇的框架 和 組件庫
  const { frame, library } = options;
  // 安裝命令
  const command = `pnpm add ${frame} && pnpm add ${LibraryMap[library]}`
  return new Promise(function (resolve, reject) {
    // 執(zhí)行安裝命令
    exec(
      command,
      {
        // 命令執(zhí)行的目錄
        cwd: path.resolve(cmdPath),
      },
      function (error, stdout, stderr) {
        console.log('error', error);
        console.log('stdout', stdout);
        console.log('stderr', stderr)
      }
    )
  })
}
exports.install = install;

使用：

// 傳入當前進程的目錄，以及用戶選擇的配置
install(process.cwd(), answers)

試驗一下：pnpm create xxxx；成功安裝；

構(gòu)建mono-repo風格的腳手架庫,arcgis

但是安裝過程沒有進度展示；我們使用 ora 來豐富安裝加載動畫；

安裝：pnpm add ora@5.4.1 --F zy-cli

使用：

const path = require('path');
const { exec } = require('child_process');
const ora = require("ora");

// 組件庫映射,前面是用戶輸入/選擇,后面是目標安裝的組件庫
const LibraryMap = {
  'Ant Design': 'antd',
  'iView': 'view-ui-plus',
  'Ant Design Vue': 'ant-design-vue',
  'Element': 'element-plus',
}

function install(cmdPath, options) {
  // 用戶選擇的框架 和 組件庫
  const { frame, library } = options;
  // 串行安裝命令
  const command = `pnpm add ${frame} && pnpm add ${LibraryMap[library]}`
  return new Promise(function (resolve, reject) {
    const spinner = ora();
    spinner.start(
      `正在安裝依賴，請稍等`
    );
    // 執(zhí)行安裝命令
    exec(
      command,
      {
        // 命令執(zhí)行的目錄
        cwd: path.resolve(cmdPath),
      },
      function (error) {
        if (error) {
          reject();
          spinner.fail(`依賴安裝失敗`);
          return;
        }
        spinner.succeed(`依賴安裝成功`);
        resolve()
      }
    )
  })
}
exports.install = install;

再次執(zhí)行，已經(jīng)有狀態(tài)提示了；

構(gòu)建mono-repo風格的腳手架庫,arcgis

step10：推送到私有npm倉庫

使用verdaccio搭建私有npm倉庫的步驟本文不贅述，可以參考這篇文章；搭建自己的私有npm庫

// TODO 部署過程中使用docker-compose，遇到一些問題，預(yù)計單獨開一篇文章去記錄；

假設(shè)我們已經(jīng)有了npm私庫；ip：http://xxxxxx:4873/

我們使用 nrm 去管理 npm 的倉庫地址

// 全局安裝 
npm install -g nrm
 // 查看所有的倉庫 
nrm ls 
// 切換倉庫 
nrm use <name> 
// 添加倉庫 
nrm add <name> <address>

推送之前，我們需要修改 packages.json 中的信息：

{
  "name": "@zy/zy-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "zy-script": "./bin/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // 規(guī)定上傳到npm包中的文件
  "files": [
    "bin",
    "src"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "copy-dir": "^1.3.0",
    "inquirer": "8.2.5",
    "mustache": "^4.2.0",
    "ora": "5.4.1",
    "yargs": "^17.7.2"
  }
}

推送：

pnpm publish --registry http://xxxxx:4873/

刷新我們的 vedaccio，已經(jīng)存在這個包了

構(gòu)建mono-repo風格的腳手架庫,arcgis

使用：

我們在Desktop中新建一個空白文件夾；

mkdir cli-test

cd cli-test

pnpm init

nrm use zy

pnpm i @zy/zy-cli

此時，我們的cli-test項目已經(jīng)成功安裝了私有npm倉庫的 zy-cli 項目

在packages.json 中添加命令

"scripts": {
    "zy-script": "zy-script"
  },

執(zhí)行 pnpm zy-script create Myapp

成功安裝所有依賴并拷貝文件；

總結(jié)：

我們搭建了一個mono-repo風格的工程；包含了一個zy-cli腳手架工程，和demos-app的測試工程；
zy-cli實現(xiàn)了用戶交互式的命令行，命令行參數(shù)獲取，文件拷貝，動態(tài)文件生成，自動安裝依賴；
我們將zy-cli推送到了npm私有倉庫上，并另開了一個工程，切換私庫源，成功安裝并且運行；

展望：

目前初步實現(xiàn)了mono-repo工程，還需要添加統(tǒng)一的publish腳本，包含版本自增等；

cli 腳手架不需要打包，所以還需要為這個工程添加一個組件庫，工具函數(shù)庫等類型的包；文章來源地址http://www.zghlxwxcb.cn/news/detail-742517.html

到了這里，關(guān)于構(gòu)建mono-repo風格的腳手架庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

構(gòu)建mono-repo風格的腳手架庫

step1：初始化工程

step2：命令參數(shù)模塊

step3：創(chuàng)建子命令

step4：增加用戶交互

step5：文件夾拷貝

step6：目錄守衛(wèi)

step7：文件拷貝

step8：動態(tài)文件生成

擴展：mustache 一些用法補充：

step9：實現(xiàn)自動安裝依賴

step10：推送到私有npm倉庫

總結(jié)：

展望：

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2