91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

仿vue-cli如何搭建屬于自己的腳手架

發布時間:2021-02-18 09:54:24 來源:億速云 閱讀:335 作者:小新 欄目:web開發

小編給大家分享一下仿vue-cli如何搭建屬于自己的腳手架,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

腳手架是啥

從前我總覺得腳手架是個很高大上的東西,好像得牛叉:ox:一點的人才寫的出來,可望而不可即。其實并不是因為困難使我們放棄,而是因為放棄才顯得困難(這是個好詞好句:see_no_evil:)。只要你肯花個一天半天的時間:fist:,也能寫出屬于你自己的腳手架。

早前腳手架這個詞是從 vue-cli 這里認識的,我們通過 npm install -g vue-cli 命令全局安裝腳手架后, 再執行 vue init webpack project-name 就能初始化好一個自己的項目,真是尼瑪的神奇:hushed:。但你有沒有想過為什么我們執行 vue init 這個命令就能有個自己的項目呢。今天,就讓我們一起來揭開廬山真面目吧!

等等:hand:,扯了一堆,你好像還沒說下啥是腳手架?emmm... 它就是個工具,方便我們新建項目用的,有了這個項目我們就能直接開發了。其實我們本可以用 git clone url 來新建(復制)項目,再 cuo 一點的方法就是復制粘貼整個文件夾,一樣也能達到初始化的目的。腳手架的本質也是從遠程下載一個模板來進行一個新項目。額。所以。。。有什么不同呢?就高大上啊:anguished:。當然不止于此啦,腳手架可是高級版的克隆,它主要是提供了交互式的命令讓我們可以動態的更改模板,然后用一句命令就可以一勞永逸了(當然還是要維護的),這應該是最主要的區別吧,反正現在我是這么想的:cry:。

好了,本章的目的就是帶領大家寫一個簡易版的腳手架 xr-cli(名字愛取啥取啥),目標是實現一個 xr init template-name project-name 這樣的命令,廢話少說,開始進入正題吧:rocket::rocket::rocket:。

源碼地址: https://github.com/lgq627628/xr-cli

前置知識

其實一個簡易版的 xr-cli 的代碼量并不多,所以這里我們先來小小介紹一下其中要依賴的包,如果你用過這些工具可以跳過,沒用過的請務必一定要瞟一眼。

commander

這是用來編寫指令和處理命令行的,具體用法如下:

const program = require("commander");
// 定義指令
program
 .version('0.0.1')
 .command('init', 'Generate a new project from a template')
 .action(() => {
 // 回調函數
 })
// 解析命令行參數
program.parse(process.argv);

回憶一下,我們曾用過的 vue init 的命令就是這樣聲明的。

inquirer

這是個強大的交互式命令行工具,具體用法如下:

const inquirer = require('inquirer');
inquirer
 .prompt([
 // 一些交互式的問題
 ])
 .then(answers => {
 // 回調函數,answers 就是用戶輸入的內容,是個對象
 });

想象一下我們用 vue init webpack project-name 之后是不是會有幾個交互問題,問你文件名啊、作者啊、描述啊、要不要用 eslint 啊等等之類的,就是用這個來寫的。

chalk

這是用來修改控制臺輸出內容樣式的,比如顏色啊,具體用法如下:

const chalk = require('chalk');
console.log(chalk.green('success'));
console.log(chalk.red('error'));

ora

這是一個好看的加載,就是你下載的時候會有個轉圈圈的那種效果,用法如下:

const ora = require('ora')
let spinner = ora('downloading template ...')
spinner.start()

download-git-repo

看名字很明顯了,這是用來下載遠程模板的,支持 GitHub、 GitLab 和 Bitbucket 等,用法如下:

const download = require('download-git-repo')
download(repository, destination, options, callback)

其中 repository 是遠程倉庫地址;destination 是存放下載的文件路徑,也可以直接寫文件名,默認就是當前目錄;options 是一些選項,比如 { clone:boolean } 表示用 http download 還是 git clone 的形式下載。

