Npm实用模块专题

概要

这篇专题记录工作中用到的一些工具库，不是Jquery等API库，而是可以在命令行中执行的一些辅助工具库

1. nodemon（自动执行js文件）
2. qs（解析及序列化）
3. npm-run-all（依次或并行执行 npm 命令）
4. browser-sync（省时的浏览器同步测试工具）
5. browserify（将import、require转为浏览器支持的语法）
6. dayjs（非常好用的日期处理工具）
7. del（删除文件和文件夹）

nodemon ./app.js

• 相关文档：nodemon

const qs = require('qs')

// 1、解析正常的表单格式字符串
console.log(qs.parse('a=foo&c=bar&e=啦啦'))

// 1、解析结果如下
{ a: 'foo', c: 'bar', e: '啦啦' }

// 2、解析以查询字符串开头的字符串需额外参数
console.log(qs.parse('?a=b&c=d', { ignoreQueryPrefix: true }))

// 2、解析结果如下
{ a: 'b', c: 'd' }

// 3、自定义解析时的分隔符为;
console.log(qs.parse('a=b;c=d', { delimiter: ';' }))

// 3、解析结果如下
{ a: 'b', c: 'd' }

const qs = require('qs')
const str = 'name=sdad%E5%93%88%E5%93%88%E5%93%88&age=21&url=https%3A%2F%2Fblog.csdn.net%2Fsansan_7957%2Farticle%2Fdetails%2F82227040&flag=false'

console.log(qs.parse(str))

// 解析结果如下
{ 
  name: 'sdad哈哈哈',
  age: '21',
  url: 'https://blog.csdn.net/sansan_7957/article/details/82227040',
  flag: 'false' 
}

const qs = require('qs')

console.log(qs.parse('foo[bar]=baz'))

// 解析结果如下
{ foo: { bar: 'baz' } }

const qs = require('qs')

console.log(qs.stringify({
    name: 'sdad哈哈哈',
    age: 21,
    url: 'https://blog.csdn.net/sansan_7957/article/details/82227040',
    flag: false
}))

// 序列化结果如下，qs默认会进行URL编码
name=sdad%E5%93%88%E5%93%88%E5%93%88&age=21&url=https%3A%2F%2Fblog.csdn.net%2Fsansan_7957%2Farticle%2Fdetails%2F82227040&flag=false

import axios from 'axios'

// 由于大多数 Post 请求，需要提供application/x-www-form-urlencoded格式的数据，因此在这里使用qs模块的stringify方法将参数对象格式化
const post = function post(url, params,headers) {
	return new Promise((resolve, reject) => {
		axios.post(url, qs.stringify(params),headers)
			.then(res => {
				resolve(res.data);
			})
			.catch(err => {
				reject(err.data)
			})
	});
}

// 如果有一天，你直接使用axios模块的post方法并直接传递了参数对象，后端告诉你无法解析你传递的参数，你可以先考虑是否是服务器不支持JSON格式数据，
// 而你通过axios模块直接传递了参数对象，而axios的post方法默认使用application/json格式编码数据，就会导致这种问题
axios.post('/', {
    email: 'a@qq.com',
}).then(function(data) {});

npm-run-all（依次或并行执行 npm 命令）

简介：这个 npm 包允许依次或者并行执行多个 npm 命令，例如：你可以在 shell 终端中使用 && 达成顺序执行的效果，npm run clean && npm run build，但是，如何在 npm 的 scripts 选项中实现相同效果呢？npm-run-all 提供了两种参数帮助我们实现在 npm 的 scripts 选项中按顺序执行和并行执行多个 npm 脚本

安装：

$ npm install npm-run-all --save-dev
# 或者
$ yarn add npm-run-all --dev

如何使用：这个包提供三个命令，分别是 npm-run-all run-s run-p，其中后两个都是 npm-run-all 带参数的简写，分别对应串行和并行

// 1.1 顺序执行
npm-run-all clean lint build 或者 npm-s clean lint build
// 依次执行三个任务，注意如果某个脚本退出时返回值为空值，那么后续脚本默认是不会执行的，你可以使用参数 --continue-on-error 来规避这种行为。

