仿vue的前端自定義cmd敕令拉取項目腳手架

2019年8月24日 119次阅读 来源: wim_Chen

原文地點：https://github.com/screetBloo…
含純node或許commander完成本身的前端腳手架
文章碼字分享不容易，願望如果幫到您的話，幫助github點個star

腳手架

這裏主要講的是怎樣自定義node敕令，拉取項目

snowcat init
// 用戶裝置我們的敕令，就能夠一行代碼拉取對應項目，可擴大成依據差別敕令拉取差別終端模板

1.腳手架的完成

腳手架作用： 疾速搭建一個我們預定義好的模板項目構造
我們這裏就做了兩件事（已滿足了我如今的需求，能夠繼承拓展）：

  • 1.自定義nodejs敕令
  • 2.在nodejs中實行shell敕令（淺顯說的敕令行敕令），拉取模板項目到當地

1.1 導言

我們日常平凡常常會運用vue、angular、react等的腳手架，都能夠到達以下效果

// 1. 全局裝置對應的腳手架  "xxx-cli"  （不全局裝置的話，只能在當前裝置包下運用）
npm install -g xxx-cli

// 2. 接下來直接就如"vue init"就能夠直接拉取一個模板項目到我們的當前文件夾
vue init

這個效果挺好用的，如果我積累了一套框架，我不想每次重開項目都拷貝到其他文件夾來用；當他人須要的時刻，他人又要從我這拷貝一份；或許是我每次都給他人一串他人基礎記不住的git的url鏈接,這個太麻煩了
我願望能有一套腳手架，能像這些成熟的框架的腳手架一樣直接把我想要的模板項目用最簡短而有用的敕令拉取到任何我想要獵取的電腦的文件夾中，再有須要了，我還能繼承拓展

// 全局裝置腳手架
npm install -g snowcat
// 拉取預定義模板
snowcat init

當地效果演示：

《仿vue的前端自定義cmd敕令拉取項目腳手架》

別的机械上演示：

《仿vue的前端自定義cmd敕令拉取項目腳手架》
《仿vue的前端自定義cmd敕令拉取項目腳手架》

1.2 腳手架詳細完成歷程

先上構造構造和代碼（連繫思緒和代碼如果你已懂了，省的還向下看），再從零最先講完成體式格局和道理

1.1.1 0.0.1版本腳手架構造構造

《仿vue的前端自定義cmd敕令拉取項目腳手架》

1.1.2 完成0.0.1版本腳手架的完全代碼

snowcat.js ==> 腳手架定義的一切敕令的進口，這裏臨時只要init敕令

#!/usr/bin/env node
'use strict'
const program = require('commander')
program
    .version(require('../package').version )

program
    .command('init')
    .description('pull a new project')
    .alias('i')
    .action(() => {
        require('../command/init')()
    })

program.parse(process.argv)

if(!program.args.length){
    program.help()
}

init.js ==> init 敕令的定義文件

'use strict'
const exec = require('child_process').exec
const projectUrl = 'https://github.com/screetBloom/wecat.js.git'

module.exports = () => {
    console.log('this is my first commander >>>>>> ')
    let cmdStr = `git clone `+projectUrl

    exec(cmdStr, (error, stdout, stderr) => {
        if (error) {
            console.log(error)
            process.exit()
        }
        console.log('pull我們的項目已勝利了')
        process.exit()
    })

}

package.json ==> 在package.json文件中聲明全部文件包的可實行文件的位置

"bin": {
    "snowcat": "bin/snowcat.js"
  }

1.1.3 完成思緒

上述的3個文件主要完成了2個最基礎的事變

  • 1.自定義nodejs敕令。在nodejs底本肯定是沒有”snowcat”這類敕令的，這個是我們自定義的
  • 2.用nodejs實行shell敕令（淺顯講的敕令行敕令），這裏重如果實行了git clone

那末我們如今先來嘗試一下，怎樣自定義nodejs敕令
在這裏我們須要引入一個”commander.js”的npm包
先申明：不引入任何包都是能夠完成我們上述的兩件事，引入的主要原因有2個

  • 1.有了這個npm包，能夠簡化我們敕令行的開闢，把我們主要精神照樣回歸到框架開闢上
  • 2.commander有大批的api，我們如今只是0.0.1版本，不依靠任何包來完成都是沒有問題的，今後高版本1.0.0的拓展照樣要用它的，這裏我直接和人人說一下，也能夠熟習一下它的運用

我在這裏補充一下不必任何依靠包的完成體式格局：

