Создайте свои собственные леса - «Элегантно» создавайте интерфейсные проекты

внешний интерфейс GitHub JavaScript NPM

На работе я обычно делаю больше мобильного H5, поэтому я создал свой фронтенд-проект через webpack (x-build), в основном для компиляции стилуса, нефрита, es6,Адаптивные решения, и некоторые плагины, написанные мной.

При работе над новым проектом каждый раз копировать папку, а затем изменять package.json, README.md и т. д. не кажется «элегантным», и я хочу использовать что-то вродеvue-cli,использоватьvue initНа Github можно загрузить мою собственную разработку внешнего интерфейса, которая выглядела очень «элегантно». Если вы чувствуете себя хорошо, пожалуйста, поставьте звездочку >>>x-build-cli.

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

Прежде всего, у вас уже есть внешний проект, созданный вами самостоятельно, при условии, что имяx-build, и был загружен на github.

На этом этапе создайте новый проект с именемx-build-cli, я имею в виду практику vue, так что даже еслиx-buildобновить,x-build-cliНе обновляйтесь, можно и до последней тянутьx-build.

mkdir x-build-cli
cd x-build-cli
npm init

Создайте файл с именемx-build-cliпапка, инициализированная с помощью npm, созданная внутри папкиbinкаталог и создатьx-build.js, структура проекта на данный момент:

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json

настроить package.json

"bin": {
  "x-build": "./bin/x-build.js"
}

Добавьте «bin» в package.json, «x-build» — это команда, которую нужно ввести по номеру команды, а «./bin/x-build.js» — это файл при выполнении команды.

Настроить x-build.js

#! /usr/bin/env node

const program = require('commander');
const download = require('download-git-repo');
const chalk = require('chalk');
const ora = require('ora');

#! /usr/bin/env nodeзаключается в том, чтобы указать, что этот файл выполняется с использованием node.

Модули, которые необходимо установить npm i command download-git-repo chalk ora --save:

commanderМожет анализировать команды, введенные пользователем.

download-git-repoСкиньте файл на гитхаб.

chalkИзменить цвет выводимого текста

oraМаленькие значки (загрузка, успешно, предупреждение и т.д.)

program
  .version('0.1.0')
  .option('-i, init [name]', '初始化x-build项目')
  .parse(process.argv);

.option()

-iэто сокращение, что-то вродеnpm i -g

initНазад[name]в состоянии пройтиprogram.initчтобы получить это.

Последним пунктом является описание, которое обычноx-build -hнамекать

if (program.init) {
  const spinner = ora('正在从github下载x-build').start();
  download('codexu/x-build#x-build4.1', program.init, function (err) {
    if(!err){
      // 可以输出一些项目成功的信息
      console.info(chalk.blueBright('下载成功'));
    }else{
      // 可以输出一些项目失败的信息
    }
  })
}

ora().start()Вы можете создать небольшой значок загрузки. >>>Другие значки относятся к ора

download() скачивает нужный нам проект с github, так как он использует ветку, поэтому добавляется после#x-build4.1, по умолчанию используется мастер.Справочник по конфигурации параметров download-git-repo

chalk.blueBright()Преобразует выходной текст в синий цвет. >>>Другие цвета относятся к мелу

загрузить нпм

Учащиеся, у которых нет учетной записи, отправляются в npm, чтобы зарегистрировать учетную запись.

// 登录账号
npm login
// 上传项目
npm publish

После успешной загрузки установите его в глобальную среду с помощью npm install x-build-cli -g.

использоватьbuild init [项目名]Вы можете вытащить соответствующие файлы из github.

оптимизация

Загруженный файл в настоящее время соответствует github, я хочу изменить package.json наnameИзмените имя инициализированного проекта наversionИзменить на 1.0.0.

На этом этапе вы можете использовать собственный API узла для выполнения:

const fs = require('fs');

fs.readFile(`${process.cwd()}/${program.init}/package.json`, (err, data) => {
  if (err) throw err;
  let _data = JSON.parse(data.toString())
  _data.name = program.init
  _data.version = '1.0.0'
  let str = JSON.stringify(_data, null, 4);
  fs.writeFile(`${process.cwd()}/${program.init}/package.json`, str, function (err) {
    if (err) throw err;
  })
});

Прочитайте файл через readFile, writeFile для записи в файл, будьте осторожны, чтобы передать строку при записиJSON.stringify(_data, null, 4), таким образом вы можете вывести отформатированный файл json.

Это можно легко сделать через ноду, здесь много места для развития, так что я не буду говорить больше.

Эпилог

Это инструмент для строительных лесов, который я сделал самx-build, вы можете обратиться к этому исходному коду или использовать его.

Категории