发布npm包

微信扫一扫,分享到朋友圈

发布npm包

创建index.js

创建index.js作为你所有组件的出口文件,具体就是将组件导入再导出

例如有一个Button组件需要导出

import Button from './src/Button.vue'
export {Button}
复制代码

上面代码还可以简写为

export {default as Button} from './src/Button.vue'
复制代码

由于nodejs不支持import我们还需要使用打包工具将index.js打包一下,当然你也可以直接使用nodejs的require语法。

使用parcel打包

安装parcel

yarn global add parcel
复制代码

使用parcel单独为index.js进行打包

parcel build index.js --no-minify --no-cache
复制代码

--no-minify 不对代码进行压缩。

--no-cahce 清除缓存

配置package.json

需要对以下几个属性进行修改

  1. name 发布到npm之后对应的包名称
  2. version 目前发布包的版本号
  3. main 入口文件的路径
  4. files 包文件
  5. description 描述

package.json示例

{
"name": "xxx-ui",
"version": "0.0.1",
"main": "dist/index.js",
"files": ["dist/*"],
"description": "vue UI框架",
}
复制代码

注册npm账号

进入 npmjs 官网注册账号,已经注册过的可以跳过。小本本己住用户名和密码以后要考的

登入npm账号

需要在命令行中登入npm账号

登入

npm login
复制代码

将你之前小本本记下来的账号输入即可

也可注销

npm logout
复制代码

切换npm源

在发布之前需要将切换一下npm源。因为你是要将包发布到npm而不是淘宝源或其他。

快速切换源

这里推荐一个工具方便你们快速切换源

全局安装

yarn global add nrm
复制代码

查看

nrm ls
复制代码

你可以看到目前使用的源地址,以及可选的地址列表

切换源

nrm use npm
复制代码

发布

一切准备就绪,使用以下命令发布即可

npm publish
复制代码

注意每一次发布版本都需要更改package.json中的版本号,每次发布的版本号不能重复.一般在自己下载测试可用之后再发布一个 "version": "0.1.0" 的可用版本

微信扫一扫,分享到朋友圈

发布npm包

企业智慧屏来了,它跟王者品牌MAXHUB智能会议平板比较怎么样?

上一篇

使用 Sealos + Longhorn 部署 KubeSphere v3.0.0

下一篇

你也可能喜欢

发布npm包

长按储存图像,分享给朋友