目錄搭建

ok,有了上面的知識儲備之后,我們就正式開始擼了。

首先我們要創建一個文件夾,并取名叫 xr-cli;

在該目錄下執行 npm init 命令(你應該有安裝 node 吧:joy:),一路回車,就會生成一個生成 package.json 文件,在 package.json 里面寫入以下依賴并執行 npm install 安裝,如下:

"dependencies": {
 "chalk": "^2.4.2",
 "commander": "^2.19.0",
 "download-git-repo": "^1.1.0",
 "inquirer": "^6.2.2",
 "ora": "^3.2.0"
}

新建一個 bin 文件夾,并在 bin 目錄下新建一個無后綴名的 xr 文件,并寫上:

#!/usr/bin/env node
console.log('hello');

這個文件就是我們整個腳手架的入口文件,我們用 node ./bin/xr 運行一下,就能在控制臺打印出 hello,如下圖:

仿vue-cli如何搭建屬于自己的腳手架

這里要注意開頭的 #!/usr/bin/env node

這個語句必須加上,主要是為了讓系統看到這一行的時候,會沿著該路徑去查找 node 并執行,主要是為了兼容 Mac ,確保可執行。

bin 目錄初始化

當前,bin 目錄下就只有一個文件,就是入口文件 xr。所以現在我們先來編寫這個文件,由于內容較少,我們直接看代碼:

#!/usr/bin/env node
const program = require('commander')

// 定義當前版本
// 定義使用方法
// 定義四個指令
program
 .version(require('../package').version)
 .usage('<command> [options]')
 .command('add', 'add a new template')
 .command('delete', 'delete a template')
 .command('list', 'list all the templates')
 .command('init', 'generate a new project from a template')
 
// 解析命令行參數
program.parse(process.argv)

這個文件的主要作用就是定義指令,現在我們用 node ./bin/xr 運行一下,就能看到如下結果:

仿vue-cli如何搭建屬于自己的腳手架

當然,你可能會覺得每次輸入 node ./bin/xr

這個命令有點麻煩,沒關系,我們可以在 package.json 里面寫入已下內容:

// bin 用來指定每個命令所對應的可執行文件的位置
"bin": {
 "xr": "bin/xr"
}

然后在根目錄下執行 npm link (就是把命令掛載到全局的意思),這樣我們每次只要輸入 xr,就可以直接運行了,so cool,就像下面這樣:

仿vue-cli如何搭建屬于自己的腳手架

是不是好像有點樣子了呢:grin::grin::grin:,那就讓我們繼續完善下 bin 目錄吧!ok,讓我們在 bin 目錄下再新建四個文件,分別對應上面的四個指令,然后分別處理四個指令要做的事情,如下圖:

仿vue-cli如何搭建屬于自己的腳手架

同樣的,我們修改一下 package.json 里面的 bin 內容,如下:

"bin": {
 "xr": "bin/xr",
 "xr-add": "bin/xr-add",
 "xr-delete": "bin/xr-delete",
 "xr-list": "bin/xr-list",
 "xr-init": "bin/xr-init"
}

然后執行 npm unlink 解綁全局命令,再執行 npm link 重新把命令綁定到全局,就像下面這樣:

仿vue-cli如何搭建屬于自己的腳手架

最后順便在根目錄下新建一個 template.json 文件,里面的內容就是一個 {}

編寫具體指令

好了,一切準備就緒,接下來就讓我們來寫下具體的四個指令吧。

xr-add

這個內容也是比較少,直接看代碼:

#!/usr/bin/env node

// 交互式命令行
const inquirer = require('inquirer')
// 修改控制臺字符串的樣式
const chalk = require('chalk')
// node 內置文件模塊
const fs = require('fs')
// 讀取根目錄下的 template.json
const tplObj = require(`${__dirname}/../template`)

