推荐几款辅助项目开发的神器---总有一款你需要

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

俗话说: "工欲善其事必先利其器"，今天给大家分享几款辅助项目开发的插件，我相信总有一款适合您。

filemanager-webpack-plugin

这是一个 Webpack 的插件. 作用：我们使用webpack 进行打包时，对打包好的文件夹进行进一步的处理。比如复制，移动，压缩，设置产出位置等。
因为我们的H5项目要求将build产出的文件夹放在一个特殊的文件夹中，然后压缩成zip的文件,命名为MMDDHHMMSS.zip的格式。
使用这个工具，可以使操作自动完成，避免一下繁琐的手动操作。
配置示例如下：

const FileManagerPlugin = require("filemanager-webpack-plugin");
// 对打包后产出文件进行压缩,命名等操作。
new FileManagerPlugin({
    events: {
      onStart: [],
      onEnd: [
        {
          delete: ["ucf-publish/www/"],
          copy: [
            {
              source: "ucf-publish/" + context,
              destination: "ucf-publish/www/" + context,
            },
          ],
          // 压缩操作;
          archive: [
            {
              source: "ucf-publish/www",
              destination: homedir + publishFileName,
            },
          ],
        },
      ],
    },
  }),

concurrently

这是一个独立的node-modules依赖包。
作用：是可以在package.json中配置一个命令执去执行多个操作。

由于我们项目中每一个业务文件夹都需要执行打包操作。如果手动的执行 npm run build 文件夹，需要反复的执行多次，浪费时间，操作繁琐，所以需要此功能。

package.json 文件

 "build-all":"concurrently \"vue-cli-service build --demo1\" \"vue-cli-service build --demo2\"",

另一种应用场景：
前端使用React开发，后端使用 nodeJs 开发。
在本地环境需要同时启动前端在3000端口，后端在8080端口。

那么可以通过 concurrently 命令，直接一个命令启动两个服务。

"scripts": {
     "start": "react-scripts start",
     "server": "npm start --prefix backend",
     "dev": "concurrently "npm run server" "npm run start""
},

Rest Client

这是一个 VSCode 的插件工具。
作用：通过一个配置文件即可实现一个简单的HTTP请求的工具。
在VSCode中一边写代码，一边调接口，查看后端返回数据。避免了使用其他工具，来回切换工具的繁琐。
配置文件示例 api.http

 注意 请求头和请求体中间需要一个空行。
@cookie =  // 这是一个变量,设置请求的cookie。
@contentType = application/json;charset=UTF-8
# @host = http://demo.server.com
@host = http://127.0.0.1:3000
@router = /imfbp-fio-web

### 请求示例
@dicReqParam = insNormYorn,
POST {{host}}/{{router}}/common/getDicByCodes?codeList={{dicReqParam}} HTTP/1.1
X-Requested-With: XMLHttpRequest
Cookie: {{cookie}}

### GET请求示例
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34947,34442,35106,31253,35048,35062,34584,34518,34916,34813,26350,34865,35145,35018&wd=3&req=2&csor=1&cb=jQuery110205370714346382366_1636900323664&_=1636900323665

### 查询详情接口;
POST {{host}}{{router}}/fioOrder/queryOrderById HTTP/1.1
Content-Type:{{contentType}} 
Cookie: {{cookie}}

{"id":"1459522294371700737"}

可选链运算符插件(?.)

这是一个 Babel 插件，使js支持?.运算符。
@babel/plugin-proposal-optional-chaining

   let requestData={
      data:{
         formData:{
             name:"king"
         }
      }
   }
   //  之前的取值操作
   let name=requestData && requestData.data && requestData.data.formData && requestData.data.formData.name;
   
   // 等价方式 用可选链操作符
   let name=requestData?.data?.formData?.name;

可选链操作符: 判断问号点后面是否有值，有值取值，否则，如果为null或undefined时直接返回undefined。

空值合并运算符插件(??)

这是一个 Babel 插件，使js支持??运算符。
babel/plugin-proposal-nullish-coalescing-operator

console.log('' ?? 'default value') // "" 
console.log('' || 'default value') // "default value" 
console.log(0 ?? 100) // 0 
console.log(0 || 100) // 100

// 实战使用
var foo = cell.pageIndex ?? "default Value"; // 空值合并操作符
console.log({ foo });

空值合并运算符，功能类似逻辑或运算符。

??语法：只有在左侧为undefined和 null的时候返回右侧值。否则取左侧值。
||语法：左侧为 undefined null 0 "" 时，都会返回右侧值。否则返回左侧值。

PlopJs

这是一个根据模板批量生成代码文件的node modules工具。具体使用方法及使用场景请参考 React项目优化(5)-使用PlopJs生成模板文件