亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

element用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例

 更新時(shí)間:2021年12月23日 10:51:52   作者:Wailen  
本文主要介紹了element-ui的用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

背景

在公司的項(xiàng)目中,每次碰到新需求的時(shí)候,你是不是都還在用新建頁(yè)面 => 往頁(yè)面中添加內(nèi)容,如vue模板 => 添加路由。難道不覺(jué)得麻煩嗎?如果是的話(huà),不妨試試自動(dòng)化構(gòu)建吧,太香了~

element-ui的自動(dòng)化構(gòu)建是怎么做的

在開(kāi)源項(xiàng)目中,特別是UI庫(kù)的開(kāi)發(fā),有太多人協(xié)同,每個(gè)人的code習(xí)慣也都不一樣。并且UI庫(kù)中每個(gè)組件都還會(huì)涉及到多語(yǔ)言、單元測(cè)試、路由、組件的readme.md文檔等文件。所以如果每次都慢慢去創(chuàng)建這些則太麻煩了,并且多人修改公共文件如路由文件會(huì)產(chǎn)生非常多的沖突。所以在開(kāi)源項(xiàng)目中都會(huì)有非常多的腳本,去自動(dòng)化生成某些文件。

makefile

在element-ui項(xiàng)目根目錄有個(gè)makefile文件,每條命令的作用都在注釋中。windows用戶(hù)要使用make命令執(zhí)行腳本得下載。mac用戶(hù)不需要。

@# 默認(rèn)的#注釋會(huì)在日志中輸出,@#則不會(huì)
@# .PHONY的作用: 在下方的腳本命令中忽略檢查是否與dist、test目錄沖突,也就是說(shuō)無(wú)論如何都會(huì)去執(zhí)行命令
.PHONY: dist test

@# 執(zhí)行make命令時(shí),默認(rèn)執(zhí)行help腳本
default: help

@# 執(zhí)行`make build-theme`就是執(zhí)行`npm run build:theme`腳本,
@# : 冒號(hào)前面為執(zhí)行的命令,冒號(hào)后面第二行第一個(gè)應(yīng)該為一個(gè)tab,tab之后跟腳本命令
@# 也就是說(shuō)下面的為 'tab+npm npm build: theme'
# build all theme
@# 上面的build theme注釋可以查看下方的截圖,會(huì)在日志中輸出
build-theme: 
 npm run build:theme
install:
 npm install
dev:
 npm run dev
@# $()為使用函數(shù)
@# $@ 為當(dāng)前命令本身比如 'make new',$@ 就是 new
@# MAKECMDGOALS 特殊變量,該變量記錄了命令行參數(shù)指定的目標(biāo)列表,也就是說(shuō)使用這個(gè)變量,我們可以得到命令行的參數(shù)
@# 比如我們?cè)趧?chuàng)建新組件時(shí),使用腳本`make new wailen` MAKECMDGOALS 就等于 wailen
@# filter-out 反過(guò)濾函數(shù),過(guò)濾掉 $(MAKECMDGOALS) 中所有含有 $@ 的內(nèi)容
@# 結(jié)合new.js的內(nèi)容,下方腳本的意思也就是創(chuàng)建新組建,傳入組件名稱(chēng),組件名稱(chēng)不得為new,如果組件名稱(chēng)取為new,可以查看下方截圖
new:
 node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
@# 省略了一些腳本,感興趣的可以自行查看源碼
help:
 @echo "   \033[35mmake\033[0m \033[1m命令使用說(shuō)明\033[0m"
 @echo "   \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  安裝依賴(lài)"
 @echo "   \033[35mmake new <component-name> [中文名]\033[0m\t---  創(chuàng)建新組件 package. 例如 'make new button 按鈕'"
 @echo "   \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  開(kāi)發(fā)模式"
 @echo "   \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  編譯項(xiàng)目,生成目標(biāo)文件"
 @echo "   \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  部署 demo"
 @echo "   \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  發(fā)布到 npm 上"
 @echo "   \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t---  為網(wǎng)站添加新語(yǔ)言. 例如 'make new-lang fr'"

# 注釋輸出

過(guò)濾new關(guān)鍵字,當(dāng)傳入?yún)?shù)為new時(shí),過(guò)濾掉

當(dāng)然,如果不想使用make直接執(zhí)行node腳本即可,比如make new 組件名 等同于 node build/bin/new.js 組件名

new.js

new.js為自動(dòng)化的核心文件。我們先思考一下,創(chuàng)建組件文件無(wú)非就是兩個(gè)步驟

  • 創(chuàng)建文件
  • 添加內(nèi)容

file-save

主要是通過(guò)file-save這個(gè)包創(chuàng)建文件并添加內(nèi)容。先來(lái)看看api

const fileSave = require('file-save');
const content = "const fs = require('fs');"
const callback = () => { console.log('腳本執(zhí)行') }
fileSave('文件路徑')
   .write('文件內(nèi)容比如上面的content', 'utf8', callback) // 內(nèi)容寫(xiě)入成功會(huì)觸發(fā)回調(diào)
   .write('繼續(xù)添加content','utf8')
   .end('\n') // 文件操作結(jié)束,以空白行結(jié)束

如此便會(huì)生成如下文件

更多的文檔可以查看file-save

element-ui中就是先通過(guò)一個(gè)Files數(shù)組對(duì)象管理了需要?jiǎng)?chuàng)建的filename以及code content。

