руководство по разработке инструмента командной строки npm

JavaScript NPM

Мы часто используем инструменты командной строки во фронтенд-разработке, такие как@babel/cli,vue-cli,create-react-appи т.п. Так как же создать инструмент командной строки npm? Это на самом деле очень просто, и это займет всего несколько шагов.

Создайте

1 Инициализируйте проект npm

npm init
package name: (cli) gogocode-cli
version: (1.0.0) 
description: my-first-cli
entry point: (index.js) 
keywords: npm cli
author: super man

2 Настройте поле корзины

После npm init будет сгенерирован файл package.json, в файл будет добавлено поле bin.Ключом поля bin является ваша команда (gogocode), а значение указывает на путь относительно package.json( index.js).Разные ключи соответствуют разным командам. Дополнительные сведения о поле bin см.Документация.

{
  "name": "gogocode-cli",
  "version": "1.0.0",
  "description": "my-first-cli",
  "bin": {
    "gogocode": "index.js"
  }
}

3 Создайте файл index.js

Создайте файл index.js в корневом каталоге проекта. Ниже приведено содержимое файла index.js: используйте функцию console.log() для вывода информации о возврате из командной строки.

 #!/usr/bin/env node
 console.log('Hello, world!');

Примечание. В первой строке должен быть добавлен скрипт для указания рабочей среды (узел #!/usr/bin/env).

4 упаковка выпущена

4.1 выпуск

  • Выполните команду npm pulish в корневом каталоге проекта. Следуйте подсказкам системы, чтобы опубликовать инструменты командной строки наnpmjsПлатформа. В течение этого периода вам необходимо зарегистрировать учетную запись npm, вы можете самостоятельно использовать Baidu.
npm publish

image.png

4.2 Проверка

  1. Установите пакеты npm глобально
npm install gogocode-cli -g
  1. Выполнение заказа
gogocode
  1. Корректно выводит «Hello, World!» 😊

image.png

Дополнительно и инструменты

Вышеупомянутое предназначено только для запуска инструмента командной строки npm от подготовки к выпуску.Если вам нужно создавать сложные приложения командной строки npm, вам нужно использовать некоторые вспомогательные пакеты разработки. Вот еще два часто используемых пакета npm:commanderа такжеterminal-kit

Commander

  • Commander используется для организации инструкций командной строки (команда) и параметров (опция) и в основном отвечает за обработку входной информации командной строки.

    • Команда может быть понята как «инструкция», чтобы определить логику кода. Обычно ссылаясь на текст инструмента командной строки и текста между вторым пространством. Например: NPM init, где init - это команда. Инструмент командной строки может поддерживать несколько входов инструкций.
    • опцию можно понимать как входной параметр функции «инструкция». Начните с «-» или «--», например: ls -a, где -a — параметр, означающий перечисление всех файлов. Примечание: «-» — это сокращенная форма «--».

  • Ниже приведен инструмент командной строки, который мы недавно разработали.gogocode-cliНапример, позвольте мне объяснить вам подробноcommanderкак использовать.

    • Во-первых, давайте посмотрим на код входного файла index.js:
#!/usr/bin/env node
const program = require('commander');
const term = require('terminal-kit').terminal;
const pkg = require('./package.json');
//插件加载及执行逻辑
const transform = require('./transform');
//初始化插件项目逻辑
const init = require('./commands/init');

// 配置command
program
.command(`init`)
.description('初始化一个插件sample项目')
.action((options) => {
    init(options);
});

// 配置options
program.option('-t, --transform <package name or path>', '插件路径或者npm包名称,支持多个插件，逗号分隔')
.option('-o, --out <path>', '输出文件路径')
.option('-s, --src <path>', '需要转换的源文件路径')
.action((options) => {
    return transform(options);
});

// 配置 cli 信息，版本、cli说明等
program
.version(pkg.version)
.description(term.blue('GoGoCode  代码转换从未如此简单  https://gogocode.io'));
console.log();

// 接管命令行输入，参数处理
program.parse(process.argv);
  • Из приведенного выше кода мы видим, что:gogocode-cliВнешне поддерживает определения команд (команд) и параметров (параметров) инициализации, таких как -t, -o, -s и т. д. Конкретные определения следующие:
параметр | команда Сокращенное название Параметр Описание Типы
init init Инициализировать пример проекта плагина command
--src -s Путь к исходному файлу, который нужно преобразовать option
--transform=FILE/npm package -t Путь к плагину или имя пакета npm option
--out -o путь к выходному файлу option
  • Выполним index.js:
node ./index.js

Результат выглядит следующим образом:

image.png

Мы видим, чтоcommanderАвтоматически помогает нам справиться с проблемой отображения инструкций и параметров и логического разделения, а также автоматически добавляет -V, -h две опции. Можно сказать, что это очень удобно.

terminal-kit

terminal-kitЭто мощный инструмент вывода командной строки, который поддерживает стили текста, таблицы, меню, индикаторы выполнения и другие интерактивные формы. Несколько общих функций кратко представлены ниже.

  1. цвет шрифта, вывод синего текста
const term = require('terminal-kit').terminal;
term.blue('GoGoCode  代码转换从未如此简单  https://gogocode.io');
  1. таблица вывод таблицы
const term = require('terminal-kit').terminal;
term.table([
    ['header #1', 'header #2', 'header #3'],
    ['row #1', 'a much bigger cell, a much bigger cell, a much bigger cell... ', 'cell']
], {
    hasBorder: false,
    contentHasMarkup: true,
    textAttr: { bgColor: 'default' },
    firstCellTextAttr: { bgColor: 'blue' },
    firstRowTextAttr: { bgColor: 'yellow' },
    firstColumnTextAttr: { bgColor: 'red' },
    checkerEvenCellTextAttr: { bgColor: 'gray' },
    width: 60,
    fit: true   // Activate all expand/shrink + wordWrap
}
);
  1. Да или нет Спросите
const term = require('terminal-kit').terminal;

term('Do you like gogocode? [Y|n]\n');

term.yesOrNo({ yes: ['y', 'ENTER'], no: ['n'] }, function (error, result) {

    if (result) {
        term.green("'Yes' detected! Good bye!\n");
        process.exit();
    }
    else {
        term.red("'No' detected, are you sure?\n");
    }
});

отладка


Как отлаживать во время разработки инструмента командной строки? Мы можем это сделать.

  1. Переключить vscode (последняя версия) встроенный терминал (терминал) на терминал отладки JavaScript
  2. Используйте встроенную функцию точки останова vscode, чтобы сломать точку.
  3. Выполните узел ./index.js в терминале отладки JavaScript для отладки


debug.gif

gogocode

Опыт разработки Npm выше командной строки значительно ускоряет разработкуgogocode-cliподытожил в процессе.gogocode-cliдаgogocodeинструмент командной строки. ЭтоgogocodeЧто это такое? Цитирую официальное введение:

GoGoCode是一个操作AST的工具，可以降低使用AST的门槛，帮助开发者从繁琐的AST操作中解放出来，更专注于代码分析转换逻辑的开发。简单的替换甚至不用学习AST，而初步学习了AST节点结构（可参考AST查看器）后就可以完成更复杂的分析转换。

Официальная документация gogocode код gogo.IO/this/docs/SPE…

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

плагин преобразования gogocode

Так как gogocode настолько прост в использовании, как мы можем использовать gogocode для написания плагинов преобразования? Позвольте мне объяснить это вам ниже:

инициализация плагина

  • Сначала вам нужно установить gogocode-cli
npm install gogocode-cli -g
  • Затем выполните «gogocode init», чтобы инициализировать проект плагина.
gogocode init

Структура проекта плагина

Каталог плагинов после инициализации gogocode init представляет собой стандартный проект npm. Основная запись проекта настраивается в главном узле package.json.

image.png

На приведенном выше снимке экрана видно, что запись логики преобразования проекта подключаемого модуля — это transform.js, который определяется следующим образом:

/**
 * 转换入口导出一个函数，按照如下函数签名
 * @param {*} fileInfo 包含 source 和 path 属性。source为待转换文本，path为路径
 * @param {*} api 包含 gogocode 作为转换工具
 * @param {*} options 其他 option 由此传入
 * @returns {string} 返回转换后的代码
 */
module.exports = function(fileInfo, api, options) {
  const sourceCode = fileInfo.source;
  const $ = api.gogocode;
  return $(sourceCode)
    .replace('const a = $_$', 'const a = 2')
    .generate();
};


Наша логика преобразования должна быть определена в функции выше

Выполнение логики преобразования

gogocode-cli выполняет файлы js

Логика преобразования может быть выполнена в виде файлов js. Ниже приведены конкретные команды:

gogocode -s ./test/input.vue -t ./transform.js -o out.vue

в,gogocode-cliОпределения параметров командной строки могут ссылаться на приведенное вышеcommanderОпределения параметров для gogocode-cli в главах.

gogocode-cli выполняет пакеты npm


Если вы хотите поделиться своими плагинами со всеми, вы можете напрямую упаковать проект в пакет npm.
gogocode-cli также поддерживает возможность запуска логики преобразования npm.
Например, мы выпустили плагин npm «vue2-to-3». Вы можете выполнить следующую команду, чтобы запустить логику преобразования в пакете npm.

gogocode -s ./test/input.vue -t ./vue2-to-3 -o out.vue

Ссылки по теме GoGoCode

Github-репозиторий GoGoCode (новый проект требует звездочки ^_^)GitHub.com/thx/gogo код…

Официальный сайт GoGoCodegogocode.io/

Вы можете прийти на детскую площадку для быстрого опытаplay.gogocode.io/


Новый инструмент от Alimama облегчает процесс пакетной модификации кодов проектов
"Практика GoGoCode" Изучите 30 советов по замене кода AST за один раз
Начните с AST по нулевой стоимости и используйте GoGoCode для решения проблемы перехода с Vue2 на Vue3.
GoGoCode помогает убрать «мусор» в коде

Категории