探索NPM宝库：千万插件中，这些必不可少！
站长
· 阅读数 48
推荐npm插件,让你的开发事半功倍！！
推荐几个
npm插件，一起看看都有啥吧！！
rimraf
The UNIX command rm -rf for node. 删除文件文件夹必备，一般常用于
package.json的script命令使用如下：
{
"scripts": {
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"
},
"devDependencies": {
"rimraf": "^2.5.4",
}
}
cross-env
运行跨平台设置和使用环境变量的脚本, 用于项目环境变量，多用于区分生产、开发环境等。使用如下：
NODE_ENV=production
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
},
"devDependencies": {
"cross-env": "^3.1.3",
}
}
再代码中获取可以用process.env.NODE_ENV
dotenv
vue cli也是使用这个的加载环境变量的插件。使用如下：
你可以在你的项目根目录中放置下列文件来指定环境变量：
.env
一个环境文件只包含环境变量的“键=值”对：
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
需要加载下require('dotenv').config({ path: '.env' })
使用process.env.FOO、process.env.VUE_APP_NOT_SECRET_CODE。
如何区分环境的.env变量呢？如下：
创建如下项目结构目录：
├── env
├── .env.dev
├── .env.test
├── .env.pre
└── .env.prd
├── webpack.config.js
对应的变量如下：
# .env.dev 文件
API_URL = https://www.bai0.com
# .env.test 文件
API_URL = https://www.bai1.com
# .env.pre 文件
API_URL = https://www.bai2.com
# .env.prd 文件
API_URL = https://www.bai3.com
在webpack.config.js加载env配置：
require('dotenv').config({ path: path.resolve(__dirname, `./env/.env.${process.env.NODE_ENV}`) })
然后再package.json中：
{
"scripts": {
"build": "cross-env NODE_ENV=pro webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=dev webpack --config webpack.config.js",
"test": "cross-env NODE_ENV=test webpack --config webpack.config.js",
},
"devDependencies": {
"cross-env": "^3.1.3",
"dotenv": "16.0.3"
}
}
inquirer
是一款终端调查问卷得一款npm插件。使用如下：
// index.js
const inquirer = require('inquirer');
inquirer.prompt([
{
type: 'input',
name: 'input',
message: '你的姓名',
default: 'sanyuan',
},
{
type: 'password',
name: 'password',
message: '请输入密码',
default: 'sanyuan',
},
{
type: 'confirm',
name: 'confirm',
message: 'Are you handsome?',
default: true,
},
{
type: 'list',
name: 'list',
message: 'list',
choices: [1, 2, 3],
default: 0, // 索引
},
{
type: 'rawlist',
name: 'rawlist',
message: 'rawlist',
choices: [1, 2, 3],
default: 0,
},
{
type: 'expand',
message: 'Conflict on `file.js`: ',
name: 'overwrite',
choices: [
{
key: 'y',
name: 'Overwrite',
value: 'overwrite',
},
{
key: 'a',
name: 'Overwrite this one and all next',
value: 'overwrite_all',
},
{
key: 'd',
name: 'Show diff',
value: 'diff',
},
],
},
{
type: 'checkbox', // 多选 空格选中、i 反选、a全选
message: 'Select toppings',
name: 'toppings',
default: 'Pepperoni',
choices: [
{
name: 'Pepperoni',
checked: true,
},
{
name: 'Ham',
},
{
name: 'Ground Meat',
},
{
name: 'Bacon',
},
],
},
]).then((answers) => {
console.log('结果为:');
console.log(answers);
});
相关属性如下：
/**
* list: 问题对象中必须有type,name,message,choices等属性，同时，default选项必须为默认值在choices数组中的位置索引(Boolean); [1,2,3]
* rawlist: 与List类型类似，不同在于，list打印出来为无序列表，而rawlist打印为有序列表; [1,2,3]
* expand: 同样是生成列表，但是在choices属性中需要增加一个属性：key，这个属性用于快速选择问题的答案。类似于alias或者shorthand的东西。同时这个属性值必须为一个小写字母[{key: a, value: 1}, {key: b, value: 2}]
* checkbox: 其余诸项与list类似，主要区别在于，是以一个checkbox的形式进行选择。同时在choices数组中，带有checked: true属性的选项为默认值。
* confirm: 提问，回答为Y/N。若有default属性，则属性值应为Boolean类型;
* input: 输入得问题值
* password: 密文输入得文本值
*/
type PromptType = 'list' | 'rawlist' | 'expand' | 'checkbox' | 'confirm' | 'input' | 'password' | 'editor';
interface PromptProps{
type: PromptType; // 表示提问的类型
name: string; // 在最后获取到的answers回答对象中，作为当前这个问题的key
message: string; // 打印出来的问题标题
default: any; // 默认值
choices: Array<any>; // 选择集合
validate(): boolean; // 检验
filter(): Array<any>; // 过滤
when: Function | Boolean; // 接受当前用户输入的answers对象，并且通过返回true或者false来决定是否当前的问题应该去问。也可以是简单类型的值。
pageSize: number; // 改变渲染list,rawlist,expand或者checkbox时的行数的长度。
}
chokidar
可以监听文件夹变化的一个库，使用如下：
const chokidar = require('chokidar');
// ./test 文件夹
// ignored 忽略vue文件
const watcher = chokidar.watch('./test', {
ignored: /_[^\/].*_(.vue)?/, // 忽略的指定
});
['add', 'change', 'unlink'].forEach(action => { // more : ['addDir', 'unlinkDir', 'error', 'raw']
watcher.on(action, () => {
console.log(`[action]: ${action}`)
});
});
watcher.on('ready', () => {
console.log('[ready]: =>')
});
['SIGINT', 'SIGTERM'].forEach(signal => {
process.on(signal, () => {
watcher.close();
});
});
commander
完整的
node.js命令行解决方案。cli开发利器。简单示例如下：
#!/usr/bin/env node
const commander = require('commander');
const program = new commander.Command();
async function main() {
program
.version(require('../package.json').version)
.usage('<command> [options] ');
program
.command('serve')
.description('开发时 watch')
.action(async (...args) => {
await require('../commands/serve')(...args);
});
program
.command('build')
.description('构建')
.action(async (...args) => {
await require('../commands/build')(...args);
});
program
.command('unit-test')
.description('单元测试')
.action((...args) => require('../commands/unit-test')(...args));
await program.parseAsync(process.argv);
}
main().catch((e) => {
error(e);
process.exit(1);
});
然后再项目package.json添加如下：
{
"name": "test-scripts",
"version": "1.0.0",
"bin": {
"test-scripts": "bin/index.js"
}
}
发布npm后就可以再项目中使用如下：
{
"scripts": {
"test": "test-scripts unit-test ./tests/**/*.spec.js",
"serve": "test-scripts serve",
"build": "test-scripts build"
},
"devDependencies": {
"test-scripts": "1.0.0"
}
}
conventional-changelog-cli
Conventional Changelog CLI是一个命令行工具，用于生成Conventional Commits风格的更改日志。它可以帮助您在项目中使用Conventional Commits规范，并为您生成符合这种规范的更改日志。
自动生成
CHANGELOG.md简单使用如下：
{
"scripts": {
"version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
"postversion": "git push --tags && git push"
},
"devDependencies": {
"conventional-changelog-cli": "^2.1.1"
}
}
svgo
一款
svg文件优化插件，组要针对的是设计师再使用插件导出svg的时候会有些没用的属性等优化。从精简效率来看，很惊人，有50%~60%的精简率。
拿zhangxinxu的做对比就比较清楚了如下：
优化前：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#FFFFFF" d="M147.566,67.575c-3.979-3.24-4.355-3.337-8.9-5.64c-2.043-1.043-5.057,1.646-6.529,3.636L92,117.73
L65.85,83.972c-1.478-1.988-4.205-2.72-6.25-1.782c-4.658,2.408-4.19,2.327-8.168,5.467c-1.817,1.466-1.932,4.082-0.456,6.065
c0,0,28.183,36.5,31.592,40.896c5,6.274,14.09,5.965,18.864,0c3.521-4.498,46.59-61.078,46.59-61.078
C149.499,71.55,149.385,68.937,147.566,67.575z"/>
</svg>
优化后：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#FFF" d="M147.566 67.575c-3.98-3.24-4.355-3.337-8.9-5.64-2.043-1.043-5.057 1.646-6.53 3.636L92 117.73 65.85 83.972c-1.478-1.988-4.205-2.72-6.25-1.782-4.658 2.408-4.19 2.327-8.168 5.467-1.817 1.466-1.932 4.082-.456 6.065 0 0 28.183 36.5 31.592 40.896 5 6.274 14.09 5.965 18.864 0 3.52-4.498 46.59-61.078 46.59-61.078 1.477-1.99 1.363-4.603-.456-5.965z"/></svg>
恩，有种胖妞变靓妹的即视感：
简单使用如下：
svgo -f ../path/to/folder/with/svg/files
又或者：
svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output
单个文件使用举例
svgo test.svg
svgo test.svg test.min.svg
配置：
Options:
-h, --help : Help 帮助
-v, --version : Version版本
-i INPUT, --input=INPUT : 输入的文件, "-" 为标准输入
-s STRING, --string=STRING : 输入SVG数据字符串
-f FOLDER, --folder=FOLDER : 输入的文件夹，会优化与重写所有的*.svg文件
-o OUTPUT, --output=OUTPUT : 输入的文件或文件夹 (默认同输入), "-" 标准输出
-p PRECISION, --precision=PRECISION : 设置数字的小数部分，重写插件参数
--config=CONFIG : 配置文件扩展或替换默认设置
--disable=DISABLE : 根据名字禁用插件
--enable=ENABLE : 根据名字开启插件
--datauri=DATAURI : 输入文件以Data URI字符串形式(base64, URI encoded or unencoded)
-q, --quiet : 仅输出错误信息，不包括正常状态消息
--pretty : 让SVG漂亮的打印
--show-plugins : 显示可用和存在的插件
Arguments:
INPUT : 别名 --input
OUTPUT : 别名 --output
svgson
把svg转成
json表达式内置stringify,parse使用如下：
const { parse, stringify } = require('svgson')
// ----------------------------
// Convert SVG to JSON AST
// ----------------------------
parse(`
<svg>
<line
stroke= "#bada55"
stroke-width= "2"
stroke-linecap= "round"
x1= "70"
y1= "80"
x2= "250"
y2= "150">
</line>
</svg>`).then((json) => {
console.log(JSON.stringify(json, null, 2))
/*
{
name: 'svg',
type: 'element',
value: '',
attributes: {},
children: [
{
name: 'line',
type: 'element',
value: '',
attributes: {
stroke: '#bada55',
'stroke-width': '2',
'stroke-linecap': 'round',
x1: '70',
y1: '80',
x2: '250',
y2: '150'
},
children: []
}
]
}
*/
// -------------------------------
// Convert JSON AST back to SVG
// -------------------------------
const mysvg = stringify(json)
/* returns the SVG as string */
})
shelljs
Shelljs是Node.js下的脚本语言解析器，具有丰富且强大的底层操作(Windows/Linux/OS X)权限。Shelljs本质就是基于node的一层命令封装插件，让前端开发者可以不依赖linux也不依赖类似于cmder的转换工具
基本使用：
const shell = require('shelljs');
// rm -rf
shell.rm('-rf', `dist/`);
// ls
shell.exec('ls');
// copy
shell.cp('-R', `../../${FULL_NAME}`, `${FULL_NAME}`);
// cd ../
shell.cd(PROJECT_AS_NAME);
shell.cd('..');
chalk
chalk 包的作用是修改控制台中字符串的样式，包括：
- 字体样式(加粗、隐藏等)
- 字体颜色
- 背景颜色
const chalk = require('chalk'); // 一个美化 console 输出的库
console.log(chalk.blue.bgRed('Hello world!'));
console.log( chalk.blue.underline.bold('with a blue substring'));
console.log(`
CPU: ${chalk.red('90%')}
RAM: ${chalk.green('40%')}
DISK: ${chalk.yellow('70%')}
`);
// 可以自己定义自己的 log 风格
const log = console.log;
const error = chalk.bold.red;
const warning = chalk.keyword('orange');
log(error('Error!'));
log(warning('Warning!'));
download-git-repo
从node下载并提取一个git存储库(GitHub, GitLab, Bitbucket)。多用于
cli拉取模板代码
方法：download(repository, destination, options, callback)
- repository： 模板下载的仓库地址
- destination: 讲仓库的模板文件下载到本地哪里，
- options：其他选项 clone： 使用git clone 命令下载模板
基础使用：
const download = reruire('download-git-repo')
const url = '';
download(url, name, {clone:ture}, function (err) {
})
ora
ora包用于显示加载中的效果，类似于前端页面的
loading效果。使用方式如下:
const ora = require('ora');
const spinner = ora('正在下载模板...');
// 开始下载
spinner.start();
// 下载失败调用
spinner.fail();
// 下载成功调用
spinner.succeed();
handlebars
Handlebars 是一种简单的 模板语言。
简单用法示例如下：
const Handlebars = require("handlebars");
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "张三" }));
你可以通过将模板包含在
<script>标签中来将模板传递给浏览器。
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
使用 Handlebars.compile 在 JavaScript 中编译模板
const source = document.getElementById("entry-template").innerHTML;
const template = Handlebars.compile(source);
const context = { title: "我的新文章", body: "这是我的第一篇文章！" };
const html = template(context);
结果为：
<div class="entry">
<h1>我的新文章</h1>
<div class="body">
这是我的第一篇文章！
</div>
</div>
log-symbols
可以在信息前面加上 √ 或 × 等的图标。简单使用如下：
import logSymbols from 'log-symbols';
console.log(logSymbols.success, 'Finished successfully!');
// Terminals with Unicode support: ✔ Finished successfully!
// Terminals without Unicode support: √ Finished successfully!
源码也很简单可以看下如下：
import chalk from 'chalk';
import isUnicodeSupported from 'is-unicode-supported';
const main = {
info: chalk.blue('ℹ'),
success: chalk.green('✔'),
warning: chalk.yellow('⚠'),
error: chalk.red('✖'),
};
const fallback = {
info: chalk.blue('i'),
success: chalk.green('√'),
warning: chalk.yellow('‼'),
error: chalk.red('×'),
};
const logSymbols = isUnicodeSupported() ? main : fallback;
export default logSymbols;
glob
glob这个库可以很轻松地匹配指定的目录下的所有文件，例如：
const glob =require("glob");
glob('src/**')
它表示匹配
src目录下的所有文件。但是需要注意的是它默认不匹配以.开头的文件。如果需要匹配以.开头的文件需要指定dot: true这个配置项。
glob('src/**', { dot: true });
如果想忽略匹配某些目录，可以设置ignore选项。
glob('src/**', { ignore: ['node_modules/**'], dot: true })
一下结构文件：
.
└── test
├── .a
├── .b
│ ├── d.js
│ └── .f
└── c.txt
使用如下方式匹配
glob('test/**', { dot: true, ignore: ['.b/**'] })
输出结果
[
'test',
'test/.a',
'test/.b',
'test/.b/.f',
'test/.b/d.js',
'test/.c.txt'
]
globby
globby，是基于glob，并进一步得到了增强
增强特性:
- Promise 接口
- 多模式匹配
- 否定模式匹配
- 扩展目录: dir → dir/**/*
- 支持 .gitignore
import { globby } from 'globby';
(async () => {
const paths = await globby('images', {
expandDirectories: {
files: ['cat', 'unicorn', '*.jpg'],
extensions: ['png']
}
});
console.log(paths);
//=> ['cat.png', 'unicorn.png', 'cow.jpg', 'rainbow.jpg']
})();
lerna
Lerna是一个管理工具，用于管理包含多个软件包（package）的JavaScript项目，下面是简单用法
npm install lerna -g
lerna init # 初始化一个Lerna项目
lerna.json
npmClient 更改为 yarn
{
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
"useWorkspaces": true,
"version": "0.0.0",
"npmClient": "yarn",
"packages": [
"packages/*"
]
}
为所有的package项目都安装一个lodash包可以使用：
lerna add lodash
为所有的package项目都安装依赖
lerna bootstrap
npm-run-all
npm-run-all跨平台，一种可以并行或顺序运行多个 npm 脚本的 CLI 工具。, 实现一个命令执行所有项目安装依赖、运行和打包。简单使用如下：
{
"scripts": {
"install:hash": "cd app-vue-hash && npm install",
"install:history": "cd app-vue-history && npm install",
"install:main": "cd main && npm install",
"install-all": "npm-run-all install:*",
"start:hash": "cd app-vue-hash && npm run serve ",
"start:history": "cd app-vue-history && npm run serve",
"start:main": "cd main && npm run serve",
"start-all": "npm-run-all --parallel start:*",
"serve-all": "npm-run-all --parallel start:*",
"build:hash": "cd app-vue-hash && npm run build",
"build:history": "cd app-vue-history && npm run build",
"build:main": "cd main && npm run build",
"build-all": "npm-run-all --parallel build:*"
},
"devDependencies": {
"npm-run-all": "^4.1.5"
}
}
- npm-run-all 综合性命令（可顺序可并行）
- run-s 简写，等价于 npm-run-all -s 顺序（sequentially）运行 npm-scripts
- run-p 简写，等价于 npm-run-all -p 并行（parallel）运行 npm-scripts
总结
以上就是一些
npm插件啦， 欢迎点赞、收藏。
转载自:https://juejin.cn/post/7238519458625732669