Passen Sie das Front-End-Gerüst individuell an

Dieses Mal bringe ich Ihnen einen maßgeschneiderten Front-End-Gerüstbau. Was sind die Vorsichtsmaßnahmen für den maßgeschneiderten Front-End-Gerüstbau?

Wenn Sie an einem neuen Projekt arbeiten, fühlt es sich jedes Mal, wenn Sie den Ordner kopieren und dann package.json, README.md usw. ändern, sehr „elegant“ an, wenn Sie etwas wie vue-cli verwenden möchten , verwenden Sie vue init Laden Sie mein eigenes Front-End-Projekt von Github herunter, das sehr „elegant“ aussieht. Wenn Sie denken, dass es gut aussieht, markieren Sie bitte >>>

Initialisieren Sie das ProjektStruktur

Zunächst haben Sie bereits ein Frontend-Projekt, das Sie selbst erstellt haben, vorausgesetzt, es heißt x-build und wurde hochgeladen Github.

Erstellen Sie zu diesem Zeitpunkt ein neues Projekt und nennen Sie es x-build-cli. Ich beziehe mich auf den Ansatz von vue, sodass Sie auch dann die neueste Version abrufen können, wenn x-build aktualisiert wird und x-build-cli nicht aktualisiert wird x-build.

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

Erstellen Sie einen Ordner mit dem Namen x-build-cli, initialisieren Sie ihn mit npm, erstellen Sie ein bin-Verzeichnis innerhalb des Ordners und erstellen Sie zu diesem Zeitpunkt x-build.js

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

Konfigurieren Sie package.json

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

Fügen Sie „bin“ in package.json hinzu. „x-build“ ist der in die Befehlsnummer einzugebende Befehl. „./bin/x-build.js“ ist die Datei wenn der Befehl ausgeführt wird.

Konfigurieren von 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');

gibt an, dass diese Datei mithilfe von node ausgeführt wird. #! /usr/bin/env node

Das Modul, das installiert werden muss, ist npm i commander download-git-repo chalk ora --save:

Kann die vom Benutzer eingegebenen Befehle analysieren. commander

Laden Sie die Dateien auf Github herunter. download-git-repo

Ändern Sie die Farbe des Ausgabetexteschalk

Kleine Symbole (Laden, Erfolgreich, Warnung usw.) ora

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

.option()

ist eine Abkürzung, ähnlich wie -inpm i -g

. Das init nach [name] kann über program.init abgerufen werden.

Das letzte Element ist die Beschreibung, normalerweise in der x-build -h Eingabeaufforderung

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() kann ein kleines Ladesymbol erstellt werden. >>> Weitere Symbole finden Sie unter ora

download(), um das von uns benötigte Projekt von Github herunterzuladen. Da wir einen Zweig verwenden, fügen wir am Ende #x-build4.1 hinzu Master. Parameter Konfigurationsreferenzdownload-git-repo

chalk.blueBright() wandelt den Ausgabetext in Blau um. >>> Weitere Farben finden Sie unter Kreide

Auf npm hochladen

Studenten, die noch kein Konto haben, können ein Konto auf npm registrieren.

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

Nachdem der Upload erfolgreich war, installieren Sie ihn über npm install x-build-cli -g in der globalen Umgebung.

Verwenden Sie build init [项目名], um die entsprechenden Dateien von Github abzurufen.

Optimierung

Die derzeit heruntergeladene Datei stimmt mit github überein. Ich möchte package.json ändern, name in den initialisierten Projektnamen und version in 1.0 ändern. 0.

Zu diesem Zeitpunkt können Sie dazu die eigene API des Knotens verwenden:

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;
  })
});

Lesen Sie die Datei über readFile und schreiben Sie die Datei vorsichtig es beim Schreiben ein. StringJSON.stringify(_data, null, 4), so kann die formatierte JSON-Datei ausgegeben werden.

Das geht ganz einfach über den Knoten. Hier gibt es viel Raum für Entwicklung, daher werde ich nicht mehr sagen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung des Unterschieds zwischen Component und PureComponent

Zusammenfassung gängiger CSS-Stile

Das obige ist der detaillierte Inhalt vonPassen Sie das Front-End-Gerüst individuell an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!