开发自己的npm依赖

记录开发自己的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了。