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 >>>
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
"bin": {
"x-build": "./bin/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
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); 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
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.
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!
