Npm makes cli command line tool-JS Tutorial-php.cn

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.

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!