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
上发布属于自己的包,并且还会谈一谈相关的项目结构,工程自动化以及简单的优化、打包等内容
发布包之前的准备工作,以及发布一个最简单的包
-
首先需要去官网注册一个 NPM 的账号 npmjs.com
整体上的注册流程十分简单,主要是提供一个邮箱账号,并且验证通过
-
安装
NodeJS
环境(此处略过100字) -
在本地登录并配置 NPM 账号(让 NPM 知道上传的包是属于谁的)
配置很简单,命令输入
npm adduser
然后根据提示输入之前的注册信息便可。(如果不是第一次发布将命令行换成npm login
)
最基本的准备工作就完成啦,紧接着就是发布了,从最简单的来说,发包流程大致如下
- 首先需要准备想要发布的代码(简单起见,这里的代码没有任何依赖)
- 新建一个文件夹,在文件夹内运行命令
npm init
,这里会命令行会问你包的一些基础信息,比如包名什么的 - 将你的代码复制到这个文件夹内,比如
demo.js
- 这时你会看到文件夹内有两个文件 =>
demo.js
,package.json
(刚刚你填的基础信息会放在这里,后面会详细讲讲里面的具体属性和具体作用) - 打开
package.json
修改main
属性值为demo.js
(指定你这个包的入口文件) - 好了,再次打开命令行运行
npm publish --access public
便成功地部署到了 NPM 官方服务器上(--access public
是发布一个公有包的意思,emmmm,私有的包是要给钱的)
通过上面六个步骤,我们便发布了一个最简单的包到服务器上,这时候在任意一个项目里运行
npm install [你的包名]
便可以使用了
package.json
里常用的属性
从前面的发布流程我们不难看出,package.json
这个文件便是 NPM
的核心文件,没有之一。
想必即便是没有发布包的人,也常用到它,因为它可以管理当前项目的依赖,并且可以通过 script
自定义一些快捷命令,十分简单便捷。
那作为想要发布一个包的开发者而言,我们有必要详细聊聊里面常用的属性
name
和version
- 这两个属性如果是在通常的项目里,随便乱填好像也没啥毛病,但对于一个包的作者而言是十分重要的
name
表示你这个包的唯一的名字(不能和其它已发布的包冲突),如果别人使用你的包就得通过这个名字来引入version
很简单就是你这个包的版本,每次发布一个新的版本必须是一个递增的版本号(别人使用你的包也可以通过带版本号的标示来安装指定版本)
main
,module
- 这两个属性通常作为包的入口来使用,通过定义这两个属性告诉
NPM
你的入口位置,如设置为"main": "index.js"
,那么在引用这个包的时候,引用包名会自动映射到你的入口文件。 main
和module
的区别:一般来说,如果指定了module
属性即告诉NPM
我这个包支持模块化,这里的模块化是指ES Module
,而module
指定的入口便是模块化的入口,当指定了module
入口,很多打包工具便会自动识别出来,在打包的时候通过tree-shaking
(摇树优化)就可以按需打包,只打包引用到的内容,后面会详细讲讲 Javascript 中的模块化
- 这两个属性通常作为包的入口来使用,通过定义这两个属性告诉
dependencies
,devDependencies