打造屬於本身的cnpm/npm安裝，生成自定義項目架構

時間  2019-11-05
標籤 打造 屬於 本身 cnpm npm 安裝 生成 自定義 項目 架構 欄目 系統架構 简体版
原文   原文鏈接

一些廢話（直接看代碼的可跳過）

如今前端圈子框架繁多，不乏一些自主研發或合做開發的公司內部框架，模塊/組件化、框架設計理念、架構分析、底層封裝等去搭建高樓大廈的骨架，爲的就是「維護、複用、二次開發、高效」等理念，濃縮就是兩字好用（toulan）css

公司內部研發的框架體系通常都會趨向於圖形化、可視化，不過大多數都會作到最後一步，那就是模塊化的選擇了該結構，該樣式（皮膚）而後想去一鍵生成這個項目的時候，啊？沒這個功能，實現不了，npm/cnpm的一堆依賴結構不是我想要的！那這篇文章就是來解救你了，讓咱們來打造屬於本身的項目結構文件依賴（是時候解放你的雙手了）。html

技術實現

如下技術實現是基於js、node以及自帶的fs模塊前端

想要達到的目的

  1. 只用一句命令行，一個文件來搞定項目結構的建立
  2. 執行過程可視化，在cmd命令指示符中顯示文件建立的進度
    loading
  3. 須要有生成項目目錄的樹狀圖
    tree
  4. 項目結構任意化
  5. 代碼可二次開發性

須要的工具

  • node
  • cmd（命令指示符）

打造一個極簡的項目結構建立（試水篇）

步驟一：進入你想要一鍵生成的文件目錄

一、win+r輸入cmd回車 二、cd進入到該項目目錄（想一建生成目錄的地方） 三、node如何安裝自行百度node

步驟二：建立server.js

打開你善用的編輯器直接複製如下代碼git

var fs = require("fs")

var mkDir = ['css', 'fonts', 'img', 'module']
/* 建立目錄 */
for (var i = 0; i < mkDir.length; i++) {
  fs.mkdir(mkDir[i], function (err) {
    if (err) {
      return console.error(err);
    }
  })
}
複製代碼

ctrl+s保存，在cmd中輸入github

node servernpm

回頭看一下你的項目結構吧。 若是不出意外的話，項目結構已經變成了這樣api

tree

這裏不得不佩服fs的強大，如下附上node fs API地址。數組

http://nodejs.cn/api/fs.html瀏覽器

步驟三：還沒完，還有讀取文件以及生成文件

上面已經出現了咱們想要的項目結構，不過這需求對咱們來講還遠遠不足，咱們還須要建立js文件以及html文件之類呢。

1）在該目錄下建立index.html

裏面寫書寫如下代碼：
複製代碼
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>Hello World!</h1> </body> </html> 複製代碼

2）server.js

var fs = require("fs")

/* 讀取index.html文件建立indexx.html文件 */
fs.readFile('index.html', 'utf8', function (err, data) {
    if (err) {
      return console.error(err);
    }
    fs.appendFile('indexx.html', data, 'utf8', function (err) {
      if (err) {
        return console.error(err);
      }
    });
});

複製代碼

cmd執行

node server

回頭看下項目目錄，是否多了個indexx.html的文件，若是多了就說明成功了，以上的操做是讀取了index.html內的全部文本內容，而後建立了indexx.html的超文本，固然對fs來講，只是修改了後綴名而已。

這裏寫圖片描述

打造一個自定義幷包含完善的Catalog、Tree、color、Path的項目結構（進階篇）

Tips：如下步驟會分步介紹各個階段的執行過程（最下方含有完整的github項目地址）
複製代碼

解析一：構建server.js代碼過程化

var _methods = {
  data: { /*數據存放位置*/
	now: 0, /*當前進程計數*/
	sum: 0, /*一共進程次數*/
	log: '' /*輸出的tree*/
  },
  _nodeInit: function (mkDir) { /*初始化*/
    this._nodeSum(mkDir) /*先得出一共須要的執行次數，以便去判斷異步回來的當前次數*/
    this._nodeFor(mkDir) /*進入下個流程 --- 建立*/
  },
  _nodeFor: function (mkDir) { /*建立*/
	/*這兒是執行目錄結構建立的地方 而且每次異步回調後執行 this._nodeTree(++now) 以便去顯示當前建立進度*/
  },
  _nodeSum: function () { /*計算一共的建立次數*/
	/*爲何要先獲取總共的建立次數， 由於fs的函數建立是異步的， 過程當中很難判斷所有異步是否已經完成 而且tree的建立也是在這執行的 輸出給this.tree以及this.sum*/
  },
  _nodeTree: function () { /*當前進度判斷*/
	/*若是當前進度===總進度時 則執行以前就已經建立好了的 去console.log(this.tree)出來*/
  }
}