這樣直接循環(huán)Files就能創(chuàng)建對(duì)應(yīng)的文件了。

// 創(chuàng)建 package
// 組件生成的目錄
const PackagePath = path.resolve(__dirname, '../../packages', componentname);
Files.forEach(file => {
  fileSave(path.join(PackagePath, file.filename))
    .write(file.content, 'utf8')
    .end('\n');
});

引用資源文件的修改

另外,一般創(chuàng)建了組件還需要修改相應(yīng)需要引用組件的地方,比如路由配置文件等。我們同樣可以通過(guò)file-save去添加對(duì)應(yīng)的路由。本身file-save會(huì)覆蓋之前文件中的內(nèi)容,也就是刪除過(guò)后重新再次生成。所以如果是在原有基礎(chǔ)上做增的操作的話(huà),就需要獲取到原有文件的內(nèi)容,再在此基礎(chǔ)上拼接新內(nèi)容。我們可以這樣做:

const fileSave = require('file-save');
const fs = require('fs');

const content = `const fileSave = require('file-save'); `
const oldCode = fs.readFileSync('./demo.js')
fileSave('demo.js')
  .write(oldCode+content, 'utf8')
  .end('\n')

也就是通過(guò)fs模塊讀取到文件的舊內(nèi)容,再拼接即可。element-ui是這么做的:

fs.createWriteStream

file-save原理就是通過(guò)fs.createWriteStream這個(gè)api做了一層封裝。
簡(jiǎn)單說(shuō)下使用

const fs = require('fs')

//創(chuàng)建可寫(xiě)流 fs.WriteStream 類(lèi)的對(duì)象,繼承自 <stream.Writable>
const writer = fs.createWriteStream('createStream.js', { // 查找該文件,沒(méi)有則創(chuàng)建
    //默認(rèn)值為w, 通過(guò)調(diào)用writer.write方法寫(xiě)入數(shù)據(jù)的時(shí)候,會(huì)直接覆蓋文件所有的內(nèi)容,
    // 即會(huì)把文件之前的內(nèi)容全部再刪除,寫(xiě)入新的數(shù)據(jù)
    flags: 'w'
})


//寫(xiě)入數(shù)據(jù)到流
writer.write('這個(gè)文件的新內(nèi)容')

file-save的源碼內(nèi)容可以查看下面的偽代碼。

const savefs = {}
savefs._create_dir = function (fp, opts) {
  mkdirp.sync(fp, opts);
}
savefs.wstream = function (file) {
  var ws = fs.createWriteStream(file);
  this.writer = ws;
  return this;
}
savefs.write = function(chunk, encoding, cb) {
  ...
}

savefs.end = function(chunk, encoding, cb) {
  ...
}

savefs.finish = function(cb) {
  ...
}

savefs.error = function(cb) {
  ...
}
export { savefs }

當(dāng)然,其實(shí)我們可以直接使用node的fs.writeFile這個(gè)API去創(chuàng)建文件,

fs.writeFile('文件路徑','要寫(xiě)入的內(nèi)容',['編碼'],'回調(diào)函數(shù)');

可以發(fā)現(xiàn)參數(shù)跟file-save一樣

總結(jié)

歸根到底,自動(dòng)化創(chuàng)建組件無(wú)非就是兩個(gè)核心創(chuàng)建文件 添加內(nèi)容。通過(guò)file-save這個(gè)包就可以實(shí)現(xiàn)這兩個(gè)操作,然后我們?cè)俳Y(jié)合自身的業(yè)務(wù),配置好生成文件的路徑與內(nèi)容,以及做好某些公共文件對(duì)新文件資源引用的修改即可。有沒(méi)有覺(jué)得node寫(xiě)腳本,比寫(xiě)后端有意思多了~

到此這篇關(guān)于element用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element腳本自動(dòng)化構(gòu)建新組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue實(shí)現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)

    vue實(shí)現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)

    這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue過(guò)濾器filter的使用方法詳解

    vue過(guò)濾器filter的使用方法詳解

    這篇文章主要給大家介紹了關(guān)于vue過(guò)濾器filter的使用方法,Vue.js的過(guò)濾器(Filter)是一種可重用的功能,用于對(duì)文本進(jìn)行格式化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09
  • ant?design?vue的form表單取值方法

    ant?design?vue的form表單取值方法

    這篇文章主要介紹了ant?design?vue的form表單取值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • 詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度

    詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度

    這篇文章主要介紹了詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)

    使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)

    這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue虛擬化列表封裝的實(shí)現(xiàn)

    vue虛擬化列表封裝的實(shí)現(xiàn)

    這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • .netcore+vue 實(shí)現(xiàn)壓縮文件下載功能

    .netcore+vue 實(shí)現(xiàn)壓縮文件下載功能

    這篇文章主要介紹了.netcore+vue 實(shí)現(xiàn)壓縮文件下載功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09
  • uniapp和vue的區(qū)別詳解

    uniapp和vue的區(qū)別詳解

    這篇文章主要介紹了uniapp和vue的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-10-10
  • element-ui中按需引入的實(shí)現(xiàn)

    element-ui中按需引入的實(shí)現(xiàn)

    這篇文章主要介紹了element-ui中按需引入的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • VueRouter路由模式全面解析

    VueRouter路由模式全面解析

    這篇文章主要介紹了VueRouter路由模式的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06

最新評(píng)論