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 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 solve the complexity of WordPress installation and update using Composer How to solve the complexity of WordPress installation and update using Composer Apr 17, 2025 pm 10:54 PM

When managing WordPress websites, you often encounter complex operations such as installation, update, and multi-site conversion. These operations are not only time-consuming, but also prone to errors, causing the website to be paralyzed. Combining the WP-CLI core command with Composer can greatly simplify these tasks, improve efficiency and reliability. This article will introduce how to use Composer to solve these problems and improve the convenience of WordPress management.

How to solve complex BelongsToThrough relationship problem in Laravel? Use Composer! How to solve complex BelongsToThrough relationship problem in Laravel? Use Composer! Apr 17, 2025 pm 09:54 PM

In Laravel development, dealing with complex model relationships has always been a challenge, especially when it comes to multi-level BelongsToThrough relationships. Recently, I encountered this problem in a project dealing with a multi-level model relationship, where traditional HasManyThrough relationships fail to meet the needs, resulting in data queries becoming complex and inefficient. After some exploration, I found the library staudenmeir/belongs-to-through, which easily installed and solved my troubles through Composer.

Accelerate PHP code inspection: Experience and practice using overtrue/phplint library Accelerate PHP code inspection: Experience and practice using overtrue/phplint library Apr 17, 2025 pm 11:06 PM

During the development process, we often need to perform syntax checks on PHP code to ensure the correctness and maintainability of the code. However, when the project is large, the single-threaded syntax checking process can become very slow. Recently, I encountered this problem in my project. After trying multiple methods, I finally found the library overtrue/phplint, which greatly improves the speed of code inspection through parallel processing.

How to solve SQL parsing problem? Use greenlion/php-sql-parser! How to solve SQL parsing problem? Use greenlion/php-sql-parser! Apr 17, 2025 pm 09:15 PM

When developing a project that requires parsing SQL statements, I encountered a tricky problem: how to efficiently parse MySQL's SQL statements and extract the key information. After trying many methods, I found that the greenlion/php-sql-parser library can perfectly solve my needs.

How to optimize website performance: Experiences and lessons learned from using the Minify library How to optimize website performance: Experiences and lessons learned from using the Minify library Apr 17, 2025 pm 11:18 PM

In the process of developing a website, improving page loading has always been one of my top priorities. Once, I tried using the Miniify library to compress and merge CSS and JavaScript files in order to improve the performance of the website. However, I encountered many problems and challenges during use, which eventually made me realize that Miniify may no longer be the best choice. Below I will share my experience and how to install and use Minify through Composer.

Solve CSS prefix problem using Composer: Practice of padaliyajay/php-autoprefixer library Solve CSS prefix problem using Composer: Practice of padaliyajay/php-autoprefixer library Apr 17, 2025 pm 11:27 PM

I'm having a tricky problem when developing a front-end project: I need to manually add a browser prefix to the CSS properties to ensure compatibility. This is not only time consuming, but also error-prone. After some exploration, I discovered the padaliyajay/php-autoprefixer library, which easily solved my troubles with Composer.

Solve database connection problem: a practical case of using minii/db library Solve database connection problem: a practical case of using minii/db library Apr 18, 2025 am 07:09 AM

I encountered a tricky problem when developing a small application: the need to quickly integrate a lightweight database operation library. After trying multiple libraries, I found that they either have too much functionality or are not very compatible. Eventually, I found minii/db, a simplified version based on Yii2 that solved my problem perfectly.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

See all articles