[指南] 用 Vue-SFC-Rollup 在 NPM 发布你的第一个 Vue 套件

章节连结

为了让许多不同的 Vue 专案,可以共用某个 Vue 套件,发布到 npm 后再行下载变成一种可能的方式。这篇笔记下“开发阶段”、“发布前打包测试”和“发布阶段”的一些细项。
vue typescript


开发阶段

1. vue-sfc-rollup

运用 vue-sfc-rollup 套件,比起 webpack 或是 vue-cli 可以产生更为轻巧的档案大小,且支援 tree-shaking。同时,你也可以借由安装多种套件来加上你想要的功能。如果你用过 gulp 之类的前端工具,那可以减低一些上手难度。

A. 在 src 内的 lib-components,里面的 index.ts 是用来导出 vue component 给 entry.tsm 接的,如果你有要新增不同的 component ,那如法炮制在这边宣告

B. 根据 roller.config.js 和 tsconfig.ts 的默认设定,*.ts 档案仅用来整合既有的 *.vue ,并产生编译后的 .js 档。因此,你不能够新增额外的 .ts 。
C. *.d.ts 档的统一进入点要在 package.json 内宣告,你可以新增自己的 *.d.ts 档。为确保相对路径正确,建议一律引入到 package.json 所宣告的 d.ts 后,再 export 出去

D. package.json 中的 files,是用来宣告你的套件有哪些档案要被放入。若你有自定义的 .d.ts,别忘记把它们的路径加入

2. 搭配 ES-Lint 使用

package.json 和 .eslintrc 两个档案要互相配合,以下是一个可以正常运行的范例:


发布前打包测试

可以先行使用 npm pack,得到打包后的档案,并在另一个专案中进行测试。若你输出的档案路径在 C:/Users/user/Desktop,那么你的安装路径就是:npm i /c/users/user/desktop/<demo File>


发布阶段

1. 注册 npm 帐号

请上 npm 官网即可,可以视情况开启 2FA

2. 编辑 package.json

跟记录安装套件相依性的是同一个 json,这边笔记下有关的部分:

3. 发布并撰写 Readme.md

可以观看此篇:A template to make good README.md


Q & A

1. 关于 Vue 档中的 scope scss,无法正常编译?

你需要在 postVue 阶段呼叫转译的套件,节录如下:

2. d.ts 档案的作用?

顾名思义,就是产生编写 .ts 所需的定义档,里头不能进行如同一般 .ts 档的宣告变量并赋值。另外,若有同名的 .ts 和 .d.ts 位于同一层资料夹,则会优先读取 .ts 。

3. 如何调整 css 编译后的输出路径?

如上,新增一个 output 参数,撰写相对路径即可


Github / NPM

Github:Vue-tw-zip-code-selector
NPM:Vue-tw-zip-code-selector


相关连结

1. vue-sfc-rollup
2. Writing npm modules in TypeScript
3. 发布 npm 套件 – 从手动到自动(2):手动 publish 篇
4. 我的第一个 npm 套件:把 vue component 打包到 npm 吧
5. PostCSS Readme
6. Creating a Vue module with Rollup and Typescript

按赞加入粉丝团

延伸阅读