// 1.2 并行执行
npm-run-all --parallel lint build 或者 npm-p clean lint build
// 同时执行这两个任务，需要注意如果脚本退出时返回空值，所有其它子进程都会被 SIGTERM 信号中断，同样可以用 --continue-on-error 参数禁用行为。

实例：如一个使用 sass 的简单项目，第一步是需要对 scss 文件进行编译为 css 的行为，第二步使用 browser-sync 启动一个服务器并自动打开浏览器以展示项目站点的效果，对于这两个步骤，通过以下方式就可以通过一次行执行一个 npm 命令来完成，而不是手动先做第一步，再去做第二步

// package.json
{
  "name": "BrowsersyncExample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.26.13"
  },
  "scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
    "serve": "browser-sync start --server --files 'css/*.css, *.html'",
    "start": "run-p build serve"
  }
}

如此只要运行 yarn start 就会并行执行 yarn build 和 yarn serve 这两个命令，项目会被自动呈现在浏览器，为了验证并行的效果，甚至可以修改为"start": "run-p serve build"，依然能正常运行

browser-sync（省时的浏览器同步测试工具）

概念：Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面，它会针对你的项目启动一个 web 服务器并在浏览器中自动打开

安装 BrowserSync：

npm install -g browser-sync

// 当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令: 
npm install --save-dev browser-sync

启动 BrowserSync: 一个基本用途是，如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令

如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css"

如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

这是一个来自其官网的静态例子的示范，您可以下载示例包，文件您可以解压任何盘符的任何目录下，不能是中文路径。打开您的命令行工具，进入到BrowsersyncExample目录下，运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址，这一切都会在命令行工具里显示。

// 监听css文件 
browser-sync start --server --files "css/*.css"
// 监听css和html文件 
browser-sync start --server --files "css/*.css, *.html"

browserify（将import、require转为浏览器支持的语法）

概念：browserify 是目前比较流行的模块打包工具之一(另外一个webpack)，它基于基于流式(stream)思想设计，可以通过 command line，也可以通过 API 来使用，不过相比于 Webpack，它只处理 javascript，它使得 node 模块可以在浏览器端使用。其实原理是：browserify 会根据入口文件中的 require 或者 import(ES6,需要安装babel) 自动完成依赖分析，并将依赖文件打包为一个单文件

安装：可以在项目中局部安装，也可以选择全局安装

yarn add browserify -D

在项目中使用：这里综合使用了 browser-sync 模块和 npm-run-all 模块，并引入 dayjs 模块，通过 browserify 编译，之后在浏览器中页面中引入打包后的 main.js

{
  "name": "DayJs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "dayjs": "^1.9.6"
  },
  "devDependencies": {
    "browser-sync": "^2.26.13",
    "browserify": "^17.0.0",
    "npm-run-all": "^4.1.5"
  },
  "scripts": {
    "build": "browserify js/index.js > js/main.js",
    "start": "browser-sync start --server --files '**/*.css, **/*.html'",
    "dev": "run-p build start"
  }
}

dayjs（非常好用的日期处理工具）

概念：dayjs 是一个非常轻巧的 JavaScript 库，用于解析、验证、操作和显示现代浏览器的日期和时间，它是链式的，大小只有 2kb ，被所有浏览器支持

安装：

npm install dayjs --save

使用：

const  dayjs  =  require('dayjs')

// 将一个字符串日期转为dayjs对象
console.log(dayjs('2018-08-08'))
// 日期格式化，这种需求最常见
console.log(dayjs().format('YYYY-MM-DD:HH:mm:ss') )
// 日期往后推三个月
console.log(dayjs().set('month', 3).month())
// 日期往后推一年
console.log(dayjs().add(1, 'year') )
// 判断两个日期哪个更早
console.log(dayjs().isBefore(dayjs()) )
// 下图是打印结果

del（删除文件和文件夹）

介绍：Delete files and directories using globs（使用globs删除文件和目录）