Dieses Mal bringe ich Ihnen Npm zur Verwendung des CLI-Befehlszeilentools. Was sind die Vorsichtsmaßnahmen für die Verwendung von Npm, um das CLI-Befehlszeilentool zu verwenden?
Vorwort
Wenn Sie ein NPM-Plug-In schreiben möchten, wenn Sie Ihre Operationen über die Befehlszeile vereinfachen möchten und auch ein fauler Mensch sind, dann ist dieser Artikel eine Lektüre wert.
Der vorherige Artikel des PO-Eigentümers hat die Anpassung einer eigenen Vorlage vorgestellt, aber der PO-Eigentümer ist damit immer noch nicht zufrieden. Im Projekt müssen wir häufig neue Seiten, logische Stile und andere Dateien erstellen Es ist sehr mühsam, einen neuen zu erstellen und dann einige grundlegende Codes zu kopieren. Daher wurde dieser Artikel geschrieben. Lassen Sie uns als Nächstes vom Po-Master Schritt für Schritt demonstrieren, wie ein NPM-Befehlszeilen-Plug-In erstellt wird.
Npm-Konto registrieren
Um ein NPM-Plug-In zu veröffentlichen, müssen Sie zunächst über ein NPM-Konto verfügen. Der Prozess wird nicht langwierig sein.
Offizielle NPM-Website
Nachdem Sie ein Konto haben, generieren wir über npm init eine PaketKonfigurationsdatei, geben einige Ihrer Informationen ein und dann können Sie mit dem Schreiben von Logikcode beginnen.
Befehlseintrag schreiben
Schauen Sie sich zunächst die Projektstruktur an
. ├── bin //命令配置 ├── README.md //说明文档 ├── index.js //主入口 ├── src //功能文件 ├── package.json //包信息 └── test //测试用例
Die Beispielbefehlscodes werden alle in das bin-Verzeichnis geschrieben. Wir aktivieren nun den Befehl in der Konfigurationsdateipaketdatei und fügen ein Konfigurationselement bin
"bin": {
"xu": "./bin/xu.js"
},hinzu Installieren Sie dann eine Abhängigkeit, das von TJ geschriebene Commander-Plug-in,
npm i commander --save
Mit diesem Tool können wir ganz einfach Befehlscodes schreiben
xu.js
#!/usr/bin/env node
process.title = 'xu';
require('commander')
.version(require('../package').version)
.usage('<command> [options]')
.command('generate', 'generate file from a template (short-cut alias: "g")')
.parse(process.argv)
require('./xu-generate'); >>引入Diese Datei kann als Eintragsdatei betrachtet werden. Der Grund, warum das Skript mit env gestartet werden muss, liegt darin, dass der Skriptinterpreter in verschiedenen Verzeichnissen in Linux installiert werden kann in Suche im PATH-Verzeichnis des Systems. Gleichzeitig spezifiziert env auch einige Systemumgebungsvariablen . Diese Schreibweise dient hauptsächlich dazu, Ihr Programm auf verschiedenen Systemen anwendbar zu machen.
In diesem Schritt können Sie einfach Ihr eigenes NPM-Plugin testen
$ node ./bin/xu.js >>> 输出一些插件usage。help信息
Was den Commander betrifft, können Sie zunächst auf Github des Autors nachlesen. Die Parameter werden hier nicht erläutert.
xu-generate.js
#!/usr/bin/env node
const program = require('commander');
const chalk = require('chalk')
const xu = require('../src/generate');
/**
* Usage.
*/
program
.command('generate')
.description('quick generate your file')
.alias('g')
.action(function(type, name){
xu.run(type, name);
});
program.parse(process.argv);Dies ist der Funktionsbefehl, der einen Generierungsbefehl definiert. .alias('g') ist die Abkürzung des Befehls und dann .action(function(type, name){xu.run(type, name); }); Gibt eine Funktion zurück. Diese Funktion müssen wir tun, um diesen Befehl zu definieren.
Funktionsfunktion schreiben
./src/generate.js
Diese Datei definiert, wann wir
$ xu g
eingeben Die Operation wurde durchgeführt.
/**
* Created by xushaoping on 17/10/11.
*/
const fs = require('fs-extra')
const chalk = require('chalk')
exports.run = function(type, name) {
switch (type) {
case 'page':
const pageFile = './src/page/' + name + '/' + name + '.vue'
const styleFile = './src/page/' + name + '/' + name + '.less'
fs.pathExists(pageFile, (err, exists) => {
if (exists) {
console.log('this file has created')
} else {
fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/page.vue', pageFile, err => {
if (err) return console.error(err)
console.log(pageFile + ' has created')
})
fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/page.less', styleFile, err => {
if (err) return console.error(err)
console.log(styleFile + ' has created')
})
}
})
break;
case 'component':
const componentFile = './src/components/' + name + '.vue'
fs.pathExists(componentFile, (err, exists) => {
if (exists) {
console.log('this file has created')
} else {
fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/component.vue', componentFile, err => {
if (err) return console.error(err)
console.log(componentFile + ' has created')
})
}
})
break;
case 'store':
const storeFile = './src/store/modules' + name + '.js'
fs.pathExists(storeFile, (err, exists) => {
if (exists) {
console.log('this file has created')
} else {
fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/store.js', storeFile, err => {
if (err) return console.error(err)
console.log(storeFile + ' has created')
})
}
})
break;
default:
console.log(chalk.red(`ERROR: uncaught type , you should input like $ xu g page demo` ))
console.log()
console.log(' Examples:')
console.log()
console.log(chalk.gray(' # create a new page'))
console.log(' $ xu g page product')
console.log()
console.log(chalk.gray(' # create a new component'))
console.log(' $ xu g component product')
console.log()
console.log(chalk.gray(' # create a new store'))
console.log(' $ xu g store product')
console.log()
break;
}
};Hier gibt es zwei neue Abhängigkeiten, nämlich die Befehlsausgabefarbe und ein Dateioperations-Plug-in, das über npm installiert wird.
$ npm i fs-extra --save $ npm i chalk --save
Diese js-Datei exportiert eine von xu-generate.js aufzurufende Ausführungsfunktion. Wir erhalten den vom Benutzer eingegebenen Typ und Namen über Parameter und können dann basierend auf dem Typ über das Knoten-FS-Modul arbeiten (hier wird eine Abhängigkeit verwendet). , aber das Prinzip ist immer noch fs) Kopieren Sie die Vorlagendatei in Ihr Projekt.
Zu diesem Zeitpunkt haben wir die Entwicklung eines Befehls abgeschlossen, mit dem die Vorlagendatei des Projekts schnell generiert werden kann.
Lokale Tests
Die Entwicklung von NPM-Paketen ähnelt nicht der Webentwicklung. Sie können sie direkt im Browser anzeigen, eine Testdatei im Instanzverzeichnis erstellen und dann den Knoten testen Nur um unsere Logik zu testen. Wenn nach der Veröffentlichung einige Funktionen getestet werden müssen, verfügt npm über einen Link-Befehl, der eine Verbindung zu Ihrem lokalen Modul herstellen kann. Natürlich können Sie diese auch nachträglich veröffentlichen Die Installation des Plug-In-Tests selbst ist wie die Einführung eines Plug-Ins.
Npm-Paket veröffentlichen
Führen Sie zunächst npm login im Projektstammverzeichnis
$ npm login $ npm publish
aus Wenn hier ein Fehler auftritt, haben Sie möglicherweise die cnpm-Adresse verwendet und müssen das npm-Warehouse zurücksetzen
$ npm config set registry https://registry.npmjs.org/
Aktualisieren Sie dann das npm-Paket. Die Versionsnummer muss größer sein als beim letzten Mal
Postskriptum
Zu diesem Zeitpunkt ist ein NPM-Einstiegspaket fertiggestellt. Ich war sehr bewegt. Als ich anfing, am Frontend zu arbeiten, sah ich, dass die Plug-ins anderer Leute mit nur einer einfachen Installation so schön waren, dass ich es tun wollte Als ich eine Menge unbekannter Dinge sah, war ich sofort entmutigt (Knotenumgebung, Es gibt viele Dinge. Ich habe gerade vue-cli kopiert und ein paar Codes gesehen. Bitte ignorieren Sie es, wenn Sie ein kluger Kerl sind)
Lernen ist ein schrittweiser Prozess. Ohne eine bestimmte Grundlage und eine langfristige Ansammlung von Erfahrung ist es schwierig, den Quellcode von Dingen zu lernen, die von Experten geschrieben wurden. Wenn man kauen muss, ist das in Ordnung, aber die Effizienz fühlt sich nicht so gut an wie Schritt für Schritt.
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:
ReactJS-Aktionsformularauswahl
Das obige ist der detaillierte Inhalt vonNpm erstellt ein CLI-Befehlszeilentool. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
