Knoten entwickelt npm-Scaffolding (ähnlich vue-cli)
npm install tengyu-cli -g
Der Quellcode wurde in die Code Cloud hochgeladen: https://gitee.com/bingtengaoyu/tengyu_cli.git
1. Ideen für den Gerüstbau
-
Der Zweck des Gerüstbaus
Um Projekte schnell zu erstellen und Konfigurationsinformationen zu ändern, um den Zweck des automatisierten Front-End-Engineerings zu erreichen
-
Ideen: zwei Wege
Die erste Methode: Ziehen Sie den Code von GitHub, ändern Sie die Konfiguration, Sie müssen eine herunterladbare Vorlage auf GitHub bereitstellen, schließen Sie die Initialisierung ab, entpacken Sie das Zip-Paket nach dem Herunterladen, löschen Sie dann das Zip-Paket, ändern Sie die Konfigurationsdatei, konfigurieren Sie den Proxy, Abhängigkeiten herunterladen und Projekt starten;
Die zweite Methode: Legen Sie die komprimierte Zip-Vorlage auf dem Server ab, das Gerüst lädt die entsprechende Vorlage vom Server herunter, geben Sie die Konfigurationsinformationen gemäß der Eingabeaufforderung ein, schließen Sie die Initialisierung ab, dekomprimieren Sie das Zip-Paket nach dem Herunterladen, löschen Sie dann das Zip-Paket, ändern die Konfigurationsdatei und den Proxy konfigurieren, Abhängigkeiten herunterladen, das Projekt starten
2. Initialisieren Sie das Projekt
npm-Init
3. Ändern Sie die Eintragsdatei package.json
{
"name": "tengyu-cli",
"Version": "1.0.0",
"Beschreibung": "",
"main": "index.js", // Eintragsdatei
"Behälter": {
"tengyu": "index.js"
},
"Skripte": {
"serve": "Knotenindex.js",
"dev": "Knotenindex.js",
"start": "Knotenindex.js",
"test": "echo \"Fehler: kein Test angegeben\" && Ausgang 1"
},
"Autor": "gengbingbing",
"Lizenz": "ISC",
"Abhängigkeiten": {
"Kreide": "^3.0.0",
"Kommandant": "^4.1.1",
"cross-spawn": "^7.0.1",
"download-git-repo": "^3.0.2",
"Lenker": "^4.7.3",
"Anfragender": "^7.0.4",
"Log-Symbole": "^3.0.0",
"ora": "^4.0.3",
"Anfrage": "^2.88.2"
}
}
4. Abhängigkeiten herunterladen
npm installieren
5. Beginnen Sie mit dem Scaffolding (laden Sie den Quellcode direkt hoch)
index.js
#!/usr/bin/env-Knoten
const program = require('commander'); //Befehlszeile entwerfen
const download = require('download-git-repo'); //github Warehouse Download
const inquirer = require('inquirer'); // Befehlszeilenabfrage
const handlebars = require('handlebars'); //Zeichen ändern
const ora = require('ora'); //Status-Flag in der Kommandozeile laden
const chalk = require('chalk'); //Zeichenfarbe der Befehlszeilenausgabe
const logSymbols = require('log-symbols'); // Ausgabesymbole für die Befehlszeile
const fs = require('fs');
const Anfrage = require('request');
const {resolution} = require("path");
const install = require(./utils/install");
console.log(chalk.green(`
tengyu cli-Befehle
-------------------------------------------------- ----------
tengyu init <Vorlagenname> Projektname | Initialisiert das Projekt
tengyu -V | Versionsnummer anzeigen
tengyu -h | Hilfe anzeigen
Tengyu-Liste | Vorlagenliste anzeigen
tengyu herunterladen | ZIP-Vorlage herunterladen
-------------------------------------------------- ----------
`));
// Verfügbare Vorlagen
const-Vorlagen = {
'react-npm-template': {
URL: 'https://gitee.com/bingtengaoyu/reactAntd',
downloadUrl: 'https://gitee.com:bingtengaoyu/reactAntd#master',
Beschreibung: 'Basisvorlage reagieren'
},
'vue-tools': {
URL: 'https://gitee.com/bingtengaoyu/vueTools',
downloadUrl: 'https://gitee.com:bingtengaoyu/vueTools#master',
Beschreibung: 'vue gemeinsame Komponenten'
}
}
// tengyu -V|--Version
program.version('1.0.0'); // Versionsnummer 0.1.0 ausgeben, wenn -v|--version
// tengyu init <Vorlage> <Projekt>
Programm
.command('init <Vorlage> <Projekt>')
.description('Projektvorlage initialisieren')
.action((Vorlagenname, Projektname) => {
console.log (Vorlagenname, Vorlagen);
let downloadUrl = templates[templateName].downloadUrl;
// Laden Sie das Github-Projekt herunter, laden Sie die Aufforderung zum Laden der Wand herunter
const spinner = ora('Vorlage wird heruntergeladen...').start();
//Der erste Parameter ist die Github-Warehouse-Adresse, der zweite Parameter ist der Name des erstellten Projektverzeichnisses und der dritte Parameter ist clone
download(downloadUrl, projectName, { clone: true }, err => {
wenn (fehler) {
console.log(logSymbols.error, chalk.red('Der Download der Projektvorlage ist fehlgeschlagen\n Nur die Vorlagen in der Liste können heruntergeladen werden'));
Konsole.log (err);
} anders {
spinner.succeed('Projektvorlage erfolgreich heruntergeladen');
// Antwort auf der Kommandozeile
inquirer.prompt([
{
Typ: 'Eingabe',
Name: 'appid',
Nachricht: 'Bitte appid eingeben',
Standard: ''
},
{
Typ: 'Eingabe',
Name Name',
Nachricht: 'Bitte geben Sie einen Projektnamen ein',
Standard: Projektname
},
{
Typ: 'Eingabe',
Name: 'Beschreibung',
Nachricht: 'Bitte geben Sie ein Projektprofil ein',
Standard: ''
},
{
Typ: 'Eingabe',
Name: 'Autor',
Nachricht: 'Bitte geben Sie den Namen des Autors ein',
Standard: ''
}
]).then(Antworten => {
//Ändern Sie die Datei „package.json“ gemäß den Ergebnissen der Befehlszeilenabfrage
let packsgeContent = fs.readFileSync(`${projectName}/package.json`, 'utf8');
let packageResult = handlebars.compile(packsgeContent)(answers);
fs.writeFileSync(`${projectName}/package.json`, packageResult);
console.log (Paketergebnis)
fs.writeFileSync(`${projectName}/config.js`, `module.exports = ${JSON.stringify(answers)}`);
console.log(logSymbols.success, chalk.green('Das Projekt wurde erfolgreich initialisiert, Download der Abhängigkeiten starten...'));
install({ cwd: `${resolve('./')}/${projectName}` }).then(data => {
console.log(logSymbols.success, chalk.green('Projektabhängigkeiten erfolgreich heruntergeladen!'));
});
// Verwenden Sie Kreide und Log-Symbole, um den Stil der Befehlszeilenausgabe zu ändern
})
}
})
})
// Laden Sie die Zip-Vorlage herunter
Programm
.command('herunterladen')
.description('Projektvorlage initialisieren')
.action((Vorlagenname, Projektname) => {
inquirer.prompt([
{
Typ: 'Eingabe',
name: 'projekt_name',
Nachricht: 'Bitte geben Sie einen Projektnamen ein',
Standard: 'tengyu-template'
},
{
Typ: 'Liste',
name: 'Vorlagenname',
Nachricht: 'Bitte wählen Sie eine Vorlage zum Herunterladen aus',
Auswahlmöglichkeiten: [
'schnelle Entwicklungsvorlage reagieren',
'vue-toolset'
],
Standard: 'react-npm-template'
}
]).then(Antworten => {
let url = ''
Schalter (answers.template_name) {
case 'react rapid development template':
url = templates['react-npm-template'].url;
brechen;
case 'vue-toolset':
url = templates['vue-tools'].url;
brechen;
Standard:
url = templates['react-npm-template'].url
}
Funktion downloadFile(uri, fileName, callback) {
var stream = fs.createWriteStream (Dateiname);
request(uri).pipe(stream).on('close', callback);
}
downloadFile(url, `${answers.project_name}.zip`, function () {
console.log(logSymbols.success, chalk.green(`${answers.template_name} heruntergeladen!`));
zurückkehren
});
})
})
// Tengyu-Liste
Programm
.command('Liste')
.description('Alle verfügbaren Vorlagen anzeigen')
.action(() => {
console.log(chalk.green(`
Vorlage
----------------------------------
React-npm-template Reaktionsschnelle Entwicklungsvorlage
vue-tools Vue-Tool-Sammlung
----------------------------------
`))
})
program.parse(process.argv);
util-install.js-Datei (zum Herunterladen von Abhängigkeiten)
Verwenden Sie das Cross-Spawn-Modul, um benutzerdefinierte cmd-Befehle zu schreiben
const spawn = require("cross-spawn");
module.exports = Funktion install(Optionen) {
const cwd = options.cwd || process.cwd();
return new Promise((auflösen, ablehnen) => {
const command = options.isYarn ? "Garn" : "npm";
const args = ["install", "--save", "--save-exact", "--loglevel", "error"];
const child = spawn(command, args, { cwd, stdio: ["pipe", process.stdout, process.stderr] });
child.once("Schließen", Code => {
wenn (Code !== 0) {
ablehnen({
Befehl: `${Befehl} ${args.join(" ")}`
});
zurückkehren;
}
beschließen();
});
child.once("Fehler", ablehnen);
});
};
Bisher wurde ein einfaches Gerüst entwickelt
Nach dem npm-Link können Sie lokal testen
6. Veröffentlichen Sie die npm-Bibliothek
-
Richten Sie Ihren eigenen npm-Agenten ein, legen Sie ihn nicht als Taobao-Agenten fest usw.;
-
Gehen Sie zu npm, um Ihr eigenes Konto zu registrieren;
-
Laden Sie Ihr eigenes npm-Gerüst hoch
npm-Anmeldung // anmelden npm publish // Pushen Sie Ihr eigenes Gerüst in die npm-Bibliothek
-
Sie sind fertig, Sie können Ihr eigenes npm-Plugin herunterladen.