介绍
组件库在当下十分风行。
然而应用组件库和公布组件库就是两回事了
明天我会具体的介绍如何在 npm
公布本人的组件库,并在我的项目中应用
创立组件库,咱们明天借助 vue-sfc-rollup
这个 npm 包工具,
这是一个对于咱们创立组件十分有用的工具
该软件包为我的项目创立了一组文件。如其文档
) 所述,其创立的文件包含以下内容(SFC 代表“单个文件组件”)
- 压缩 rollupjs 配置
- 带有 build / dev 脚本和依赖项的相应 package.json 文件
- 最小的 babel.config.js 和.browserslistrc 文件用于转译
- 打包 SFC 时汇总应用的包装器
- 样本 SFC 以启动开发
- 一个示例应用文件,可用于在开发过程中加载 / 测试您的组件 / 库
开始
首先全局装置vue-sfc-rollup
:
npm install -g vue-sfc-rollup
全局装置后,从命令行进入要在其中搁置库我的项目的目录。进入该文件夹后,运行以下命令来初始化我的项目。
sfc-init
在提醒中抉择以下选项:
✔ Is this a single component or a library? › Single Component
✔ What is the npm name of your component? (你的 npm 包名字)test-vue-component
✔ What is the kebab-case tag name for your component? … test-vue-component
✔ Will this component be written in JavaScript or TypeScript? › JavaScript
✔ Enter a location to save the component files: … ./test-vue-component
配置实现后,进入对应文件夹进行依赖下载
cd ./test-vue-component
npm install
实现后,您能够在抉择的编辑器中关上该文件夹。
如上所述,为咱们构建了一个示例 Vue 组件。您能够在 /src/lib-components
文件夹中找到它。要查看此组件的外观,能够运行 npm run serve
并导航到 http:// localhost:8080 /
公布自带示例包进行测试
npm build
如文档所述:
运行在 3 个编译后的文件生成脚本后果
dist
目录,每个的main
,module
和unpkg
性能在你的 package.json 文件中列出。生成这些文件后,就能够开始了!
运行此命令后,咱们筹备公布到 NPM。在执行此操作之前,请确保您已在 NPM 上领有一个帐户(如果须要,能够在此处进行操作)。
接下来,咱们须要通过运行以下命令将您的帐户增加到您的终端:
npm adduser
理解 package.json
当公布到 npm 时,咱们应用 package.json 文件来管制公布哪些文件。如果您查看 package.json
最后设置我的项目时创立的文件,则会看到相似以下内容的内容:
"main": "dist/test-vue-component.ssr.js",
"browser": "dist/test-vue-component.esm.js",
"module": "dist/test-vue-component.esm.js",
"unpkg": "dist/test-vue-component.js",
"files": [
"dist/*",
"src/**/*.vue"
],
上面的局部 files
通知 npm 公布 dist
文件夹中的所有内容以及文件夹中的所有 .vue
文件src
。您能够依据须要进行更新,然而咱们将保留本教程的内容。
因为咱们没有应用 package.json 文件进行任何更改,所以咱们筹备公布了。为此,咱们只须要运行以下命令:
npm publish
就是这样!祝贺你!您当初曾经公布了 Vue 组件库。您能够转到 npmjs.com 并在注册表中找到它
在 vue 我的项目中应用
npm instal test-vue-component
import testVueComponent from 'test-vue-component'
components:{testVueComponent}
在 codesandbox 查看
这样咱们就公布了测试组件以及引入了测试组件
你学废了吗?