предисловие
В нашей обычной разработке проектов часто бывает много похожих файлов кода, и мы часто копируем и вставляем их, когда используем. Я уже писал об этом статьюстатья, я обсуждал способы повышения эффективности разработки, но, честно говоря, это не очень полезно.
Глядя на популярные сегодня интерфейсные фреймворки, все они имеют свои собственные инструменты командной строки, такие как Vue CLI, creat-react-app и т. д. Очень удобно создавать проекты. Так что я тоже думаю, или внедрить инструмент CLI, он не обязательно должен быть таким же высоким, как предыдущие, но пока он может повысить эффективность работы, попробовать стоит.
Инициализировать проект
Во-первых, нам нужно открыть интерфейс CLI и инициализировать проект с помощью npm:
npm init
package.json
{
"name": "mycli",
"version": "1.0.0",
"description": "A cli-demo",
"main": "index.js",
"author": "xmanlin",
"license": "MIT"
}
Некоторые из неиспользуемых были удалены.
пользовательская команда
Я полагаю, что многие мелкие партнеры обнаружат, что у них есть одна общая черта, когда они используют npm для инициализации проектов или создания проектов с помощью Vue CLI — у всех у них есть свои персонализированные команды, которые выглядят немного круто. Итак, как мы можем реализовать наши собственные команды, очень просто, добавьте в package.jsonbin:
{
"name": "mycli",
"version": "1.0.0",
"description": "A cli-demo",
"main": "index.js",
"bin": {
"mycli": "./index.js"
},
"author": "xmanlin",
"license": "MIT"
}
в пакете.jsonbinРоль состоит в том, чтобы разрешить установкуmycliСтать исполняемой командой, и файл, выполняемый командой, выглядит следующим образомindex.js, они могут быть определены в соответствии с их собственными представлениями. Тогда мы продолжимindex.jsмодифицировать:
index.js
#!/usr/bin/env node
console.log("执行成功")
Здесь важна первая строка, здесь написаноindex.jsявляется исполняемым файлом узла.
После завершения настройки вы можетеГлобальныйУстановите наши инструменты командной строки:
npm install -g
+ mycli@1.0.0
added 1 package from 1 contributor in 0.12s
Вы можете видеть, что глобальная установка прошла успешно, и, наконец, мы попробуем нашу команду:
mycli
выход:
执行成功
интерактивная командная строка
Когда друзья просто использовали операции командной строки, они использовали команды с различными параметрами, такими какnpm init,npm install -g, который содержит некоторый интерактив, например, при инициализации проекта,npm initПредоставляет некоторые команды для ввода формата вопрос-ответ. Далее давайте добавим эти похожие команды в наш инструмент CLI.
Мы можем положиться на две библиотеки для нашей разработки:commander.jsа такжеInquirer.js
- command.js: Полное решение для командной строки node.js. Мы можем использовать его для быстрого написания нашей командной строки и настройки операции.
- Inquirer.js: это набор обычных интерактивных пользовательских интерфейсов командной строки, которые предоставляют Node.js легко встраиваемый, красивый интерфейс командной строки. Мы можем использовать его для быстрого написания интерактивных командных строк.
Конкретное использование этих двух библиотек является слишком большим введением здесь.Друзья могут щелкнуть ссылку с вышеуказанным названием, чтобы ознакомиться с ней.Это не займет слишком много времени, и ее нетрудно использовать на практике.Последняя имеет нет китайского Readme, но это не мешает Все будут искать ~ верно?
определить параметры
Сначала мы реализуем что-то вродеnpm -v,node -vаналогичные параметры команды.
Сначала установите command.js:
npm install commander
Затем импортируйте command.js иindex.jsмодифицировать
#!/usr/bin/env node
const { program } = require('commander');
// 字符串分割为数组的方法
function strToArr(value, preValue){
return value.split(',')
}
// cli版本
program.version(require('./package').version, '-v, --version', 'cli的最新版本');
// 设置选项
program
.option('-d, --debug', '调试一下')
.option('-l, --list <value>', '把字符串分割为数组', strToArr)
.action((options, command) => {
// 进行逻辑处理
if(options.debug) {
console.log("调试成功")
}
if(options.list !== undefined) {
console.log(options.list)
}
});
// 处理命令行输入的参数
program.parse(process.argv);
Давайте попробуем параметры команды, которые мы только что установили:
mycli -d
выход:
调试成功
войти:
mycli -l 1,2,3
выход:
[ '1', '2', '3' ]
Это было определено для нас в command.js--helpОпции:
mycli -h
выход:
Usage: index [options]
Options:
-v, --version cli的最新版本
-d, --debug 调试一下
-l, --list <value> 把字符串分割为数组
-h, --help display help for command
использовать--helpвариант, мы можем четко видеть, сколько команд уже есть в mycli.
установить подкоманду
В разработке проекта мы иногда используем что-то вродеnpm run xxxтакая команда, гдеrunЭто как подкоманда npm. Здесь мы также можем установить аналогичные подкоманды для mycli:
const { program } = require('commander');
...
// 创建文件命令行
program
.command('create <filename>')
.description('创建一个文件')
.action((filename) => {
console.log(filename)
})
...
// 处理命令行输入的参数
program.parse(process.argv);
command('create <filename>')это создать myclicreateПодкоманда, за которой следует обязательный параметр.
войти:
mycli create file
выход
file
Подкоманда успешно создана.
Создание файлов проекта из командной строки
Теперь мы можем определить параметры и установить команды. Далее мы можем что-то сделать, использовать командную строку для создания файлов для проекта.
Простой дизайн процесса:
Создать файл шаблона
Давайте сначала создадим папку шаблонов, а затем запишем в нее несколько общих файлов шаблонов.Файлы шаблонов здесь применяют строки шаблонов, и структура выглядит следующим образом:
reactClass.js
module.exports = function (className) {
return `
import * as React from 'react';
export class ${className} extends React.Component{
constructor(props){
super(props);
this.state = {}
}
componentDidMount(){
}
render() {
return (
<div></div>
)
}
}
`
}
vueTemplate.js
module.exports = function () {
return `
<template>
<div></div>
</template>
<script>
export default {
data() {
return {}
}
methods: {
}
}
</sctipt>
<style lang="scss" scoped>
</style>
`
}
index.js
const reactClass = require('./reactClass');
const vueTemplate = require('./vueTemplate');
module.exports = [
{ name: 'reactClass', src: reactClass },
{ name: 'vueTemplate', src: vueTemplate }
]
Как только файл шаблона будет создан, давайте отложим его в сторону и воспользуемся им позже.
Создавайте интерактивные командные строки и вызывайте шаблоны
когда мы входимmycli create fileПосле команды нам нужно получить эффект на рисунке ниже, мы можем вручную выбрать вверх и вниз, что можно назвать интерактивной командой.
Вот еще одна библиотека, о которой мы упоминали выше —Inquirer.js
Вы должны сначала установить
npm install inquirer
Импортируйте и измените index.js в нашем корневом каталоге:
#!/usr/bin/env node
const { program } = require('commander');
const inquirer = require('inquirer');
// 引入模板文件
const templates = require('./templates/index');
// 命令行选择列表
let prompList = [
{
type:'list',
name: 'template',
message: '请选择你想要生成的模板？',
choices: templates,
default: templates[0]
}
]
...
// 创建文件命令行
program
.command('create <filename>')
.description('创建一个文件')
.action(async (filename) => {
const res = await inquirer.prompt(prompList)
console.log(res)
})
// 处理命令行输入的参数
program.parse(process.argv);
Далее вводим в командной строке:
mycli create file
вы можете получить эффект, показанный выше
Затем выберите первый и нажмите Enter:
Вы можете видеть, что имя выбранного нами шаблона выводится. Следующим шагом является создание фактического файла.
Создать файл проекта
Чтобы создать файл, вам нужно вызвать связанный с fs API-интерфейс node.js, а затем изменить index.js:
// 处理文件
const fs = require("fs");
...
// 创建文件命令行
program
.command('create <filename>')
.description('创建一个文件')
.action(async (filename) => {
const res = await inquirer.prompt(prompList)
if(res.template === 'reactClass') {
templates.forEach((item) => {
if(item.name === 'reactClass') {
fs.writeFile(`./${filename}.jsx`, item.src(filename), function(err) {
if(err) {
console.log('创建失败：', err)
} else {
console.log(`创建文件成功！${filename}.jsx`);
}
})
}
})
}
if(res.template === 'vueTemplate') {
templates.forEach((item) => {
if(item.name === 'vueTemplate') {
fs.writeFile(`./${filename}.vue`, item.src(), function(err) {
if(err) {
console.log('创建失败：', err)
} else {
console.log(`文件创建成功！${filename}`);
}
})
}
})
}
})
...
Снова набираем в командной строкеmycli create file, а затем выберите шаблон.
выход:
创建文件成功！file.jsx
В то же время мы видим, что в корневой каталог проекта добавлен новый файл file.jsx:
Откройте файл.jsx, и вы увидите, что имя класса файла также заполнено соответствующим образом. Мало того, поскольку наш mycli установлен глобально, можно сказать, что в любом месте компьютера, пока мы вводимmycli create file, мы можем получить файл file.jsx в текущем каталоге. Это означает, что когда мы разрабатываем некоторые проекты, нам не нужно копировать и вставлять, удалять, удалять, модифицировать и модифицировать.
непосредственныйодна строка командыЯ могу это сделать~
Больше возможностей
Теперь, когда вы можете создавать файлы, можете ли вы создать папки? Ответ да, просто продолжайте добавлять команды:
...
// 创建文件夹命令行
program
.command('create-f <folder>')
.description('创建一个文件夹')
.action((folder) => {
if(fs.existsSync(folder)) {
console.log('文件夹已存在')
} else {
fs.mkdirSync(folder);
console.log('文件夹创建成功')
}
});
...
Затем введите в командной строкеmycli create-f xxx, вы также можете создавать папки, которым хотите присвоить имя.
наконец
На данный момент наш mycli может создавать файлы, создавать папки и так далее. Следуйте ему снова, и вы обязательно что-то приобретете. Позже мы можем написать файлы шаблонов в соответствии с реальной ситуацией в проекте, настроить нужные команды и сделать необходимые расширения. Я оставлю это всем, чтобы насладиться ~
Любимые друзья могут нажатьздесь, помогите мне проголосовать, большое спасибо~🙏🙏🙏
Заинтересованные друзья могут подписаться на мой официальный аккаунт-передняя конечная станция, новые статьи будут размещены в публичном аккаунте как можно скорее.