源码阅读笔记一:学习构建一个npm包

244 阅读2分钟

我正在参与掘金会员专属活动-源码共读第一期,点击参与

好记性不如烂笔头

  • 将代码托管在 Github 上需要注意,需要设置仓库的 License , 有License才能发布npm包, 新建仓库时 License k可以选择 MIT
  • 在发布之前你还需要先注册一个 npm 账号,点此注册
  • 在本地终端中登录npm时需要注意:如果你使设置了其他的 npm 源,你需要将其更改为 npm 本身的源。此外发布也需要切换到 npm 默认的源。
  • 设置包名时,为了避免名称相同,我们可以在包名前边加上自己的用户名,如:@codeniu/vue-divider
  • 发包时,npm publush 命令会默认发布为私有包,在发布时添加这样的参数:npm publish --access=public, 让每个人都可以使用这个模块

实践出真知

前置工作

查看当前 npm 源

npm config get registry

更改 npm 源为默认源

npm config set registry http://registry.npmjs.org

或者使用 nrm 管理 npm 源,这样可以快速的切换源, 安装 nrm

npm install nrm -g

查看源列表

切换到 npm 源

nrm use npm

登录 npm 账号,前提是你已经注册好了账号

npm login

执行命令后,你会得到一个让你输入 usernamepassword 和 email 的提示,这里由于我开启两步验证,所以让我输了一个验证码。

image.png

至此,万事俱备,只欠东风,我们已经具备发包的一切必要条件了。

构建项目

具备发包条件之后我们可以开始思考我们将要发什么包, 可以是一个组件, 可以是一个工具类,当然也可以只是简简单单的一句话。

vue-divider 是我之前发布的一个基于vue的分割线组件(查看预览),托管于 Github,使用 webpack 构建,功能很简单,但是涵盖了发布一个可用组件完整流程。

发布

将代码克隆下来后查看 package.json

{
     "name": "@codeniu/vue-divider",
     "version": "1.0.2",
}

其他内容先忽略,name 指定你发布包的名称,version 指定你包的版本,这个尤其重要,在你每次更新你的包时,都需要你去改变版本号。

发布:

npm publish --access=public

更新

用 npm version 命令来升级下包的版本。

npm version命令使用方式如下:

npm version  major | minor | patch | premajor | preminor | prepatch | prerelease
  • major 大版本 1.x.x
  • minor 小版本 x.1.x
  • patch 修复版本 x.x.1

更新完代码之后。

更新版本号:

npm version patch

控制台会输出:

v1.0.3

重新发布:

npm publish

完成,现在你可以去 npm 网站上看看你新发布的东西啦。@codeniu/vue-divider - npm (npmjs.com)