Создайте свою собственную установку cnpm/npm и создайте собственную архитектуру проекта

Node.js внешний интерфейс NPM внешний фреймворк

Какой-то бред (пропустите, если смотрите прямо на код)

В настоящее время существует множество фреймворков внешнего интерфейса и множество внутренних фреймворков компаний, разработанных независимо или совместно.Модули/компоненты, концепции дизайна фреймворка, анализ архитектуры и базовая упаковка используются для построения каркаса высотных зданий. , чтобы «обслуживание, повторное использование, две вспомогательные разработки, высокая эффективность» и другие концепции, сжатые в два словалегко использовать(быть ленивым)

Структурная система внутренних исследований и разработок компании в целом имеет тенденциюграфика, визуализация, но большинство из них сделают последний шаг, то есть когда структура и стиль (скин) будут выбраны модульно и потом захотят сгенерировать этот проект одним кликом, а? Без этой функции этого добиться невозможно, а куча структур зависимостей npm/cnpm — это не то, что мне нужно! Тогда эта статья здесь, чтобы спасти вас, давайте построимСобственные зависимости файла структуры проекта(Пришло время освободить руки).

Техническая реализация

Следующие технические реализации основаны на js, node и встроенном модуле fs.

желаемая цель

  1. просто используйтеОдна командная строка, один файлчтобы создать структуру проекта
  2. Визуализируйте процесс выполнения и отобразите ход создания файла в индикаторе команды cmd.
    loading
  3. Требуется древовидная карта сгенерированного каталога проекта
    tree
  4. Произвольная структура проекта
  5. Вторичная разработка кода

необходимые инструменты

  • node
  • cmd (обозначение команды)

Создание минималистской структуры проекта (тестирование воды)

Шаг 1: Введите каталог файла, который вы хотите сгенерировать, одним щелчком мыши.

1. Win+r введите cmd и нажмите Enter 2. cd в каталог проекта (место, где вы хотите создать сгенерированный каталог) 3. Как установить Baidu на узел

Шаг 2: Создайте server.js

Откройте свой любимый редактор и скопируйте следующий код напрямую

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

node server

Взгляните на структуру вашего проекта. По крайней мере, структура проекта стала такой

tree

Я должен восхищаться мощью fs здесь.Адрес API узла fs прикреплен ниже.

http://nodejs.cn/api/fs.html

Шаг 3: Это еще не конец, есть еще файлы, которые нужно прочитать, и файлы, которые нужно сгенерировать.

Структура проекта, которую мы хотим, уже появилась выше, но этого требования нам далеко не достаточно, нам также нужно создать файлы js и файлы html.

1) Создайте index.html в этом каталоге

里面写书写以下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	  <h1>Hello World!</h1>
	</body>
</html>

2) сервер.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 изменен только суффикс имени.

这里写图片描述

Создайте настраиваемую структуру проекта, включающую полный каталог, дерево, цвет и путь (дополнительно).

Tips：以下步骤会分步介绍各个阶段的执行过程（最下方含有完整的github项目地址）

Анализ 1: Процедурная сборка кода 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)

Общий процесс такой же, как и выше, вот несколько технологических стеков:

1、_nodeSum: 多线程异步的情况下，没能很好得知是否全部执行完成，所以采用了该方式(定时器不可取)

2、_nodeTree: 树结构console.log并不是很完美

Анализ 2: _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 строк сложного кода, содержащего рекурсию + асинхронность, можно будет успешно написать за один раз.Под узлом, будь то отладчик или console.log() в Это сложно отлаживать в cmd Вот мощная среда отладки узлов, так что вы можете использовать ее в своих любимыхОтладка под гугл

Техническое обучение или рекомендация

node-inspector

Средства отладки (устанавливаются на основе npm):node-inspector

Процесс реализации:

1. Установите инспектор узлов

npm install node-inspector -g

2. Порт прослушивания (исполнение)

node-inspector

run

3. cmd в ваш каталог, чтобы выполнить режим отладки узла

node --debug-brk server.js

run

4. Откройте Google Chrome и введите указанный выше адрес в адресной строке: 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, потому что это синхронно-рекурсивная идея, если вы обращаете внимание на область действия и избегаете загрязнения переменных.

Стек технологий:

То есть, как упоминалось ранее, нет хорошего способа отслеживать, выполняются ли все многопоточные асинхронные обратные вызовы.Если да, пожалуйста, прокомментируйте ниже и нет красивой структуры дерева вывода.Есть еще некоторые недостатки.

Техническое обучение или рекомендация

让你的console.log色彩缤纷

Здесь есть два типа: один — метод записи на узле, а другой — метод записи обычной отладки веб-страницы (они разные).

1, запись узла

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']

2. Написание веб-отладки

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

Это понятно с первого взгляда.

Анализ четвертый: _nodeTree: результат сравнения между текущим значением и суммой создает прогресс в реальном времени, такой как 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

с личной информацией

info

Разбор пятый: mkDir: запись массива параметров

/*------------------------注意事项------------------------
1、文件夹名称不可相同、文件名称相同的情况下后缀名不可相同
2、文件夹内方可创建child子项目目录，文件下创建child对象不执行
3、文件夹名称不可包含'.'字符
----------------------------END--------------------------*/

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

Краткое описание:

Простой для понимания формат, но, как упоминалось в мерах предосторожности, нет запроса на создание папки под «.» и где он не выполняется.Друзья, которым это нужно, могут изменить его самостоятельно.

полная демонстрация

github: https://github.com/gs3170981/cnpmDIY (не забудьте добавить звездочку, если им легко пользоваться!)

##о

сделать: o︻そ╆OVE▅▅▅▆▇◤ (все в небе)

блог: http://blog.csdn.net/mcky_love

заключительные замечания

Структура пользовательского проекта идеально согласуется с пользовательской структурой и подходит для визуальной разработки, модульной совместной разработки, разработки проекта одним человеком, обслуживания несколькими людьми и т. д. Особое использование популярной науки здесь отсутствует.fs решает большинство проблем за нас, а остальное ограничивается вашей дырой в мозгу!

Категории