Npm crée un outil de ligne de commande cli

Cette fois, je vais vous proposer Npm pour utiliser l'outil de ligne de commande cli. Quelles sont les précautions pour utiliser Npm pour utiliser l'outil de ligne de commande cli. Voici un cas pratique, jetons un coup d'œil.

Avant-propos

Si vous souhaitez écrire un plug-in npm, si vous souhaitez simplifier vos opérations via la ligne de commande, si vous êtes également un paresseux, alors cet article vaut la peine d'être lu.

L'article précédent du propriétaire du po présentait la personnalisation de son propre modèle, mais le propriétaire du po n'en est toujours pas satisfait. Dans le projet, nous devons fréquemment créer de nouvelles pages, des styles logiques et d'autres fichiers. Chaque fois, nous créons manuellement. un nouveau, puis copiez quelques codes de base. Il est très difficile d'y accéder, c'est pourquoi cet article est écrit. Ensuite, laissez le po master vous montrer étape par étape comment créer un plug-in de ligne de commande npm.

Enregistrer un compte npm

Pour publier un plug-in npm, vous devez d'abord avoir un compte npm. La démarche ne sera pas longue, je vous laisse.

Site officiel du npm

Une fois que vous avez un compte, nous générons un packagefichier de configuration via npm init, remplissons certaines de vos informations, puis vous pouvez commencer à écrire du code logique.

Écrire une entrée de commande

Tout d’abord, jetez un œil à la structure du projet

.
├── bin      //命令配置
├── README.md   //说明文档
├── index.js   //主入口
├── src      //功能文件
├── package.json //包信息
└── test     //测试用例

Les exemples de codes de commande sont tous écrits dans le répertoire bin. Nous activons maintenant la commande dans le fichier de package du fichier de configuration et ajoutons un élément de configuration bin

 "bin": {
    "xu": "./bin/xu.js"
  },

. Installez ensuite une dépendance, le plug-in commander écrit par TJ,

npm i commander --save

Avec cet outil, nous pouvons facilement écrire des codes de commande

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');  >>引入

Ce fichier peut être considéré comme un fichier d'entrée. La première ligne de code doit être ajoutée. La raison pour laquelle le script est démarré avec env est que l'interpréteur de script peut être installé dans différents répertoires sous Linux env. dans Rechercher dans le répertoire PATH du système. Dans le même temps, env spécifie également certaines variables d'environnement système . Cette façon d'écrire sert principalement à rendre votre programme applicable sur différents systèmes.

A cette étape, vous pouvez simplement tester votre propre plugin npm

$ node ./bin/xu.js
>>> 输出一些插件usage。help信息

Concernant le commandant, vous pouvez vous rendre sur le Github de l'auteur pour en prendre connaissance au préalable. Les paramètres ne seront pas expliqués ici.

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

Il s'agit de la commande de fonction, qui définit une commande de génération, .alias('g') est l'abréviation de la commande, puis .action(function(type, name){xu.run(type, name); }); renvoie une fonction, cette fonction est ce que nous devons faire pour définir cette commande.

Fonction d'écriture

./src/generate.js

Ce fichier définit quand on entre

$ xu g

L'opération était faite.

/**
 * 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;
  }
};

Il y a deux nouvelles dépendances ici, à savoir la couleur de sortie de la commande et un plug-in d'opération de fichier, installé via npm.

$ npm i fs-extra --save
$ npm i chalk --save

Ce fichier js exporte une fonction d'exécution qui sera appelée par xu-generate.js. Nous obtenons le type et le nom saisis par l'utilisateur via les paramètres, puis nous pouvons opérer en fonction du type via le module node fs (une dépendance est utilisée ici. , mais le principe est toujours fs) Copiez le fichier modèle dans votre projet.

À ce stade, nous avons terminé le développement d'une commande capable de générer rapidement le fichier modèle du projet.

Tests locaux

Le développement de packages npm n'est pas comme le développement Web. Vous pouvez le visualiser directement dans le navigateur, créer un fichier de test dans le répertoire de l'instance, puis tester le nœud. Juste pour tester notre logique. Si certaines fonctions doivent être testées après la publication, npm dispose d'une commande link qui peut se connecter à votre module local. Bien sûr, vous pouvez également la publier après. Installer le test du plug-in vous-même revient à introduire un plug-in.

Publier le package npm

Exécutez d’abord la connexion npm dans le répertoire racine du projet

$ npm login 
$ npm publish

S'il y a une erreur ici, il se peut que vous ayez utilisé l'adresse cnpm et que vous deviez redéfinir l'entrepôt npm

 $ npm config set registry https://registry.npmjs.org/

Ensuite, mettez à jour le package npm. Le numéro de version doit être supérieur à la dernière fois

. Post-scriptum

À ce stade, un package npm d’entrée de gamme est terminé. J'ai été très ému. Je me souviens que lorsque j'ai commencé à travailler sur le front-end, j'ai vu que les plug-ins des autres étaient vraiment bons, je pouvais les rendre si beaux avec juste une simple installation, j'ai voulu le faire ~ mais quand je l'ai fait. J'ai vu un tas de choses inconnues, j'ai immédiatement été découragé (environnement de nœud, il y a beaucoup de choses. J'ai juste copié vue-cli et j'ai vu une paire de codes. Veuillez l'ignorer si vous êtes une bonne personne)

L'apprentissage est un processus étape par étape. Sans une certaine base et une accumulation d'expérience à long terme, il est difficile d'apprendre le code source des éléments écrits par des experts. Si vous devez mâcher, c'est bien, mais l'efficacité n'est pas aussi bonne que étape par étape.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser des minuteries avec AngualrJs

Sélection du formulaire d'action ReactJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!