- 有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
- 接下来想分享一些自己在项目中遇到的技术选型以及问题场景。
离职不是终点，而是重新校准人生坐标的起点。–毕业
一、前言
正常来说：
一个仓库里面有n个插件，我们会统一管理写到一块仓库。
我们先来看看我们的仓库的。
package.json
java
{
"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
java
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
java
{
"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
java
#!/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选项来锁定依赖版本，确保在不同环境中的一致性。
至此撒花~
后记
这样子，一个npm的插件就开发配置完毕。
我们在实际项目中或多或少遇到一些奇奇怪怪的问题。
自己也会对一些写法的思考，为什么不行🤔，又为什么行了？
最后，祝君能拿下满意的offer。