// 自定義交互式命令行的問題及簡單的校驗
let question = [
 {
 name: "name",
 type: 'input',
 message: "請輸入模板名稱",
 validate (val) {
  if (val === '') {
  return 'Name is required!'
  } else if (tplObj[val]) {
  return 'Template has already existed!'
  } else {
  return true
  }
 }
 },
 {
 name: "url",
 type: 'input',
 message: "請輸入模板地址",
 validate (val) {
  if (val === '') return 'The url is required!'
  return true
 }
 }
]

inquirer
 .prompt(question).then(answers => {
 // answers 就是用戶輸入的內容,是個對象
 let { name, url } = answers;
 // 過濾 unicode 字符
 tplObj[name] = url.replace(/[\u0000-\u0019]/g, '')
 // 把模板信息寫入 template.json 文件中
 fs.writeFile(`${__dirname}/../template.json`, JSON.stringify(tplObj), 'utf-8', err => {
  if (err) console.log(err)
  console.log('\n')
  console.log(chalk.green('Added successfully!\n'))
  console.log(chalk.grey('The latest template list is: \n'))
  console.log(tplObj)
  console.log('\n')
 })
 })

這個文件主要目的就是添加模板并存儲起來,上面的注釋應該都寫的挺清楚了。我們執行 xr add 來看看效果:

仿vue-cli如何搭建屬于自己的腳手架

這里的模板名稱(自己隨便取)相當于 vue init webpack project-name 當中的 webpack

;模板地址要注意一下,像下面這樣寫就可以,這里以 github 為例:

仿vue-cli如何搭建屬于自己的腳手架

xr-delete

如果你理解了上面的那個步驟,這步對你來說應該也是灑灑水啦!上代碼:

#!/usr/bin/env node

const inquirer = require('inquirer')
const chalk = require('chalk')
const fs = require('fs')
const tplObj = require(`${__dirname}/../template`)

let question = [
 {
 name: "name",
 message: "請輸入要刪除的模板名稱",
 validate (val) {
  if (val === '') {
  return 'Name is required!'
  } else if (!tplObj[val]) {
  return 'Template does not exist!'
  } else {
  return true
  }
 }
 }
]

inquirer
 .prompt(question).then(answers => {
 let { name } = answers;
 delete tplObj[name]
 // 更新 template.json 文件
 fs.writeFile(`${__dirname}/../template.json`, JSON.stringify(tplObj), 'utf-8', err => {
  if (err) console.log(err)
  console.log('\n')
  console.log(chalk.green('Deleted successfully!\n'))
  console.log(chalk.grey('The latest template list is: \n'))
  console.log(tplObj)
  console.log('\n')
 })
 })

應該很好理解,就不過多解釋了,我們直接執行 xr delete 看下效果:

仿vue-cli如何搭建屬于自己的腳手架

xr-list

這個更簡單了,兩行代碼搞定:

#!/usr/bin/env node

const tplObj = require(`${__dirname}/../template`)
console.log(tplObj)

是不是簡單到爆:boom:。我們執行 xr list 看看效果:

仿vue-cli如何搭建屬于自己的腳手架

因為剛才一添加一刪除,所以目前沒有模板,就輸出 {}

xr-init

這應該是最主要(但不難)的一步了,畢竟我們寫到現在還沒有通過命令初始化過一個項目呢:sob:。所以這步的重點就是執行 download 方法,并傳入相應參數,具體看代碼:

#!/usr/bin/env node

const program = require('commander')
const chalk = require('chalk')
const ora = require('ora')
const download = require('download-git-repo')
const tplObj = require(`${__dirname}/../template`)

program
 .usage('<template-name> [project-name]')
program.parse(process.argv)
// 當沒有輸入參數的時候給個提示
if (program.args.length < 1) return program.help()

// 好比 vue init webpack project-name 的命令一樣,第一個參數是 webpack,第二個參數是 project-name
let templateName = program.args[0]
let projectName = program.args[1]
// 小小校驗一下參數
if (!tplObj[templateName]) {
 console.log(chalk.red('\n Template does not exit! \n '))
 return
}
if (!projectName) {
 console.log(chalk.red('\n Project should not be empty! \n '))
 return
}

