Как построить простые леса в передней части

Vue.js

предисловие

Здесь давайте кратко разберемся с основами. Далее мы напишем относительно полный скаффолдинг (динамический шаблон) на основе машинописного текста и ссылки на сводку. Ниже можно вытащить только простые статические шаблоны.

Основание

Снятие и установка строительных лесов

Здесь предполагается, что имя нашего скаффолдинга — ds-cli, и это имя используется ниже. Мы используем команду scaffolding в командной строке как ds

  • Как разрешить пользователям выполнять команды ds в терминале после глобальной установки ds-cli через npm или yarn? Ответ находится в поле bin файла package.json.
  • Когда наше поле bin указывает на наш целевой файл main.js, а целевой файл начинается с
//这里是main.js
#!/usr/bin/env node

// --这种用法是为了防止操作系统用户没有将node装在默认的/usr/bin路径里。当系统看到这一行的时候，
// 首先会到env设置里查找node的安装路径，再调用对应路径下的解释器程序完成操作。
//这里是package.json
"bin": {
    "ds": "./main.js"
}
  • Таким образом, когда мы публикуем его в npm, а другие скачивают, они могут напрямую использовать команду ds.

Разобрать командную строку

  • Как легко и удобно прочитать параметры в командной строке? Здесь мы используем tj godcommander 
const cmd = require("commander");

// 比如我们想执行ds init **的命令，想出现“初始化组件模板”的描述
// action是执行这个命令后续的回调，...args是后面**的参数
cmd
  .command('init')
  .description('初始化组件模板')
  .action((...args) => {});

//解析命令行
cmd.parse(process.argv);

Взаимодействие с пользователем

Мы получаем определенное взаимодействие, спрашивая пользователя, что ему нужно.

  • использоватьinquirerЗапросить описание проекта, автора
//比如我们在上面那个action里面搞事情,即ds init之后问用户
...action((...args)=>{
    inquirer
      .prompt([
        {
          name: "description",
          message: "请输入项目描述"
        },
        {
          name: "author",
          message: "请输入作者名称"
        }
      ]).then(answers=>{
          //在这里获得上面的答案
          console.log(answers.description,answers.author)
      })
})

Вытащить удаленный репозиторий

  • download-git-repoВытягиваемый удаленный репозиторий
const download = require("download-git-repo");
// 第一个git地址，第二个name是git clone下来后的名字...
download(
    "https://github.com/yokiyokiyoki/vue-fullpage.git#master",
    name,
    { clone: true },
    err => {
    ...
    }
);

Простая замена шаблона

  • После того, как мы начали спрашивать, должны были произойти какие-то внутренние изменения. Здесь мы можем просто изменить автора и описание package.json
  • можно использоватьhandlebars, синтаксис шаблона прост
//这个是通过download-git-repo拉下来的package.json
{
    "author":"{{author}}",
    "description":"{{description}}"
}
  • Затем компилируем переменные, полученные при чтении файловой строки в рули, а затем пишем
//通过询问拿到的answers
const meta = {
    name,
    description: answers.description,
    author: answers.author
};
const fileName = `${name}/package.json`;
//判断一下是否有这个文件
if (fs.existsSync(fileName)) {
    const content = fs.readFileSync(fileName).toString();
    const result = handlebars.compile(content)(meta);
    fs.writeFileSync(fileName, result);
}

Некоторые эффекты терминала

  • Выделите информацию, напечатанную терминалом:chalk. Например, chalk.green('успех'), chalk.red('неудача')
  • Эффект загрузки терминала:ora, есть эффект загрузки
const spinner = ora("正在下载模板...");
spinner.start();
spinner.succeed();
  • Специальные флаги для печати логов:log-symbols

исходный код

#!/usr/bin/env node
// --这种用法是为了防止操作系统用户没有将node装在默认的/usr/bin路径里。当系统看到这一行的时候，
// 首先会到env设置里查找node的安装路径，再调用对应路径下的解释器程序完成操作。
const program = require("commander");
const download = require("download-git-repo");
const inquirer = require("inquirer");
const handlebars = require("handlebars");
const fs = require("fs");
const ora = require("ora");
const chalk = require("chalk");
const symbols = require("log-symbols");

program
  .version("0.0.1", "-v, --version")
  .command("init <name>")
  .action(name => {
    if (fs.existsSync(name)) {
      // 错误提示项目已存在，避免覆盖原有项目
      console.log(symbols.error, chalk.red("项目已存在"));
      return;
    }
    inquirer
      .prompt([
        {
          name: "description",
          message: "请输入项目描述"
        },
        {
          name: "author",
          message: "请输入作者名称"
        }
      ])
      .then(answers => {
        download(
          "https://git.datatub.com:Uranus/general-template#master",
          name,
          { clone: true },
          err => {
            const spinner = ora("正在下载模板...");
            spinner.start();
            if (!err) {
              spinner.succeed();
              const meta = {
                name,
                description: answers.description,
                author: answers.author
              };
              const fileName = `${name}/package.json`;
              if (fs.existsSync(fileName)) {
                const content = fs.readFileSync(fileName).toString();
                const result = handlebars.compile(content)(meta);
                fs.writeFileSync(fileName, result);
              }
              console.log(symbols.success, chalk.green("项目初始化完成"));
            } else {
              spinner.fail();
              console.log(symbols.error, chalk.red(`拉取远程仓库失败${err}`));
            }
          }
        );
      });
  });
//解析命令行
program.parse(process.argv);
  • Выше приведен файл main.js, а затем изменены поля package.json (модификация поля bin, переменные шаблона)
  • Опубликовать npm (как опубликовать, см.здесь) и испытайте его после глобальной загрузки через npm.

Следующий

Как построить зрелые леса в передней части

Категории