«Эти штуки на переднем крае» развивают простые строительные леса от 0 до 1.

внешний интерфейс

❞

❝

В предыдущей статье Шу Цзян говорил о «Тем, что касается Front-End Engineering» и говорил о скаффолдинге, но времени было относительно мало, в результате чего контента стало меньше. инструменты улучшились Роль эффективности, воспользуйтесь этой возможностью, чтобы поделиться с друзьями, как я разработал простые леса от 0 до 1

❞

1. Что такое строительные леса

❝

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

❞

Текущие основные строительные леса:

  • Леса Vue: Vue-cli
  • Реагирующие леса: создать-реагировать-приложение
  • Yeoman

2. Леса моих ожиданий

❝

И какие леса я ожидаю?

❞

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

  • Универсальная конфигурация WebPack (Vue CLI 3X Верхний Vue.config.js)
  • Единые правила проверки Eslint: такие как Airbnb, eslint-plugin-vue и т. д. (eslintConfig)
  • Конфигурация унифицированной среды модульного тестирования: покрытие модульного теста, тестовый каталог и т. д.
  • Унифицированный файл Dockerfile и jenkinsfile (для упаковки в образы и определения конвейера развертывания)
  • Унифицированная конфигурация Babel (.babelrc или babel.config.js)
  • Единая конфигурация констант (поля кеша и т.д.)
  • Файлы конфигурации для разных сред (разработка, тестирование, производство)
❝

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

❞

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

3. Разработайте строительные леса

3.1 Как развиваться

❝

Если вы хотите разработать настраиваемую структуру каркаса, необходимо учитывать множество факторов. Из-за определенных ограничений выбран простой способ реализации внутренних инструментов формирования каркаса. Чтобы избежать этого, подготовьте два шаблона, один для ПК. , Другой - это шаблон на мобильной стороне, а затем управляемый с помощью git, мне нужны следующие инструменты:

❞
  • Инструменты, доступные для выбора консоли: inquirer
  • Инструмент, который обрабатывает консольные команды: Commander
  • Инструмент, который может изменить цвет выходного журнала: мел
  • Инструмент для выполнения команд оболочки: child_process

Входной файл index.js

#!/usr/bin/env node

const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const commander = require('commander');
const inquirer = require('inquirer');
const checkDire = require('./utils/checkDire.js');
const { exec } = require('child_process');
const { version } = require('../package.json');
const { promptTypeList } = require('./config');

//version 版本号
commander.version(version, '-v, --version')
  .command('init <projectName>')
  .alias("i")
  .description("输入项目名称，初始化项目模版")
  .action(async (projectName,cmd) => {
    await checkDire(path.join(process.cwd(),projectName),projectName);   // 检测创建项目文件夹是否存在
    inquirer.prompt(promptTypeList).then(result => {
      const {url, gitName, val} = result.type;
      console.log("您选择的模版类型信息如下：" + val);
      console.log('项目初始化拷贝获取中...');
      if(!url){
        console.log(chalk.red(`${val} 该类型暂不支持...`));
        process.exit(1);
      }
      exec('git clone ' + url, function (error, stdout, stderr) {
        if (error !== null) {
          console.log(chalk.red(
            `clone fail,${error}`
          ));
          return;
        }
        fs.rename(gitName, projectName, (err)=>{
          if (err) {
            exec('rm -rf '+gitName, function (err, out) {});
            console.log(chalk.red(`The ${projectName} project template already exist`));
          } else {
            console.log(chalk.green(`The ${projectName} project template successfully create(项目模版创建成功)`));
          }
        });
      });
    })
  });
commander.parse(process.argv);

Вот входной файл командной строки пакета NPM.

Нужно обратить внимание на определение перед файлом#!/usr/bin/env node

❝

#!/usr/bin/env После установки узла система может динамически искать узел, что решило проблему несогласованных настроек для разных пользователей на разных машинах

❞

Проверить, существует ли каталог