// PS.在nodejs中，能夠直接用nodejs內置的全局變量process獵取到你輸入的敕令的參數
// 如今我們直接就能夠應用 process.argv來獵取，如定義snowcat.js文件以下：
#!/usr/bin/env node
let run= function (para) {
    if(para[0] === '-test'){
        console.log('version is 1.0.0');
    }
    if(para[1] === '-host'){
        console.log('127.0.0.1');
    }
};
 console.log(process.argv)
run(process.argv.slice(2));

頂部的”#!/usr/bin/env node”的意義是 顯式的聲明這個文件用node來實行
實行snowcat.js文件

node snowcat.js
/*
輸出效果以下：
[ '/usr/local/bin/node',
  '/Users/chenwei/WebstormProjects/git_my/deep-in-vue/wim/test.js' ]
*/
node snowcat.js -test -host
/*
輸出效果基礎以下：
[ '/usr/local/bin/node',
  '/Users/chenwei/WebstormProjects/git_my/deep-in-vue/wim/test.js',
  '-test',
  '-host' ]
*/

這裏我想通知人人的就是process.argv，這個東西很癥結，能夠拿到用戶輸入的敕令，然後你就能夠依據輸入實行對應的函數就好了

先把 console.log(process.argv)解釋了， 再來自定義指令試一試

node snowcat.js -test
/*
輸出以下：
version is 1.0.0
*/
node snowcat.js -host
 /*
 輸出以下：
 127.0.0.1
 */

我寫這個demo主要示意如今我們就能夠直接依據參數來婚配對應實行的函數了，以上面的init.js文件為例
我們是先應用process.argv.slice(2) 獵取到輸入的參數，婚配一下實行對應的函數就行；純node.js完成

argv返回的是一個不定長的數組，第一個是node.exe的途徑，第二個是當前文件的途徑，接下來是你敕令背面跟的參數

nodejs中的process的官方申明文檔在這
這裏我們就順着這個繼承了，commander等等再說，對如今的我們來講也沒到主要要偏說不可的田地

有無注重到上面我們都是在js文件地點目次下直接”node snowcat.js -test”來實行js文件，我們該怎樣直接”snowcat -test”就實行js文件呢 ，也就是上面我們說的自定義nodejs敕令
這個時刻package.json就須要上台了

// 初始化一個package.json，相干信息自定義
npm init

在內里增加一行

"bin": {
    "snowcat": "snowcat.js"
  }

這個是什麼意義呢： 簡單說就是把敕令名作為key，當地文件名作為value做一個映照。全局裝置的時刻，npm會把你定義的這個敕令名”snowcat”對應的可實行文件裝置到體系途徑下，到達全局運用該敕令的目標；當地裝置的時刻，會直接鏈接到’./node_modules/.bin/’

如今的設置信息應當基礎以下：

