乐趣区

关于前端:跟我学发布自己的第一个npm包

jiezi

作者：iplaycodex
仓库：github、codePen
博客：掘金、segmentfault、知乎、简书、博客园
公众号：FEZONE(大写)
分割我：iplaycodex@163.com
特地申明：原创不易，未经受权不得对此文章进行转载或剽窃，否则按侵权解决，如需转载或开明公众号白名单可分割我，尊重原创尊重知识产权从我做起

1. 前言

npm 是什么这里不用再多说, 我置信当初做前端的没有不晓得的. 这里就不在赘述了.
咱们平时开发中必定是有很多可复用的类库或者组件的, 那么把他们抽离进去复用就很有必要了, 能够大大减少咱们的工作量. 上面简略介绍一下如何把一个包公布到 npm 上

2. 工具

首先咱们装置一下好用的工具

  • nvm

    • 治理 node 的版本的一个工具, 如何装置和应用自行搜寻

  • nrm

    • 能够不便的切换 npm 源的一个工具. 因为在国内 npm 的官网源常常网络连接不稳当, 应用 cnpm 又会呈现一个莫名其妙的 bug. 故这里强力倡议应用该工具来治理 npm 的源. 且这个工具能够配置自定义源地址, 不便咱们搭建本人的公有 npm

上述两个工具的应用这里不再赘述, 本人搜搜

3. 初始化一个 npm 包

3.1. 创立一个示例包

// step 1
cd yourDic
// step 2
mkdir myFirstNpmPackage
// step 3
cd myFristNpmPackage
// step 4
npm init

3.2. npm init

{
    "name": "myFristNpmPackage",
    "version": "1.0.0",
    "description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"keywords": [],"author":"",
    "license": "ISC"
}

入口文件是index.js, 接下来咱们再新建一个index.js

3.3. create index.js

export default printHelloWorld = () => {console.log("hello world!");
};

RT

4. 注册 npm 账号

注册一个 npm 账号, 不再赘述

5. 公布

下面那个最简略的我的项目, 咱们打算公布到 npm 上, 进入我的项目目录:

5.1. 确认是否官网源

下面曾经装置了 nrm, 个别咱们在开发的时候会切到taobao 源或者是本人搭建的公有源. 然而公布的时候须要切换到官网源.

// step 1: change to npm
nrm use npm

// step 2: 登录, 输出账号密码即可
npm loing

// step 3: 查看包名是否被占用, 如果没有被占用即可公布, 如果被占用了则须要更换新的包名
npm search myFristNpmPackage

// step 4: 公布
npm publish

6. 实现公布

这样就实现了一个包的公布, 其实也是很简略的

7. 如何应用

当你实现了包的公布后, 前面就是如何应用这个包了, 当然也很简略:

// install myFristNpmPackage
npm i myFristNpmPackage --save

这样就一个简略的 npm 包就公布结束了, 还是很简略的~

8. 结束语

❤️ 关注 + 点赞 + 珍藏 + 评论 + 转发 ❤️
原创不易，激励笔者创作更好的文章~

退出移动版