开发自己的npm依赖
- 记录开发自己的npm依赖包
- 创建一个新的vue项目
- 添加配置
- 发布到npm仓库上
- npm link关联项目
- 使用pnpm自动关联
记录开发自己的npm依赖包
实际应用中需要在element-ui基础上封装一些组件,又不想将项目变得很大,开发一个自己的依赖方便vue项目中使用
创建一个新的vue项目
首先创建一个文件夹,然后进入该文件夹,命令行输入npm init,选择需要的配置。等命令行输完以后,会在该目录下自动创建一个package.json文件。
添加配置
现在我们的代码基本上写的差不多了,然后试着按照全局包来处理。首先修改package.json文件,添加bin字段,bin字段的作用是告诉环境执行命令的时候执行哪个文件。
{
"name": "touch-vue-pc",
"version": "1.0.2",
"description": "touch-vue-pc",
"bin": {
"touch-vue-pc": "index.js"
},
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"author": "guoyq",
"license": "ISC",
"dependencies": {
"axios": "^0.19.0",
"vue-router": "^3.1.3",
"vuex": "^3.0.1"
},
"devDependencies": {
//需要的依赖
}
}
在bin的入口文件(也就是index.js文件)的最上方还要加一行代码,#!/usr/bin/env node
,它声明了脚本文件的解释程序,脚本文件有很多,我们要运行这个index.js,就得告诉系统你是要用什么来执行我们的脚本,这里当然是使用node了。
把这两个地方修改后,我们基本上可以使用了,先测试一下看可以用不。使用npm link命令,它的作用是把当前文件夹拷贝到node全局包的安装环境下,当拷贝过去以后你就可以把他当成一个全局包使用了,拷贝完后直接使用项目名来运行脚本就可以了。
发布到npm仓库上
npm link命令是把本地的文件夹放在全局目录下,但是为了更多的小伙伴使用我们的包,就需要把该包放在npm仓库中。首先需要去npm官网注册自己的账号,已有账号忽略这一步。此外由于国内一般使用的是淘宝的镜像,如果你使用的也是淘宝的或者其他的镜像,这里必须要切回到npm的镜像,强烈建议使用nrm来管理镜像源:
# 安装nrm
npm install -g nrm
# 切回到npm镜像源
nrm use npm
在提交的时候,往往有些东西是不希望提交的,那么可以新建一个.npmignore文件,作用类似于.gitignore,只是这个是提交npm仓库的时候忽略的,这里我们在该文件的内容如下:
node_modules/
.idea
.vscode
.gitignore
.git
当这个时候你只需要登录npm并且发布就好了,如果已经登录了就可以直接发布了(可以使用命令npm whoami来查看自己的登录信息,再次强调一定要切到npm镜像源):
# 登录npm 需要数据用户名 密码 邮箱等
npm login
# 发布
npm publish
发布的速度还是挺快的,当你发布完成以后就可以使用npm install -g 项目名
来安装全局包了。最后来运行就可以了,大功告成。此时你可以使用命令nrm use taobao切换到淘宝镜像了,往往淘宝镜像会在5分钟内从npm获取一下新的包,所以你切到淘宝的镜像,5分钟后也可以安装(其实一般情况下根本不到5分钟)。
npm link关联项目
在开发的依赖项目中npm link
,会提示你添加了一个包,npm全局包的位置。
npm全局包默认位置:C:\Users\admin\AppData\Roaming\npm\node_modules
然后在引入该依赖的项目中npm link 项目名
,这样你在project1修改导出的字符串,project2中关联的包会自动更新,不需要重新进行关联就可以进行调试。
使用pnpm自动关联
全局安装pnpm npm i pnpm -g
新建一个test项目进行测试。
在项目根目录创建pnpm-workspace.yaml文件。
packages:
- 'packages/*'
这代表什么呢,代表packages文件夹下的所有项目,都可以被很容易的被其他项目自动link,底下声明的文件夹都可以称为workspace。
那我们去packages创建一个新项目,就test2好了。
创建一个简单的模块,暴露一个字符串。
这时候我们想要在test关联test2该怎么做呢?
只要在test的package.json中依赖加入对应的workspace下的项目就好了。
"dependencies": {
"test2": "workspace:*"
}
然后在根项目test执行pnpm i
,就会自动关联test2到test了。