node,webpack 常用插件,包及功能作用

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    文件 分离插件

主要是把文件单独提取到一个独立的文件中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容