Интервьюер: Пожалуйста, кратко опишите инструмент командной строки vue-cli.Можете ли вы написать его самостоятельно?

внешний интерфейс Командная строка Vue.js NPM

Помните, что основной функцией скаффолдинга vue-init, когда мы писали проекты Vue, было создание прототипов проектов на основе заданных шаблонов? Так как же это реализует vue-init? По сути, это добавить следующий код в vue-cli package.json

{
  "bin": {
    "vue": "bin/vue",
    "vue-init": "bin/vue-init",   //执行vue-init 的时候下载项目原型
    "vue-list": "bin/vue-list",
    "vue-build": "bin/vue-build"
  }
}

См. конкретную реализацию ниже:

Основное содержание этой статьи: реализация может запускать код прямо в командной строке (название ниже можете взять сами).

xl-cli install (安装)

Перед реализацией собственной командной строки для запуска кода вам необходимо иметь некоторое представление о командной строке и основах использования npm (менеджера пакетов). Перейдем к делу:

//创建一个 xl-cli文件夹 mkdir xl-cli
// cd xl-cli 
// npm init  初始化

После выполнения вышеуказанных шагов мы видим, что файл папки xl-cli содержит файл package.json.

{
  "name": "xl-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Мы знаем, что когда npm run xxx действительно выполняется, сценарии в package.json действительно выполняются. Например, если вы посмотрите на тест запуска npm выше, он выведет ошибку: тест не указан. es6, используемый в нашем коде, должен быть скомпилирован в es5.Сначала создайте компиляцию запуска npm (тест бесполезен и удалите его для теста)

{
  "name": "xl-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "babel src -d dist"
  },
  "author": "",
  "license": "ISC"
}

Нам нужно установить babel для создания (установите babel-cli babel-env)

src 
    --main.js

В настоящее время, когда мы выполняем компиляцию запуска npm, это фактически эквивалентно вводу babel src -d dist в командной строке. Затем мы видим, что создается такой каталог:

dist
    --main.js

У нас часто возникает необходимость синхронно менять контент в dist при изменении контента в src.Можно сделать так: добавить в скрипты package.json команду watch:

{
  "name": "xl-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "babel src -d dist",
    "watch":"npm run compile -- --watch"
  },
  "author": "",
  "license": "ISC"
}

Затем запустите команду npm run watch, чтобы добиться синхронного обновления!

Следующее реализует командную строку xl-cli

Создать ./bin/www каталог, Для реализации команд, таких как Vue-CLI в командной строке, вам нужно добавить такую ​​командную строку, чтобы добавить в Package.json.

"bin": {
    "xl-cli": "./bin/www"
  },

Содержимое в ./bin/www:

#! /usr/bin/env node

require('../dist/main.js');

Последний узел в первой строке указывает на то, что предыдущие параметры среды узла жестко запрограммированы, а вторая строка указывает на исполняемый код.После завершения создания выполнить ссылку npm, что эквивалентно локальному добавлению переменных среды. На данный момент вы уже можете выполнить команду xl-cli, которая на самом деле выполняет dist/main.js.

Реализовано как xl-cli --help в другой командной строкеСначала представим командующий пакет. Этот пакет может помочь нам установить и проанализировать параметры команды. источник/main.js

//main.js
import program from 'commander';

import {VERSION} from './utils/constants';

program.command('install')                            //加命令 
        .description('install template')
        .alias('i')
        .action(() => {
            console.log('用户install了')
        })

program.version(VERSION,'-v --version').parse(process.argv);  //加 option

Мы видим, что при вводе xl-cli install в командном окне выводится:

用户install了

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

//install.js
import ora from 'ora';   //ora 一个命令行loading效果
import inquirer from 'inquirer'  //命令行交互
import downLoadGit from 'download-git-repo';  //github api用来下载github的模板

let install = async () => {
    // 下载模板 
    let loading = ora('fetching template......');
    let answer = await inquirer.prompt([
        {
            type: 'input',        //你可以输入你自己的名称
            name: 'projectName',
            message:'项目名称',
            default:'xlDemo'    //默认名
        }
    ]);
    // 项目名字
    let project = answer.projectName;
    loading.start();
    //我在github上面上传了一个非常简单的模板 xlei1123/xl-cli downLoadGit(src, dest)  从哪拉 拉到那  process.cwd()+'/'+project这是拉到了当前目录下的你刚刚命名的文件中
    downLoadGit('xlei1123/xl-cli',process.cwd()+'/'+project,(err) => {  
        if(err) {
            console.log(err)
            return;
        }
        console.log(process.cwd()+'/'+project)
        loading.succeed();
    });
}
export default install;

Таким образом, выполните install() в вышеуказанном действии!

//main.js
import program from 'commander';
import {VERSION} from './utils/constants';

import install from './install'
program.command('install')                            //加命令 
        .description('install template')
        .alias('i')
        .action(() => {
            install()
        })

program.version(VERSION,'-v --version').parse(process.argv);  //加 option

Таким образом, мы завершили наш собственный cli.Вы можете выполнить следующие простые команды, чтобы увидеть эффект:

xl-cli --help
xl-cli -v
xl-cli install

Резюме одним предложением: Мы выпустили пакет npm. В package.json этого пакета есть bin, который может выполняться глобально. Если параметр установлен, шаблон будет извлечен из github.

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

Категории