前端 - 在vue项目中如何将自己开发的组件放到当前项目中的node_modules包中呢？放进去的组件版本号如何设置呢？

Question

在vue项目中如何将自己开发的组件放到当前项目中的node_modules包中呢？放进去的组件版本号如何设置呢？

Answer 1

首先，要将自己做的组件，单独一个工程。
做成 npm 的包。 发布到 npm 上或者发布到自己公司的私服。
npm 官方有 npm 包开发的文章。

第二个问题。 package 的版本管理。

npm 的版本号为 X.Y.Z 这种格式，并且 X、Y、Z 均为正整数并且不断递增。
X 表示大版本（major）、
Y 表示小版本（minor）、
Z 表示补丁版本（patch）
每次，publish 包体，npm 必须不能等同于上次发包的包体。 所以， npm 针对当前的规则提供了，快捷变更版本好的命令。
大版本： npm version major
小版本： npm version minor
补丁版本： npm version patch

Answer 2

直接 npm install <path/to/package> 就可以了。至于版本号，因为本地磁盘上只有这一个版本的代码，所以版本号是恒定的，为 <path/to/package>/package.json 中设置的版本号。

参见：npm-install | npm Docs、package.json | npm Docs

当然，也可以使用 npm link

如果必须要支持多版本，就考虑发布私有包吧。

Answer 3

你的项目package.json 是管理依赖的。是要你自己安装 npm install 安装的。

在node_modules每个包里也是有package.json，里面有信息是告诉编辑器你引入的时候入口是哪个文件，还有写插件所依赖的插件。

最好的方法就是，单独打包发布。

1、发布到NPM上去上去，然后安装。
2、发布到自己建的私有NPM仓库。

手动加的话不是不行，但很费事，你不但要写插件，还要自己配置package.json。
最好自己单独打包，不打也行。
举个例子。

这是写的一个插件的包的package.json。
这里要写name、version、type(模块)、main(入口文件)、types(ts声明)、files(指定目录)。

然后在node_modules新建文件夹，名字和name一致。把你写的插件整个复制进来，然后再文件夹里建一个package.json，填写以上信息。因为我写的是ts，所以files必须引入的打包后的dist文件。如果你不用ts开发，你的插件在哪个文件就用那个files。

然后就可以用了。

PS: 附整个package.json以供参考

{    "name": "vite-plugin-html-layout",    "author": "sanguogege",    "version": "1.5.1",    "type": "module",    "main": "dist/index.js",    "types": "dist/index.d.ts",    "keywords": [        "layout",        "vite-plugin-html-layout",        "for vite"    ],    "repository": {        "type": "git",        "url": "https://github.com/sanguogege/vite-plugin-html-layout"    },    "license": "MIT",    "description": "a plugin only for vite, about layout html",    "files": [        "src"    ],    "scripts": {        "dev": "vite",        "build": "tsc && vite build",        "preview": "vite preview"    },    "devDependencies": {        "@types/node": "^20.8.3",        "typescript": "^5.0.2",        "vite": "^4.4.5"    },    "dependencies": {        "handlebars": "^4.7.8",        "parse5": "^7.1.2",        "vite-plugin-dts": "^3.6.0"    }}

Answer 4

先发到NPM上去, 参考:

https://www.cnblogs.com/xiaohuizhang/p/15308132.html
https://juejin.cn/post/7088609251924377637

Answer 5

首先，您需要将您的组件发布到 npm 或 yarn，使得它能够被其他人通过这些包管理工具使用。在发布之后，其他项目就可以通过 npm install 或 yarn add 命令来引入并使用您的组件。

下面是如何发布一个 Vue 组件到 npm 的步骤：

1. 首先，确保您已经在项目的根目录下安装了 npm。您可以通过在终端输入 npm -v 来确认这一点。
2. 在项目的根目录下，创建一个新的文件夹来存放您的 Vue 组件。进入该文件夹并创建一个新的 Vue 组件文件。
3. 在项目的根目录下，打开终端并运行 npm init 来创建一个新的 npm 项目。您可以选择默认设置或手动设置。
4. 运行 npm install vue 来添加 Vue 作为您项目的依赖项。
5. 在您的 Vue 组件文件中，将您的代码复制到新建的文件中。确保您的组件导出语句是正确的，例如 export default MyComponent。
6. 在您的项目的根目录下，运行 npm run build 来构建您的组件。这将生成一个 dist 文件夹，其中包含构建后的文件。
7. 回到终端，运行 npm publish 来发布您的组件到 npm。您可能需要输入您的 npm 用户名和密码。
8. 在发布成功后，其他项目就可以通过 npm install your-component-name@version 或 yarn add your-component-name@version 来引入并使用您的组件，其中 your-component-name 是您组件的名称，version 是您发布的版本号。

在发布时，您可以选择发布一个特定版本（例如 1.0.0），或者发布一个带有版本号的主版本（例如 1.0.x）。在发布主版本时，npm 会自动为您生成一个随机的版本号。如果您想在未来的版本中更改您的组件，只需运行 npm version patch 或 npm version minor 或 npm version major，然后再次发布您的组件。