NPM 包的开发指南

NPM, 全称 Node Package Manager,用过 Javascript 做开发的朋友应该都知道这个东西,其实严格上来说,NPM 是随同 NodeJS 一起安装的包管理工具,能解决 NodeJS 代码部署上的很多问题。

无论是前端开发,还是 Node 服务器的搭建,我们都会不可避免地使用到 NPM,通过 NPM 我们可以引用第三方的库/框架到自己的项目中,并且在使用起来特别简洁,只需要一行代码,以常用的库来说:

npm install vue express

以上命令便在当前项目中很快地安装了前端使用的框架 Vue 和服务器使用的框架 Express

不仅如此,通过使用 NPM ,在协同开发的时候,我们不必将任何依赖上传到代码库中,其中一个人引用的依赖,别人在 clone 了目录结构后,只需要运行 npm install 便可以将所有依赖自动下载到本地。

再比如说,NPM 提供了一系列 script 可以快捷运行常用的命令

还有很多很多方便的地方这里就不一一介绍了。

总而言之,Javascript 的开发越来越离不开 NPM

那你有没有在使用别人的包或框架时,有没有相关发布一个自己的包,让全网的人去使用呢?

我相信肯定是有的,下面我们就来看看怎样在 NPM 上发布属于自己的包,并且还会谈一谈相关的项目结构,工程自动化以及简单的优化、打包等内容

发布包之前的准备工作,以及发布一个最简单的包

  1. 首先需要去官网注册一个 NPM 的账号 npmjs.com

    整体上的注册流程十分简单,主要是提供一个邮箱账号,并且验证通过

  2. 安装 NodeJS 环境(此处略过100字)

  3. 在本地登录并配置 NPM 账号(让 NPM 知道上传的包是属于谁的)

    配置很简单,命令输入 npm adduser 然后根据提示输入之前的注册信息便可。(如果不是第一次发布将命令行换成 npm login)

最基本的准备工作就完成啦,紧接着就是发布了,从最简单的来说,发包流程大致如下

  1. 首先需要准备想要发布的代码(简单起见,这里的代码没有任何依赖)
  2. 新建一个文件夹,在文件夹内运行命令 npm init,这里会命令行会问你包的一些基础信息,比如包名什么的
  3. 将你的代码复制到这个文件夹内,比如 demo.js
  4. 这时你会看到文件夹内有两个文件 => demo.js, package.json(刚刚你填的基础信息会放在这里,后面会详细讲讲里面的具体属性和具体作用)
  5. 打开 package.json 修改 main 属性值为 demo.js (指定你这个包的入口文件)
  6. 好了,再次打开命令行运行 npm publish --access public 便成功地部署到了 NPM 官方服务器上(--access public 是发布一个公有包的意思,emmmm,私有的包是要给钱的)

通过上面六个步骤,我们便发布了一个最简单的包到服务器上,这时候在任意一个项目里运行 npm install [你的包名] 便可以使用了

package.json 里常用的属性

从前面的发布流程我们不难看出,package.json 这个文件便是 NPM 的核心文件,没有之一。

想必即便是没有发布包的人,也常用到它,因为它可以管理当前项目的依赖,并且可以通过 script 自定义一些快捷命令,十分简单便捷。

那作为想要发布一个包的开发者而言,我们有必要详细聊聊里面常用的属性

  • nameversion
    • 这两个属性如果是在通常的项目里,随便乱填好像也没啥毛病,但对于一个包的作者而言是十分重要的
    • name 表示你这个包的唯一的名字(不能和其它已发布的包冲突),如果别人使用你的包就得通过这个名字来引入
    • version 很简单就是你这个包的版本,每次发布一个新的版本必须是一个递增的版本号(别人使用你的包也可以通过带版本号的标示来安装指定版本)
  • main, module
    • 这两个属性通常作为包的入口来使用,通过定义这两个属性告诉 NPM 你的入口位置,如设置为 "main": "index.js",那么在引用这个包的时候,引用包名会自动映射到你的入口文件。
    • mainmodule 的区别:一般来说,如果指定了 module 属性即告诉 NPM 我这个包支持模块化,这里的模块化是指 ES Module,而 module 指定的入口便是模块化的入口,当指定了 module 入口,很多打包工具便会自动识别出来,在打包的时候通过 tree-shaking(摇树优化)就可以按需打包,只打包引用到的内容,后面会详细讲讲 Javascript 中的模块化
  • dependencies, devDependencies
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值