几分钟写一个插件一个仓库里面有n个插件，我们会统一管理写到一块仓库。正常流程：需要切换到src\componentr目录

前言

常网IT源码上线啦！
本篇录入技术选型专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
接下来想分享一些自己在项目中遇到的技术选型以及问题场景。

离职不是终点，而是重新校准人生坐标的起点。--毕业

一、前言

正常来说：

一个仓库里面有n个插件，我们会统一管理写到一块仓库。

我们先来看看我们的仓库的。

package.json

{
  "name": "chajian1",
  "version": "0.2.0",
  "private": true,
  "description": "插件1",
  "scripts": {
    "build:chajian1": "vue-cli-service build --target lib --name chajian1 --dest ./src/components/chajian1/lib/ ./src/components/chajian1/render.js && node updateChajian1Version.js",
    "dev": "vue-cli-service serve --open"
  },
  "dependencies": {
    "xlsx": "0.16.6"
  },
  "devDependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
  }
}

重点看一下：

vue-cli-service build --target lib --name chajian1 --dest ./src/components/chajian1/lib/ ./src/components/chajian1/render.js

taget lib：打包成库

dest：第一个路径是：输出位置；第二个路径是：入口文件

最后执行一下升级版本号：node updateChajian1Version.js

二、updateChajian1Version.js

如：1.0.1，打包后自动更新：1.0.2

const fs = require('fs')
const path = require('path')
const pkgPath = path.join(__dirname, 'src/components/chajian/package.json')
let json = fs.readFileSync(pkgPath, 'utf-8')
let pkg = JSON.parse(json)
let version = pkg.version || '0.0.0'
let versions = version.split('.')
let last = versions[versions.length - 1]
last = parseInt(last) + 1
versions[versions.length - 1] = last
pkg.version = versions.join('.')
fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 4), 'utf-8')

其中有一个小插件render。

仔细观察，updateChajian1Version.js有：'src/components/chajian/package.json')

有一个文件夹：chajian

里面有：package.json

{
    "name": "chajian",
    "version": "1.0.9",
    "description": "插件",
    "main": "lib/chajian.umd.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/xxx/chajian.git"
    },
    "author": "chajian",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/xxx/chajian/issues"
    },
    "homepage": "https://github.com/xxx/chajian#readme"
}

又，主仓库package.json的入口render.js即是我们的插件。

最终打包后生成lib文件夹。

三、如何打包，以及发布到npm上

我们我们主的package.json执行npm run build:chajian1打包完后：生成src\components\render\lib

把他发布到npm上。

众所周知，发布到npm上package.json的版本要改一下，我们主package.json打包的时候已经帮我们自动更新好了。

正常流程：需要切换到src\components\render目录下，执行login和publish，输入账号密码邮箱，然后就可以发布。

npm login
npm publish

有没有自动化脚本，我不想每次都输入这两个命令。

四、sh文件脚本了解一下

在Windows系统上，默认是无法直接运行.sh文件的，因为.sh文件是Unix/Linux系统上的Shell脚本文件。但可以：

使用Cygwin
使用Git Bash
使用Windows Subsystem for Linux（WSL）

我使用Git Bash。

我们知道，发布到npm上，要切到指定的文件夹，我们新建一个sh文件

src\components\render\publish.sh

#!/bin/bash

# 登录到 npm
npm login

# 如果登录成功，则执行发布
if [ $? -eq 0 ]; then
  npm publish
else
  echo "npm login 失败，无法执行发布。"
fi

使用Git Bash工具：执行：./publish.sh

输入完账号密码邮箱，自动发布

五、nrm

如果我们公司有私域仓库，有几个地址的话，我们会用nrm来管理包的地址。

假如我已经开发完，想要发布到包管理器上，npm login登录、npm publish发布。

今天试过了一直报403，最后排查是权限不足，开通即可。

我们插件发布成功后，项目要使用这个插件，建议重启项目，强制刷新，页面上才会使用正确的插件最新版本。

如果我们想先调试好，在发布，有一个技巧：

插件打包 vue-cli-service build --target lib成lib，手动复制到使用项目（aaa）然后进行node_modules文件夹（aaa-web\node_modules\chajian）找到插件手动替换文件，调试成功之后，再进行插件发布publish

六、可能遇到的问题

包名冲突：包名已经被其他用户占用，导致无法发布。

邮箱验证问题

版本号冲突

Node版本差异：使用 engines 字段来限制用户使用的 Node.js 版本。

打包后文件不完整

如果你使用的是 webpack，确保在 webpack 配置中关闭了 tree shaking 功能。tree shaking 是一种优化技术，它可能会移除未使用的代码，导致打包后的文件不完整。你可以通过在 webpack 配置中添加 optimization: { usedExports: false } 来关闭 tree shaking。
确保你的代码中没有使用到未导出的模块或变量。如果有未导出的模块或变量被使用，那么在打包过程中它们可能会被移除，导致文件不完整。

依赖管理问题：嵌套依赖导致的复杂依赖关系，或者依赖包的版本锁定问题。

使用 npm ls 命令查看项目的依赖树，了解依赖关系。
在 package.json 中使用 peerDependencies 来声明需要管理的依赖。
使用 npm shrinkwrap 或 npm install 的 --package-lock-only 选项来锁定依赖版本，确保在不同环境中的一致性。