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

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

你可能感兴趣的:(node,webpack 常用插件,包及功能作用)