var fs = require("fs") /*引入fs*/
var mkDir = [ /*項目結構樹一覽*/
  {
    name: 'csss', /*文件夾名稱*/
    child: [
      {
        name: 'public.css', /*文件名稱*/
        val: '' /*文件內容*/
      }, {
	    name: 'asd',
	    child: [
		  {
			  name: 'asd'
		  }
		]
      }
    ]
  }
]
_methods._nodeInit(mkDir)
複製代碼

大體流程如上，這兒有一些技術棧：

一、_nodeSum: 多線程異步的狀況下，沒能很好得知是否所有執行完成，因此採用了該方式(定時器不可取)

二、_nodeTree: 樹結構console.log並非很完美
複製代碼

解析二：_nodeFor：無限子節點異步回調建立目錄結構（核心代碼）

_nodeFor: function (mkDir, path) {
    var self = this
    for (var i = 0; i < mkDir.length; i++) {
      var name = mkDir[i].name
      var child = mkDir[i].child
      var path_block = path ? (path + '/' + name) : name 
      if (name.lastIndexOf('.') === -1) { /*判斷文件or文件夾 --- 文件夾*/
        (function (path, child, name) { /*防止異步回調後變量被污染*/
          fs.mkdir(path, function (err) {
            if (err) {
              return console.error(err)
            }
            self._nodeTree(++self.data.now, path, name) /*加載loading*/
            if (child) {
              self._nodeFor(child, path) /*遞歸*/
            }
          })
        })(path_block, child, name)
      } else { /*文件*/
        (function (path, val, name) {
          fs.appendFile(path_block, val ? val : '', 'utf8', function (err) {
            if (err) {
              return console.error(err)
            }
            self._nodeTree(++self.data.now, path, name) /*加載loading*/
          })
        })(path_block, mkDir[i].val, name)
      }
    }
  }
複製代碼

技術棧：

這段代碼並非很難理解，但調試起來確實是費勁，畢竟含有遞歸+異步的40行復雜代碼誰也不能保證一次就能寫成功，在node下，不管是debugger仍是console.log()在cmd中調試都很難受，這兒推薦個強大的node-debug調試環境，讓你在喜歡的谷歌下調試

技術學習or推薦

node-inspector
複製代碼

調試工具（基於npm安裝）：node-inspector

執行流程：

一、安裝 node-inspector

npm install node-inspector -g

二、監聽端口（執行）

node-inspector

run

三、cmd到你的目錄下執行node debug模式

node --debug-brk server.js

run

四、打開谷歌瀏覽器，在地址欄輸入以上顯示的地址：http://127.0.0.1:8080/debug?port=5858 就能夠進行調試了，成功後會到如下頁面，按F8便可執行到你打斷點處，若是沒打則直接結束。（若是不行請刷新下）

Debug

解析三：_nodeSum：計算總執行次數

console.log('\x1B[90m' + 'Downloading Current JS to ' + __dirname + '\x1B[39m')
    var self = this
    function count (mkDir, j) { /*i爲次數, j爲層級*/
      for (var i = 0; i < mkDir.length; i++) {
        (function (mkDir, i, j) {
          var log = log_j(j)
          var name = mkDir[i].name.lastIndexOf('.') === -1 ? mkDir[i].name : ('\x1B[90m' + mkDir[i].name + '\x1B[39m')
          self.data.log += log + '--' + name + '\n'
          if (mkDir[i].child) {
            count(mkDir[i].child, ++j)
          }
          self.data.sum++
        })(mkDir, i, j ? j : 0)
      }
    }
    function log_j (val) {
      var log = ''
      if (val === 0) return '|'
      for (var i = 0; i < val; i++) {
        log += '　' + '|'
      }
      return '|' + log
    }
    count(arr)
    console.log('\x1B[90m' + 'Altogether contains ' + this.data.sum + 'second Execution process' + '\x1B[90m')
複製代碼

簡述：

這兒是在異步執行_nodeFor以前就先預解析完了樹結構以及總共的執行次數，由於是同步遞歸思想，只要注意做用域以及避免變量污染便可。

技術棧：

那就是以前提過的，沒有一個好的方法能夠監聽到多線程異步的回調是否所有執行完成，若是有的話請在下方評論而且沒有很好看的輸出樹結構，仍然有些瑕疵。

技術學習or推薦

讓你的console.log色彩繽紛
複製代碼

這兒有兩種，一種是node上的寫法，一種是日常網頁調試的寫法（二者不一樣）

一、node寫法