url = tplObj[templateName]

console.log(chalk.white('\n Start generating... \n'))
// 出現加載圖標
const spinner = ora("Downloading...");
spinner.start();
// 執行下載方法并傳入參數
download (
 url,
 projectName,
 err => {
 if (err) {
  spinner.fail();
  console.log(chalk.red(`Generation failed. ${err}`))
  return
 }
 // 結束加載圖標
 spinner.succeed();
 console.log(chalk.green('\n Generation completed!'))
 console.log('\n To get started')
 console.log(`\n cd ${projectName} \n`)
 }
)

ok,我們執行一下 xr init simple test ,記得先執行一下 xr add

仿vue-cli如何搭建屬于自己的腳手架

現在我們就可以在左側的目錄中看到 test 項目了,如下圖:

仿vue-cli如何搭建屬于自己的腳手架

至此,一個小小的腳手架就做完了。:rose::rose::rose:此處應該有鮮花和掌聲:clap::clap::clap:

發布到 npm

既然以上命令都執行成功了,那接下來我們就把它發布到 npm 上吧(寫都寫了,不能浪費:grimacing:)。

  • 刪除 test 文件夾,它就本地測試用的,用完就拋棄它(當然做人不能這樣)

  • 在根目錄下新建 README.md 文件,隨便寫點使用說明,假裝正經一下

  • 在根目錄下新建 .npmignore 文件,并寫入 /node_modules ,意思就是發布的時候忽略 node_modules 文件夾,

  • 去 npm 官網注冊個賬號(很簡單的),同時搜索一下 xr-cli 這個名字,看看有沒有人用,有的話就換一個羅

仿vue-cli如何搭建屬于自己的腳手架

現在讓我們回到項目根目錄,執行 npm login 登入 npm 賬號,再執行 npm publish 發布,就像下面這樣:

仿vue-cli如何搭建屬于自己的腳手架

沒錯,就是這樣兩個簡單的命令,我們就發布成功啦,真是可喜可賀:beer::beer::beer:。大概過一分鐘左右(反正挺快的),我們再去 npm 官網搜下 xr-cli,就可以看到自己的腳手架啦,哈哈哈哈,賊開心:+1::+1::+1:。

仿vue-cli如何搭建屬于自己的腳手架

這里補充說明一點:根據規范,只有在發包的24小時內才允許撤銷發布的包,所以為了不污染 npm 網站,如果只是測試的話就執行 npm unpublish --force 刪除吧,畢竟我們都是有素質的人。

小試牛刀

別急,還沒有結束:no_good:?♀?。發都發出去了,怎么也得驗證一波撒。嗯,說的有道理,無法反駁,那就趕緊驗收吧!這里我們記得先用 npm unlink 解綁一下命令,不然會相互影響。下面我們打開終端,輸入 npm i xr-cli -g 全局安裝一下腳手架,然后執行 xr ,如果出現下圖中的模樣就說明已經安裝成功了。

仿vue-cli如何搭建屬于自己的腳手架

接下來進入到桌面,執行 xr init simple xr-test,不一會就可以在桌面上看到自己的項目啦。

仿vue-cli如何搭建屬于自己的腳手架 仿vue-cli如何搭建屬于自己的腳手架

以上是“仿vue-cli如何搭建屬于自己的腳手架”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

南江县| 临朐县| 义马市| 东平县| 汕头市| 东港市| 普陀区| 永丰县| 大余县| 哈尔滨市| 英超| 瑞丽市| 孝昌县| 靖宇县| 石棉县| 齐齐哈尔市| 青川县| 广宗县| 吉水县| 梧州市| 咸阳市| 顺义区| 光泽县| 霍山县| 珠海市| 漳浦县| 镇平县| 桐柏县| 信阳市| 晋江市| 平陆县| 临城县| 大方县| 石阡县| 永康市| 鸡泽县| 景泰县| 宕昌县| 兴国县| 通海县| 瑞金市|