Home Web Front-end JS Tutorial Npm makes cli command line tool

Npm makes cli command line tool

Apr 17, 2018 pm 04:14 PM
Command Line tool

This time I will bring you Npm to make the cli command line tool. What are the precautions for using Npm to make the cli command line tool? The following is a practical case, let's take a look.

Preface

If you want to write an npm plug-in, if you want to simplify your operations through the command line, if you are also a lazy person, then this article is worth reading.

The previous article of the Po Master introduced customizing one's own template, but the Po Master is still not satisfied with this. In the project, we frequently need to create new pages, logical styles and other files. Each time, we manually create a new one, and then copy some basic codes. It is very troublesome to get in, so this article is written. Next, let the po master demonstrate step by step how to make an npm command line plug-in.

Register npm account

To publish an npm plug-in, you must first have an npm account. The process will not be long-winded. I'll leave you.

npm official website

After you have an account, we generate a package

configuration file through npm init, fill in some of your information, and then you can start writing logic code.

Writing command entry

First take a look at the project structure

.
├── bin      //命令配置
├── README.md   //说明文档
├── index.js   //主入口
├── src      //功能文件
├── package.json //包信息
└── test     //测试用例
Copy after login
The example command codes are all written in the bin directory. We now enable the command in the configuration file package file and add a configuration item bin

 "bin": {
    "xu": "./bin/xu.js"
  },
Copy after login
Then install a dependency, the commander plug-in written by TJ,

npm i commander --save
Copy after login
With this tool we can easily write command code

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');  >>引入
Copy after login
This file can be regarded as

entry file. The first line of code must be added. The reason why the script is started with env is because the script interpreter may be installed in different directories in Linux. env can be in Search in the system's PATH directory. At the same time, env also stipulates some system environment variables. This way of writing is mainly to make your program applicable on different systems.

At this step, you can simply test your own npm plugin

$ node ./bin/xu.js
>>> 输出一些插件usage。help信息
Copy after login
Regarding the commander, you can go to the author's Github to learn about it first. The parameters will not be explained here.

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);
Copy after login
This is the function command, which defines a generate command, .alias('g') is the abbreviation of the command, and then .action(function(type, name){xu.run(type, name); }); returns a function , this function is what we need to do to define this command.

Write function function

./src/generate.js

This file defines when we enter

$ xu g
Copy after login
The operation was done.

/**
 * 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;
  }
};
Copy after login
There are two new dependencies here, namely command output color and a file operation plug-in, installed through npm.

$ npm i fs-extra --save
$ npm i chalk --save
Copy after login
This js file exports a run function to be called by xu-generate.js. We get the type and name input by the user through parameters, and then we can operate based on the type through the node fs module (a dependency is used here, but the principle is still fs) Copy the template file to your project.

At this point, we have completed the development of a command that can quickly generate the template file of the project.

Local Test

npm package development is not like web development. You can view it directly in the browser, create a test file in the instance directory, and then node test Just to test our logic. If there are some functions that need to be tested after publishing, npm has a link command that can connect to your local module. Of course, you can also publish it after Installing the plug-in test yourself is just like introducing a plug-in.

Publish npm package

First execute npm login in the project root directory

$ npm login 
$ npm publish
Copy after login
If there is an error here, it may be that you used the cnpm address and need to set the npm warehouse back

 $ npm config set registry https://registry.npmjs.org/
Copy after login
Then, update the npm package. The version number needs to be greater than the last time

Postscript

At this point, an entry-level npm package is completed. I was very moved. I remember when I first started working on the front-end, I saw other people’s plug-ins were really good. I could make it so beautiful with just a simple installation. I wanted to do it~ but when I saw a bunch of unfamiliar things, I was immediately discouraged (node ​​environment, There are a lot of things. I just copied vue-cli and saw a pair of codes. Please ignore them.)

Learning is a step-by-step process. Without a certain foundation and long-term accumulation of experience, the source code is difficult to learn. If you have to chew, that's fine, but the efficiency doesn't feel as good as step-by-step.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Using timers with AngualrJs

ReactJS operation form selection

The above is the detailed content of Npm makes cli command line tool. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to send a POST request containing JSON data using PHP's cURL library? How to send a POST request containing JSON data using PHP's cURL library? Apr 01, 2025 pm 03:12 PM

Sending JSON data using PHP's cURL library In PHP development, it is often necessary to interact with external APIs. One of the common ways is to use cURL library to send POST�...

How to efficiently integrate Node.js or Python services under LAMP architecture? How to efficiently integrate Node.js or Python services under LAMP architecture? Apr 01, 2025 pm 02:48 PM

Many website developers face the problem of integrating Node.js or Python services under the LAMP architecture: the existing LAMP (Linux Apache MySQL PHP) architecture website needs...

PHP performance analysis: How to efficiently troubleshoot memory overflow and time-consuming problems caused by Excel import under the Yii2 framework? PHP performance analysis: How to efficiently troubleshoot memory overflow and time-consuming problems caused by Excel import under the Yii2 framework? Apr 01, 2025 am 07:54 AM

PHP performance tuning: Efficiently troubleshoot memory overflow and time-consuming problems. When importing Excel files to parse data in production environments, you often encounter memory overflow errors, even if...

How to configure apscheduler timing task as a service on macOS? How to configure apscheduler timing task as a service on macOS? Apr 01, 2025 pm 06:09 PM

Configure the apscheduler timing task as a service on macOS platform, if you want to configure the apscheduler timing task as a service, similar to ngin...

Can Python parameter annotations use strings? Can Python parameter annotations use strings? Apr 01, 2025 pm 08:39 PM

Alternative usage of Python parameter annotations In Python programming, parameter annotations are a very useful function that can help developers better understand and use functions...

In LangChain, how do I use AgentExecutor to replace the disabled initialize_agent function? In LangChain, how do I use AgentExecutor to replace the disabled initialize_agent function? Apr 01, 2025 pm 04:18 PM

How to replace the disabled initialize_agent function in LangChain? In the LangChain library, initialize_agent...

In the ChatGPT era, how can the technical Q&A community respond to challenges? In the ChatGPT era, how can the technical Q&A community respond to challenges? Apr 01, 2025 pm 11:51 PM

The technical Q&A community in the ChatGPT era: SegmentFault’s response strategy StackOverflow...

Where to download Python .whl files under Windows? Where to download Python .whl files under Windows? Apr 01, 2025 pm 08:18 PM

Python binary library (.whl) download method explores the difficulties many Python developers encounter when installing certain libraries on Windows systems. A common solution...

See all articles