本地封装组件后打包到团队gitlab仓库，并使用npm包能正常安装

本文章是记录如何将封装好的组件打包成公共组件

发表于 2025/04/11

作者 ailanz

8 分钟阅读

Svelte组件打包至GitLab

创建或使用现有的GitLab私有仓库（需确认自己有此仓库的使用权），记住仓库的ID以及创建一个个人的身份token
- 仓库ID查看方式
- 创建个人身份token步骤 - 点击左上角的头像，选择Edit profile（编辑个人信息）
  - 进入后点击Access tokens(访问令牌)
  - 选择Add new token（添加新令牌）
  - 进行信息填写
    - name,description随意填写即可
    - Expiration date最长期限是365天，token可以任意的创建，所以期限也是随意选择即可
    - Select scopes选择read_api，read_repository，write_repository
  - 点击创建token后要及时将此token保存，后面是看不到
创建一个专门用于打包svelte项目，步骤如下
- 运行指令npx sv create 项目名
- 选择选项三“Svelte library”，这是专门用于打包的，会帮助完成svelte打包的大部分配置，以及下载svelte打包工具
- 后续选项根据需要选择即可

完成上传至GitLab的相关配置

编辑.npmrc文件，添加下面这行代码
- ` ///api/v4/projects//packages/npm/:_authToken="${NPM_TOKEN}""`
  - <domain_name>是仓库的域名，如git.w2w.me:6443
  - <project_id>是上面要求记住的仓库ID
  - "${NPM_TOKEN}"是上面要求创建的token
编辑pacakge.json文件
修改name和version,添加"publishConfig
1 2 3 4 5 "name": "@test-package/filetree",//包名 "version": "0.0.1",//版本号 "publishConfig": { "registry": "http(s)://<domain_name>/api/v4/projects/<project_id>/packages/npm/" },
- name命名规范
  - 只能包含 小写字母（a-z）、数字（0-9）、点（.）、连字符（-）和下划线（_）
  - 不能以 . 或 _ 开头
  - 不能以 - 结尾
  - 不能使用 NPM 官方保留的关键词（如 node_modules、favicon.ico 等）
  - 长度必须在 214 个字符以内
  - 作用域包 需要以 @scope/ 开头（如 @test-package/filetree）
- 建议使用作用域包，更适合公司/团队内部使用，如@cst2023/date表示cst2023团队的日期组件包，作用域可以选取组群名，如cst2023
- publishConfig用于指定私用仓库的地址，如http://172.22.72.224/api/v4/projects/2/packages/npm/

package.json文件部分内容解释

  
"files": [
		"dist",
		"!dist/**/*.test.*",
		"!dist/**/*.spec.*"
	],

只有 dist 目录会被包含到 npm 发布包 中。
!dist/**/*.test.* 和 !dist/**/*.spec.* 过滤掉 .test.js 和 .spec.js 这样的测试文件。
也可以自由想里面增加你想要的内容，比如README.md使用文档

  
{
  "svelte": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js"
    }
  }
}

svelte: 指定 Svelte 组件的入口文件（./dist/index.js）。
types: 提供 TypeScript 类型定义文件（./dist/index.d.ts）。
type: 指定为 module，表示使用 ES 模块 (import/export) 语法。

  
{
  "devDependencies": {
    "@sveltejs/package": "^2.0.0",
  }
}

@sveltejs/package：用于 打包 Svelte 组件。

编写svelte组件
- 因为使用了Svelte官方的打包工具@sveltejs/package,所以它默认只会打包 src/lib 目录，并生成 dist/ 目录。
- 在src/lib目录中编写svelte组件
- 在src/lib目录下的index.js文件中导出写好的svelte组件，示例如下
  1 2 import FileTree from "./FileTree.svelte" export default FileTree
  - 因为在package.json文件中配置好了入口文件为index.js，意味着当其他地方在使用此组件时，实际上是通过index.js这里获取到的
打包
- 运行指令npm run build
- 可以看到在文件目录上生成了一个dist文件夹，这个文件夹就是打包后的结果
- 这里的dist/ 目录里生成的文件和 src/lib/ 里的文件基本相同，没有经过编译/压缩/混淆，这是因为 svelte-package 的默认行为是 保留 Svelte 组件的源码，而不是编译成纯 JavaScript。
- 关于svelte打包默认不编译我的理解：svelte是一个编译型框架，当项目在构建时会通过svelte编译器将svelte代码转为更高效的JavaScript代码，如果在打包时直接进行编译，那么在真正使用此组件时就无法使用到svelte编译器的优化功能，并且可能会有一些版本不兼容的问题，所以Svelte 官方推荐让组件的使用方来进行最终的编译
发布到GitLab
- 运行指令npm publish
- 看到这样的结果代表着成功
- 也可在对应仓库的deploy中的Package registry中查看

下载并使用打包的组件

编辑.npmrc文件，添加下面这两行代码
1 2 registry=http(s)://<domain_name>/api/v4/projects/<project_id>/packages/npm/ //<domain_name>/api/v4/projects/<project_id>/packages/npm/:_authToken="${NPM_TOKEN}""
- registry表示用于指定私用仓库的地址
- <domain_name>是仓库的域名，如git.w2w.me:6443
- <project_id>是上面要求记住的仓库ID
- "${NPM_TOKEN}"是在仓库个人信息出创建的访问token
- 完整示例
  1
运行指令npm install 包名即可正确下载包
可以在node_modules文件夹和package.json文件中可以看到成功下载了
在需要使用到的地方import即可正常使用了

在另一个仓库中使用打包的组件

将.npmrc加入到.gitignore文件中，作用是每一个仓库成员在各自的.npmrc文件中使用各自的身份token
编辑.npmrc文件，添加下面这两行代码
1 2 registry=http(s)://<domain_name>/api/v4/projects/<project_id>/packages/npm/ //<domain_name>/api/v4/projects/<project_id>/packages/npm/:_authToken="${NPM_TOKEN}""
- registry表示用于指定私用仓库的地址
- <domain_name>是仓库的域名，如git.w2w.me:6443
- <project_id>是上面要求记住的仓库ID
- "${NPM_TOKEN}"是在仓库个人信息出创建的访问token
如果是在仓库中第一次引用某个组件，那么运行npm install 包名进行下载；如果已经有人引用了某个组件，在package.json文件中已经有记录了，那么其他人只需要运行npm i就会自动下载到本地
在需要使用到的地方import即可正常使用了

更新包，发布新的包

步骤与发布包相同，唯一要注意到是要更改package.json中的version

更新使用新的包

在package.json中找到更新的包，手动将版本号改为最新的版本
接着运行npm i就会将这个包更新到最新

blog, svelte

blog svelte

本文由作者按照 CC BY 4.0 进行授权

Svelte组件打包至GitLab

下载并使用打包的组件

在另一个仓库中使用打包的组件

更新包，发布新的包

更新使用新的包

热门标签