手记

【金秋打卡】第6天-玩转组件库搭建全流程

第一模块

​ 课程名称:玩转组件库搭建全流程

​ 章节名称:

  • 5-1 发布到npm

​ 讲师姓名:郭小新

第二模块

​ 课程内容(概述)

  1. npm是什么?npm是一个第三方包管理工具,用于管理第三方模块
  2. 介绍发布到npm所需的必要文件package.json、README.md
  3. 在README.md编写组件使用说明

第三模块

rollup打包组件库(四) - 发布组件到npm

基于上一篇文章,这次我们来发布一个Vue组件到npm。

在项目目录下新建lib目录,用于存放编译后的文件

mkdir lib

在packages目录下初始化package.json文件,并新建README.md文件

npm init

执行打包命令

rollup -c ./packages/rollup.config.js

登录npm账号

切换到lib目录,打开命令行窗口,输入

npm login

随后需要依次输入用户名、密码(密码是隐藏的,输完直接回车即可)和邮箱。输入完成,回车即可登录npm账号

发布组件

现在我们可以将组件发布到npm服务器上了。执行命令

npm publish

稍等一会,组件就会被上传到npm服务器上了

问题

执行报错 403 Forbidden - PUT https://registry.npm.taobao.org/

这是因为使用了淘宝的镜像服务器,切换源即可。

# 查看当前镜像源
npm config get registry
# 切换镜像源
npm config set registry http://registry.npmjs.org/
项目结构
|-lib				 // 存放编译后的文件
|-packages
|---components		 // 用于编写存放组件
|-----ext-button
|-------index.js
|-------main.vue
|---common			 // 存放样式文件	
|---package.json
|---README.md
|---index.js		 
|---rollup.config.js // 打包配置脚本

第四模块

学习截图

0人推荐
随时随地看视频
慕课网APP