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 文件 分离插件
主要是把文件单独提取到一个独立的文件中
网友评论