Научить вас создавать интерфейсный инструмент для строительных лесов с нуля

Node.js

Написано 2016.08.06

Эта статья изначально создана, пожалуйста, укажите информацию об авторе: Jrain Lau адрес проекта:GitHub.com/ назвал дождь AU/поколения...

предисловие

В реальном процессе разработки создание структуры проекта с нуля является головной болью, поэтому появились различные инструменты поддержки. Автор использует болееyoeman,express-generatorа такжеvue-cliявляется одним из них. Они богаты функциями, но основной функцией является возможность быстро построить полную структуру проекта.Разработчикам нужно только разрабатывать на основе сгенерированной структуры проекта, что очень просто и эффективно.

Как человек, который умрет, не бросив, после ознакомления с тем, как их использовать, я начал обдумывать их принципы. После тщательного изучения документации и исходного кода я наконец-то понял его основной принцип и на его основе построил проект под названиемSCIONлесов.

Теперь давайте возьмем SCION в качестве примера и создадим наш собственный инструмент для строительных лесов с нуля!

основной принцип

yoemanПостроение проекта должно обеспечитьyoeman-generator.yoeman-generatorПо сути, это шаблон проекта с полной файловой структурой, пользователям необходимо вручную поместить этиgeneratorскачать на локальный, а затемyoemanБудет в соответствии с этимиgeneratorАвтоматически генерируются различные проекты.

vue-cliПредоставляет довольно много опций и функций настройки, но его суть также отличается от удаленных складов.模版Тянуть на местную, а не на какую-то "местно сгенерированную" черную технику.

Таким образом, идея также доступна - сначала установите разные проекты шаблонов, а затем строительные леса ссылаются на проект шаблона в соответствии с инструкциями пользователя для создания фактического проекта. Шаблонные проекты могут быть встроены в строительные леса или развернуты в удаленных репозиториях. Для более широкой области применения,SCIONИспользуется второй метод.

Технический отбор

  • node.js: Фундаментальная часть всего инструмента для лесов, новейшая версия рекомендуется.
  • es6: новая версияnode.jsдляes6Поддержка уже очень высока, используяes6Это может значительно повысить эффективность разработки и опыт разработки.
  • commander: Инструмент, разработанный TJ для лучшей организации и обработки ввода командной строки.
  • co: Инструмент управления асинхронным процессом, разработанный TJ God, позволяет писать асинхронный код более удобным способом.
  • co-prompt: It's still the work of the great god TJ... The traditional command line can only input all parameters and options on a single line at one time. Using this tool can automatically provide prompt information and receive user input step by step. The experience похожnpm initШаг за шагом при вводе параметров процесса.

Общая структура

Международная практика, вы должны сначала понять общую структуру, прежде чем начинать разработку, см. Рисунок:

понять сначала模版Концепция чего-либо. Шаблон — это шаблон для проекта, который содержит полную структуру и информацию о проекте. Информация о шаблоне хранится в файле с именемtemplates.jsonв файле. Пользователи могут использовать командную строку дляtemplates.jsonДобавление, удаление и перечисление операций. Выбирая разные шаблоны, SCION автоматически подтянет соответствующие шаблоны с удаленного склада на локальный, чтобы завершить построение проекта.

Окончательная файловая структура всего скаффолдинга выглядит следующим образом:

=================
  |__ bin
    |__ scion
  |__ command
    |__ add.js
    |__ delete.js
    |__ init.js
    |__ list.js
  |__ node_modules
  |__ package.json
  |__ templates.json

входной файл

Сначала создайте проект, вpackage.jsonНапишите зависимости внутри и выполнитеnpm install:

"dependencies": {
    "chalk": "^1.1.3",
    "co": "^4.6.0",
    "co-prompt": "^1.0.0",
    "commander": "^2.9.0"
  }

Создал в корневом каталоге\binпапку, создайте в ней имя без суффиксаscionдокумент. этоbin\scionФайл - это файл ввода для всей леспе, поэтому давайте сначала напишем.

Сначала некоторый код инициализации:

#!/usr/bin/env node --harmony
'use strict'
 // 定义脚手架的文件路径
process.env.NODE_PATH = __dirname + '/../node_modules/'

const program = require('commander')

 // 定义当前版本
program
	.version(require('../package').version )

// 定义使用方法
program
	.usage('<command>')

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

program
	.command('add')
	.description('Add a new template')
  .alias('a')
  .action(() => {
    require('../command/add')()
  })

program
	.command('list')
	.description('List all the templates')
	.alias('l')
	.action(() => {
		require('../command/list')()
	})

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

program
	.command('delete')
	.description('Delete a template')
	.alias('d')
	.action(() => {
		require('../command/delete')()
	})

commanderКонкретный метод использования не будет здесь раскрываться, вы можете перейти непосредственно кОфициальный сайтСм. подробную документацию. Наконец, не забудьте обработать параметры и предоставить справочную информацию:

program.parse(process.argv)

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

Смотрите полный кодздесь. использоватьnodeЗапустите этот файл и увидите следующий вывод, который доказывает, что файл записи был записан.

Usage: scion <command>


  Commands:

    add|a      Add a new template
    list|l     List all the templates
    init|i     Generate a new project
    delete|d   Delete a template

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

Обработка пользовательского ввода

Создан в корневом каталоге проекта\commandПапка, специально используемая для хранения файлов обработки команд. Создал в корневом каталогеtemplates.jsonфайл и напишите следующее содержимое для хранения информации о шаблоне:

{"tpl":{}}

Добавить шаблон

Войти\commandи новыйadd.jsдокумент:

'use strict'
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
const fs = require('fs')

module.exports = () => {
 co(function *() {

   // 分步接收用户输入的参数
   let tplName = yield prompt('Template name: ')
   let gitUrl = yield prompt('Git https link: ')
   let branch = yield prompt('Branch: ')
    
   // 避免重复添加
   if (!config.tpl[tplName]) {
     config.tpl[tplName] = {}
     config.tpl[tplName]['url'] = gitUrl.replace(/[\u0000-\u0019]/g, '') // 过滤unicode字符
     config.tpl[tplName]['branch'] = branch
   } else {
     console.log(chalk.red('Template has already existed!'))
     process.exit()
   }
   
   // 把模板信息写入templates.json
   fs.writeFile(__dirname + '/../templates.json', JSON.stringify(config), 'utf-8', (err) => {
	 if (err) console.log(err)
	 console.log(chalk.green('New template added!\n'))
     console.log(chalk.grey('The last template list is: \n'))
     console.log(config)
     console.log('\n')
	 process.exit()
    })
 })
}

удалить шаблон

Точно так же в\commandсоздать папкуdelete.jsдокумент:

'use strict'
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
const fs = require('fs')

module.exports = () => {
    co(function *() {
        // 接收用户输入的参数
        let tplName = yield prompt('Template name: ')

        // 删除对应的模板
        if (config.tpl[tplName]) {
            config.tpl[tplName] = undefined
        } else {
            console.log(chalk.red('Template does not exist!'))
            process.exit()
        }
        
        // 写入template.json
        fs.writeFile(__dirname + '/../templates.json', JSON.stringify(config),     'utf-8', (err) => {
            if (err) console.log(err)
            console.log(chalk.green('Template deleted!'))
            console.log(chalk.grey('The last template list is: \n'))
            console.log(config)
            console.log('\n')
            process.exit()
        })
    })
}

Шаблон списка

Учреждатьlist.jsдокумент:

'use strict'
const config = require('../templates')

module.exports = () => {
 	console.log(config.tpl)
 	process.exit()
}

Построить проект

Теперь к нашей самой важной части - созданию проекта. Точно так же в\commandСоздайте новый каталог с именемinit.jsдокумент:

'use strict'
const exec = require('child_process').exec
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')

module.exports = () => {
 co(function *() {
    // 处理用户输入
  	let tplName = yield prompt('Template name: ')
  	let projectName = yield prompt('Project name: ')
  	let gitUrl
  	let branch

	if (!config.tpl[tplName]) {
    	console.log(chalk.red('\n × Template does not exit!'))
    	process.exit()
    }
	gitUrl = config.tpl[tplName].url
	branch = config.tpl[tplName].branch

    // git命令，远程拉取项目并自定义项目名
    let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`

	console.log(chalk.white('\n Start generating...'))

	exec(cmdStr, (error, stdout, stderr) => {
      if (error) {
        console.log(error)
        process.exit()
      }
      console.log(chalk.green('\n √ Generation completed!'))
      console.log(`\n cd ${projectName} && npm install \n`)
      process.exit()
	})
  })
}

Как видите, эта часть кода тоже очень проста, ключевым предложением является

let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`

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

глобальное использование

Чтобы быть доступными по всему миру, нам нужноpackage.jsonУстановите его внутри:

"bin": {
    "scion": "bin/scion"
  },

При локальной отладке выполняйте ее в корневом каталоге

npm link

т.е.scionКоманда привязана к глобальной и может быть использована напрямую в будущем.scionкак начало команды без ввода длинногоnode scionтакие как команды.

Теперь, когда наш инструмент для строительных лесов настроен, давайте попробуем его!

использовать тест

  • добавить команду Добавить шаблон

  • init | i Создать команду проекта

  • delete | d удалить команду шаблона и список | l команда шаблона списка

Готово! Теперь, когда весь наш инструмент создания шаблонов создан, нам нужно знать только адрес git https и ветку шаблона, чтобы постоянно добавлять его в SCION.Для совместной работы нам нужно только поделиться SCIONtemplates.jsonфайл в порядке.

постскриптум

Это не выглядит сложным, но нужно много думать, чтобы создать его с нуля. Самая большая проблема в том, что ты не знаешь, как выглядеть.npm initТаким образом, вы можете шаг за шагом обрабатывать пользовательский ввод и знать только одну командную строку для ввода всех параметров.Такой пользовательский опыт действительно плох. Исследованоvue-cliа такжеyoemanСоответствующего кода я не нашел, поэтому пришлось гуглить, и наконец нашел статью, которую можно использовать сcoа такжеco-promptРеализация этих двух инструментов, еще раз поклоняюсь всемогущему Богу TJ и надеюсь, что маленький партнер может сказать мнеvue-cliКак они достигаются.

Эти леса имеют только самые основные функции, и они далеки от высоты аналогичных продуктов на рынке.Я буду наполнять их в будущем.В любом случае, я действительно многому научился в процессе завершения SCION.

Спасибо за прочтение. Я Джрейн, добро пожаловать в подпискумоя колонка, поделятся своим опытом обучения, опытом разработки и время от времени выносят галантерейные товары за стену. Увидимся в следующий раз!

Категории