{
  "name": "snowcat",
  "version": "0.0.1",
  "description": "my cli 0.0.1",
  "main": "init.js",
  "bin": {
    "snowcat": "snowcat.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wim_chen",
  "license": "ISC"
}

如今我們來嘗試當地的全局的運轉 “snowcat” 敕令，這裏須要用到 “npm link”，這裏注重：是我們本身全局運用，給他人全局用能夠宣布到npm堆棧

// 在當前的package.json中輸入該敕令
npm link

這個”npm link”重如果在我們本機的全局的”node_modules”目次中，天生一個標記鏈接”a symbolic link”指向我們當前文件夾

又由於我們在package.json中定義了”bin”，指出了全局裝置的時刻敕令”snowcat”對應的js文件
如今我們在本機的任何一個處所輸入”snowcat -test -host“都邑輸出下述效果：

[ '/usr/local/bin/node',
  '/Users/chenwei/Desktop/事情與興緻/common_test/command/test_one/snowcat.js',
  '-test',
  '-host' ]
version is 1.0.0
127.0.0.1

想要進一步的到達如

npm install -g snowcat 
// 實行我們如今的腳手架
snowcat -test -host

如今只須要做以下幾步：

  • 1.註冊一個npm賬號，點擊https://www.npmjs.com/ 直達npm官網
  • 2.給你的package.json內里的name寫一個人人都沒用過名字（snowcat你是別想了，很明顯已名花有主了）
  • 3.在你當地的package.json地點的途徑下輸入：”npm adduser”，然後輸入你的用戶名、暗碼、郵箱
  • 4.輸入 “npm publish”就將你的npm包發送到了npm堆棧
  • 5.找個好朋友，讓他裝置一下你的包”npm install -g xxx”，讓他輸入” snowcat -test -host”就能夠打印出你寫好的內容了，比方”我愛你”？

如今我們來按請求拉取我們的項目，用一最先的文件構造舉例
《仿vue的前端自定義cmd敕令拉取項目腳手架》
先建立一下對應的文件

起首”npm init”我們的package.json文件，並設置”commander.js”依靠和適宜的bin

{
  "name": "snowcat",
  "version": "0.0.1",
  "description": "my js cli 0.0.1",
  "main": "index.js",
  "bin": {
    "snowcat": "bin/snowcat.js"
  },
  "dependencies": {
    "commander": "^2.9.0"
  },
  "author": "wim_chen",
  "license": "ISC"
}

這裏先申明一下 commander.js的語法

program
    .command('init')       // 敕令是 init
    .description('pull a new project')    // 敕令的形貌
    .alias('i')    // 敕令別號，用init和i都行
    .action(() => {
      require('../command/init')()  // 實行init敕令時要做什麼，這裡是實行init文件里導出的函數
  })

最先是編寫我們的敕令行進口文件，bin文件夾下的snowcat.js，也很簡單

// 頭部增加顯現聲明：本文件用node來實行
#!/usr/bin/env node
// 嚴厲形式
'use strict'
// 引入 commander，用於處置懲罰自定義nodejs敕令
const program = require('commander')
// 援用package.json內里的版本號來定義當前版本
program
    .version(require('../package').version )

// 定義init敕令，同時定義init敕令的簡化敕令 i，包含敕令的劇本文件地點途徑
program
    .command('init')
    .description('pull a new project')
    .alias('i')
    .action(() => {
        require('../command/init')()
    })

// 這一句必不可少，作用是剖析敕令行參數argv，這裏的process.argv是nodejs全局對象的屬性
program.parse(process.argv)

// 如果用戶只是輸入了 "snowcat"沒帶參數，就給他展現他能輸入的一切敕令
if(!program.args.length){
    program.help()
}

我們先來試一下，實行snowcat敕令

node ./bin/snowcat.js

顯現以下，就是準確的,申明我們commander.js運用的很順遂
《仿vue的前端自定義cmd敕令拉取項目腳手架》

編寫我們的 init.js

'use strict'
// 這個是node自帶挪用自窗口實行shell敕令的要領,等會用
const exec = require('child_process').exec
module.exports = () => {
    console.log('this is my first commander >>>>>> ')
}

如今我們輸入

node ./bin/snowcat.js  init

《仿vue的前端自定義cmd敕令拉取項目腳手架》

接下來我們來應用git來拉取我們的項目
編寫init.js

'use strict'
const exec = require('child_process').exec
const projectUrl = 'https://github.com/screetBloom/wecat.js.git'

module.exports = () => {
    console.log('this is my first commander >>>>>> ')

    // git敕令，長途拉取項目並自定義項目名
    let cmdStr = `git clone `+projectUrl

    // 在nodejs中實行shell敕令，第一個參數是敕令，第二個是詳細的回調函數
    exec(cmdStr, (error, stdout, stderr) => {
        if (error) {
            console.log(error)
            process.exit()
        }
        console.log('pull我們的項目已勝利了')
        process.exit()
    })

}

如今我們再輸入

node ./bin/snowcat.js  init

此時項目已能夠準確的拉取下來了，接下來我們來舉行當地全局裝置，在當前的package.json途徑下輸入”npm link”（能夠當地全局運用了）
在別的途徑下拉取項目
《仿vue的前端自定義cmd敕令拉取項目腳手架》
勝利，那末如今我們把它放到npm堆棧里，如果上一次你已放進去0.0.1版本了，此次就須要修正版本號了，操縱以下：

// 比方對末了一名舉行修正：增1，敕令，回車：
npm version patch    
// 比方對第二位舉行了修正：增1，敕令：
npm version minor    
// 比方對第一名舉行了修正：增1，敕令：
npm version major  
     
// 檢察一切的版本號：
npm view snowcat versions

末了我們再在別的机械上測試

// 全局裝置腳手架
npm install -g snowcat
// 拉取預定義模板
snowcat init

《仿vue的前端自定義cmd敕令拉取項目腳手架》
《仿vue的前端自定義cmd敕令拉取項目腳手架》

0.0.1版本的腳手架分享到此結束

    原文作者：wim_Chen
    原文地址: https://segmentfault.com/a/1190000014529952
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