Npm makes cli 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 packageconfiguration 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 //测试用例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"
},
Then install a dependency, the commander plug-in written by TJ,
npm i commander --saveWith 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'); >>引入
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信息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);
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 gThe 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;
}
};
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 --saveThis 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 publishIf 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/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:
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!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Solana price forecast for August 2025
Aug 07, 2025 pm 11:21 PM
There are three scenarios for Solana price forecast in August 2025: 1. In an optimistic scenario, if the network stability improves and the ecology is prosperous, the price can reach $550-$800; 2. In a neutral scenario, the network is stable and the ecology is steadily developing, with a price range of $300-$500; 3. In a pessimistic scenario, if network problems occur frequently, the ecology shrinks and encounters a bear market, the price may fall back to $100-$250; Investors can choose platforms such as Binance, Ouyi, Huobi, Gate.io, KuCoin or Coinbase for trading, which provide good liquidity and security, suitable for different types of investors to participate in the Solana market.
How to use 5,000 yuan to earn 500,000 yuan in the currency circle?
Aug 07, 2025 pm 08:42 PM
In the field of digital currency, a full range of variables and opportunities, increasing the principal of 5,000 to 500,000 means that one hundred times the asset appreciation needs to be achieved. This is not a simple math game, but a comprehensive test involving cognition, strategy, mentality and execution. It requires participants not to rely solely on luck, but also to have keen market insight and extraordinary risk management capabilities.
Dogecoin DOGE price forecast: 2025, 2026 - 2030
Aug 08, 2025 pm 07:54 PM
Dogecoin (DOGE) is expected to reach an optimistic range of $0.40 to $0.80 in 2025, provided that the market enters a bull market and has substantial application, otherwise it may hover between $0.10 and $0.25; 1. The price in 2025 is driven by market cycles and celebrity effects, especially depending on whether Elon Musk-related companies use DOGE payments; 2. It may experience a bull market correction from 2026 to 2027, and the price will decline significantly; 3. By 2030, if DOGE can expand a wide range of application scenarios and improve technical performance, the long-term price may be stable at $1.00 or even higher; 4. If it cannot be transformed into a practical asset and only rely on the community and celebrity effects, its attractiveness may weaken, and the price will stagnate for a long time or be emerging.
Huobi HTX's new assets in one week (7.28-8.4): Multi-track resonance Meme and AI concepts lead the market
Aug 08, 2025 pm 11:03 PM
Table of Contents Meme's popularity remains: VINE and DONKEY continue to rise. Technical narrative heats up: AI and privacy computing are popular across chains, RWA and regional narrative: OMNI's emerging star Huobi HTX wealth effect continues to be released. Regarding Huobi HTX From July 28 to August 4, the global crypto market maintained a volatile pattern, and the pace of hot spot rotation accelerated. Among the assets launched by Huobi HTX this week, Meme, AI, privacy computing, cross-chain and RWA have advanced together, and the market wealth effect continues to appear. This is also the fifth consecutive week since July that Huobi HTX has achieved collective increase in new assets, further verifying its forward-looking nature in cutting-edge project mining and ecological layout, and continuing to provide strong support for users to grasp the new round of market cycle. Huobi (HTX
How to make 300,000 yuan with 3,000 yuan in the currency circle? Ultimate actual combat
Aug 07, 2025 pm 08:36 PM
From three thousand to three hundred thousand means seeking a hundred times the reward. This is not a fantasy in the crypto world, but it requires the executor to have a very high level of cognition, a tough mindset and precise operation. This is not a comfortable road, but a high-risk and high-reward game. The path to this goal requires careful design and strict implementation.
What is cryptocurrency trading volume? What is the use of trading?
Aug 08, 2025 pm 11:12 PM
Table of Contents What is trading volume? The relationship between trading volume and price What is the use of trading volume for trading? Things to note when using trading volume 1. The amplification of trading volume is not necessarily a favorable one 2. The abnormal trading volume must be interpreted with fundamentals and news 3. The interpretation of trading volume at different market stages is extremely different 4. Pay attention to the possibility of trading volume fraud (fake volume, brush volume, lightning trading) 5. The trading volume of small caps and unpopular stocks is limited in reference 6. The trading volume must be analyzed in a comprehensive analysis of price patterns and technical indicators OANDA provides a unique "position data chart" OANDA open-Position trading principle and application? The first quadrant
How to judge the best time to buy and sell Bitcoin? One article will help you understand
Aug 07, 2025 pm 10:45 PM
Judging the timing of buying and selling Bitcoin is a complex process, which involves a comprehensive interpretation of multi-dimensional market information. Traders and investors usually use a series of tools and methods to analyze market dynamics, striving to find relatively favorable entry and exit points in volatile markets. This is not an exact science, but more like an art based on data and experience. Mastering some core analytical methods can help to examine the market more rationally and thus make more prudent decisions.
A simple explanation of this article understands what it means to have a rat warehouse in the currency circle?
Aug 07, 2025 pm 09:27 PM
When discussing the world of cryptocurrencies, you may hear a word that sounds mysterious and derogatory - "Rat Warehouse". This word is not unique to the currency circle. It originates from the traditional financial market, but it is expressed more vividly in the decentralized and imperfect regulatory environment. To understand it, we can start with the literal meaning and imagine a mouse in a granary that can always secretly and in advance bring the best food back into its hole before the owner opens the warehouse and releases the grain. This vivid metaphor reveals the core of the "rat-handling" behavior.