// utils/checkDire.js
const fs = require('fs');
const chalk = require('chalk');
const path = require('path');

module.exports = function (dir,name) {
  let isExists = fs.existsSync(dir);
  if (isExists) {
    console.log(chalk.red(
      `The ${name} project already exists in  directory. Please try to use another projectName`
    ));
    process.exit(1);
  }

конфигурационный файл

// config/index.js
配置文件
/*
  @dest: 使用配置文件
  @Author: tree
 */
module.exports  = {
  promptTypeList:[{
      type: 'list',
      message: '请选择拉取的模版类型:',
      name: 'type',
      choices: [{
        name: 'mobile',
        value: {
          url: '',
          gitName: 'vue-web-template',
          val:'移动端模版'
        }
      },{
        name: 'pc',
        value: {
          url: 'https://github.com/littleTreeme/vue-web-template.git',
          gitName: 'vue-web-template',
          val:'PC端模版'
        }
      }]
  }],
};
❝

Ссылка на источник:GitHub.com/маленькое дерево М…Если вы найдете это полезным, пожалуйста, поддержите 🌟, спасибо здесь

❞

3.2 Детали инструмента

  • inquirer
❝

Инструмент для взаимодействия пользователя с командной строкой

❞

Основное использование🔗Использование документации

const inquirer = require('inquirer');

const promptList = [
     type: 'list',
     message: '请选择拉取的模版类型:',
     name: 'type',
      choices: ['mobile','pc']
];

inquirer.prompt(promptList).then(type => {
    console.log(type); // 返回 mobile 或 pc
})

Сцена выглядит следующим образом

  • commander
❝

command - это легкий модуль nodejs, который предоставляет мощные функции для пользовательского ввода командной строки и анализа параметров.

❞

API командира используется🔗Использование документации

const commander = require('commander');
commander.version(version, '-v, --version')
  .command('init <projectName>') 
  .alias("i") 
  .description("输入项目名称，初始化项目模版") 
  .action(async (projectName,cmd) => {
      console.log(projectName,'你输入的<projectName>')
  })
commander.parse(process.argv);
  
// command – 定义命令行指令，后面可跟上一个name，用空格隔开
// alias – 定义一个更短的命令行指令
// description – 描述，它会在help里面展示
// option – 定义参数
// action – 注册一个callback函数
// parse - 解析命令行
  • chalk
❝

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

❞

как использовать🔗Использование документации

const chalk = require('chalk');

// 报错日志用红色来显示
chalk.red(`The project already exists in  directory. Please try to use another projectName`));

// 成功日志用绿色来显示
chalk.green(`The project template successfully create(项目模版创建成功)`);

3.3 Как использовать

Вы можете сначала попробовать локальную установку, попробовав процессЧитать документацию

Ниже приведена схема среды выполнения kdv-cli, разработанная мной.

Так как же в него отображается команда kdv-cli? , причина в том, что поле bin определено в package.json;

// package.json
"bin": {
    "kdv-cli": "./bin/index.js"
 },

Я выбираю тип ПК, а затем создаю проект с именем test (мобильные устройства пока не поддерживаются).

Повторное создание сообщит об ошибке

Структура извлеченного каталога проекта выглядит следующим образом:

4. Меры предосторожности

  • Меры предосторожности
❝

Это происходит, когда вы закончили разработку скаффолдинга и хотите протестировать локально, успешно ли он работает.

❞

Это связано с тем, что вы не можете найти путь выполнения команды локально, и он не отображается в bin.Таким образом, как протестировать недавно разработанную команду инструмента создания лесов локально, нужно использоватьnpm link, как показано ниже

5. Конец

❝

С помощью вышеизложенного мы завершим разработку строительных лесов kdv-cli с 0 до 1. , этот инструмент может не подходить для каждой сцены, но он может разобраться в простом процессе построения лесов и заложить основу для более сложных и мощных лесов позже.GitHub.com/маленькое дерево М…

❞

Прошлые статьи

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

Категории