console.log('\x1B[90m' + 'Hello, Do you think my color has changed?'  + '\x1B[39m')
複製代碼
/* 顏色參考值 */

'bold'          : ['\x1B[1m',  '\x1B[22m'],  

'italic'        : ['\x1B[3m',  '\x1B[23m'],  

'underline'     : ['\x1B[4m',  '\x1B[24m'],  

'inverse'       : ['\x1B[7m',  '\x1B[27m'],  

'strikethrough' : ['\x1B[9m',  '\x1B[29m'],  

'white'         : ['\x1B[37m', '\x1B[39m'],  

'grey'          : ['\x1B[90m', '\x1B[39m'],  

'black'         : ['\x1B[30m', '\x1B[39m'],  

'blue'          : ['\x1B[34m', '\x1B[39m'],  

'cyan'          : ['\x1B[36m', '\x1B[39m'],  

'green'         : ['\x1B[32m', '\x1B[39m'],  

'magenta'       : ['\x1B[35m', '\x1B[39m'],  

'red'           : ['\x1B[31m', '\x1B[39m'],  

'yellow'        : ['\x1B[33m', '\x1B[39m'],  

'whiteBG'       : ['\x1B[47m', '\x1B[49m'],  

'greyBG'        : ['\x1B[49;5;8m', '\x1B[49m'],  

'blackBG'       : ['\x1B[40m', '\x1B[49m'],  

'blueBG'        : ['\x1B[44m', '\x1B[49m'],  

'cyanBG'        : ['\x1B[46m', '\x1B[49m'],  

'greenBG'       : ['\x1B[42m', '\x1B[49m'],  

'magentaBG'     : ['\x1B[45m', '\x1B[49m'],  

'redBG'         : ['\x1B[41m', '\x1B[49m'],  

'yellowBG'      : ['\x1B[43m', '\x1B[49m']  
複製代碼

二、Web端調試寫法

console.log("%cHello, Do you think my color has changed?", "color: green")
複製代碼

這個一看就懂了。

解析四：_nodeTree：當前值與sum的比較輸出打造猶如cnpm的實時進度

_nodeTree: function (now, path, name) { /*異步過程界面化*/
    console.log('[' + now + '/' + this.data.sum + ']\x1B[90m ' + name + '\x1B[39m' + '\x1B[32m' + ' installed ' + '\x1B[39m' + 'at ' + path)
    if (now === this.data.sum) { /*噹噹前進度 === sum時*/
      console.log('\x1B[32m' + 'All package installed ' + this.data.sum + ' project installed from ' + __dirname + '\x1B[39m')
      console.log('\x1B[35m' + 'Project catalogue:' + '\x1B[39m')
      console.log(this.data.log + '------------------------------------')
      console.log(",'''╭⌒╮⌒╮.',''',,',.'',,','',.\n" +
      " ╱◥██◣''o',''',,',.''.'',,',.\n" +
      "｜田｜田田│ '',,',.',''',,',.''\n" +
      "╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬" + '\n------------------------------------')
      console.log('\x1B[35m' + 'MAKE：o︻そ╆OVE▅▅▅▆▇◤\nBLOG：http://blog.csdn.net/mcky_love\nGITHUB：https://github.com/gs3170981' + '\x1B[39m')
    }
  }
複製代碼

簡述：

這兒執行的就是實時顯示當前進度以及所有執行完成後的tree與我我的的信息(#^.^#)
複製代碼

實時當前進度：

loading

結束後的tree

tree

與我的信息

info

解析五：mkDir：調參的數組寫法

/*------------------------注意事項------------------------
一、文件夾名稱不可相同、文件名稱相同的狀況下後綴名不可相同
二、文件夾內方可建立child子項目目錄，文件下建立child對象不執行
三、文件夾名稱不可包含'.'字符
----------------------------END--------------------------*/

var mkDir = [
  {
    name: 'csss',
    child: [
      {
        name: 'public.css',
        val: 'body{font-size: 12px;}'
      }, {
        name: 'publicccc',
        child: [
          {
            name: 'asd'
          }
        ]
      }
    ]
  }, {
    // ......
  }
]
複製代碼

簡述：

通俗易懂的格式，不過如注意事項所說，這兒並無對‘.’下建立文件夾與不執行的地方進行try提示，須要的朋友可自行git修改。

一個完整的DEMO

github：https://github.com/gs3170981/cnpmDIY（好用的話記得加星哦！）

##關於

make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）

blog：http://blog.csdn.net/mcky_love

結束語

自定義項目結構與自定義的框架完美契合，適用於可視化開發，模塊化合做開發，單人項目開發，多人維護等，這兒就不科普具體用處了，fs幫咱們解決了大多數問題，剩下的用途僅限制於你的腦洞！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程