1、rimraf 包用法及参数配置详细说明 node包
The UNIX command rm -rf for node.
Install with npm install rimraf, or just drop rimraf.js somewhere.
这是一个NODE支持跨平台的删除命令插件,就像unix系统上的命令:rm -rf,递归删除文件及目录
安装方法见上
在NODE中的使用方法:
rimraf(f, [opts], callback)
在node项目中一般是这样写:
const rm = require('rimraf');
rm(f,[opts], callback);
参数:
f:就是要删除的文件目录或文件,这是一个全局模式,如果不想使用全局模式,可以设置后面第二个参数中的opts.glob为false
opts:配置选项,可忽略,应该是配置第一个搜索目录及文件的方式的,还待研究
callback:回调函数,默认会传递 error 错误参数
示例:rm('/test', {glob:true, silent:false, nosort:true}, error => {
if(error) {
//处理错误的代码
return;
}
//删除目录及文件后要做的事情的代码
});
意思就是:删除/test文件夹及其下的所有文件,成功后再处理一些后续的事情
注意:这个包是依赖glob包的,glob是一个文件匹配包,就是用来根据指定样式或正则来匹配搜索文件的,rimraf能够匹配到文件 就是通过glob来处理的,glob包的地址https://www.npmjs.com/package/glob
2、ora 分割器 node包
Elegant terminal spinner
可以理解为程序运行的分割器,简单说就是提示程序加载的,和layer弹层的layer.loading(),一个道理,程序加载完,然后layer.close(),看例子容易理解
const ora = require('ora');
const spinner = ora('程序开始加载中...').start();
其它配置项:
ora({
color:red, //颜色 默认:cyan ,可选值:black red green yellow blue magenta cyan white gray
text: 'the programm is loading...', //加载或者启动时的文字
frames:['-','+','-'] // 进度显示
interval:50, //进度动画时间间隔
});
其它API:
ora.succeed(‘loading success!’) //成功要显示的 前面有✔
ora.fail(‘loading failed!’) //失败要显示的 ✖
ora.warn('loading has some info need warn') // 警告信息 ⚠
3、chalk 终端文本格式化包 node 包
这个用法很简单,主要就是把终端输出的文本进行格式化,比如:修改颜色,字体样式等
如:
const chalk = require('chalk');
chalk.red('这个文字是红色的')
支持链式写法:chalk.bold.rgb(10, 100, 200)('Hello world!')
4、opn 打开文件,应用及图片 node包
A better node-open. Opens stuff like websites, files, executables. Cross-platform.
打开stuff,即打开如浏览器,文件,可执行的应用程序,可跨平台使用
用法比较简单:
const opn = require('opn');//
Opens the image in the default image viewer
用默认的图片浏览器打开图片
opn('unicorn.png').then(() => {
// image viewer closed
});
// Opens the url in the default browser
在浏览器中打开地址
opn('http://sindresorhus.com');
// Specify the app to open in
用指定的应用打开
opn('http://sindresorhus.com', {app: 'firefox'});
// Specify app arguments
opn('http://sindresorhus.com', {app: ['google chrome', '--incognito']});
说明:The app name is platform dependent. Don't hard code it in reusable modules. For example, Chrome is google chrome on macOS, google-chrome on Linux and chrome on Windows.
5、semver 版本检查 node 包
As a node module: 官方示例:
const semver = require('semver')
semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean(' =v1.2.3 ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true
6、shelljs shell命令 node包
主要是能够运行linux 的shell 命令,以这种方式就可以和linux命令统一了
官方示例:
var shell = require('shelljs');
if (!shell.which('git')) {
shell.echo('Sorry, this script requires git');
shell.exit(1);
}
// Copy files to release dir
shell.rm('-rf', 'out/Release');
shell.cp('-R', 'stuff/', 'out/Release');
// Replace macros in each .js file
shell.cd('lib');
shell.ls('*.js').forEach(function (file) {
shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
});
shell.cd('..');
// Run external tool synchronously 执行外部工具命令
if (shell.exec('git commit -am "Auto-commit"').code !== 0) {
shell.echo('Error: Git commit failed');
shell.exit(1);
}
//上面是在使用vue的时候常用 的几个node 包,做个笔记,以便更好的认识
===========================================================================
下面记录webpack+vue中常用的几个插件及使用配置说明
1、DefinePlugin 常量定义插件 webpack 插件
DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处,设置它,就可以忘记开发和发布构建的规则。
上面是从webpack文档中copy 的解释,但是看起来像是用百度翻译过来的文档,读起来很拗口,解释一下:
这个插件就是定义全局常量的,如果会PHP的人就容易理解,类似PHP里面的define()语句,定义了这个常量后,就可以根据这个常量进行不同的配置,不同的行为了!
比如,最常用的就是根据不同的环境来加载不同的配置,本地环境,加载本地的config, 线上环境,加载线上config, 再比如:开发环境可以记录错误日志,线上环境就可以不用记录等等
用法:
new webpack.DefinePlugin({
PRODUCTION:JSON.stringify(true),
VERSION:JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5:true,
TWO:"1+1",
"typeof window":JSON.stringify("object")
})
上面这个就是定义了4个常量一个 typeof 调用,
分别是:PRODUCTION, VERSION,BROWSER_SUPPORTS_HTML5,TWO,"typeof window"
if ( !PRODUCTION ){
const config = require('prod.config');
} if ( PRODUCTION ){
const config = require('prod.config');
}
说明:
每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。
如果这个值是一个字符串,它会被当作一个代码片段来使用。 比如: TWO:"1+1", TWO的值是:2, 不是'1+1'这个字符串
如果这个值不是字符串,它会被转化为字符串(包括函数)。PRODUCTION : true, 实际值: 'true', 字符串
如果这个值是一个对象,它所有的 key 会被同样的方式定义。 相当于克隆
如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。 "typeof window":JSON.stringify("object") ,相当于:object : “object"
2、UglifyJS js压缩插件 Webpack Plugin
使用方法:
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyJsPlugin(options)
]
}
配置项:
options = {
test: /\.js($|\?)/i, //对js文件的正则匹配
include: /\/includes/ //必须处理的文件目录
exclude: /\/excludes/ //不能用插件处理的文件目录
cache: true | 'path/to/cache' //是否缓存js文件 ,默认缓存目录:node_modules/.cache/uglifyjs-webpack-plugin, 或者使用自定义缓存 目 录
parallel : true | number //是否并行 处理,加快js优化速度,并行 处理的个数为cpu的个数减1, os.cpus().length - 1.,也可以自定义 number
sourceMap: true //是否使用sourcemap, 也就是说是否可以定位错误的行列,cheap-source-map 不支持这种模式的sourceMap
ie8 : true \ false //是否支持ie8
ecma: 6, //是否解析 es 5 6,7,8, 直接写5-8中的一个数字
parse: {...options}, //解析的配置选项,具体哪些没有说明,待研究
mangle: {
...options,
properties: {
// mangle property options
}
},
output: {
comments: false, //去掉注释
beautify: false, //不做代码美化处理
...options //其它选项
},
compress: {...options},
warnings: false
}
3、extract-text-webpack-plugin 文件 分离插件
主要是把文件单独提取到一个独立的文件中