附件下载:发布和使用自己的NPM包.zip
NPM(node package manager) 是NodeJs官方提供的包管理工具,让开发者可以方便地下载、安装、升级、删除依赖包。因为NPM默认的镜像源(https://registry.npmjs.org) 在国外,下载会比较慢,一般会使用淘宝镜像,有两种使用方式:直接修改npm镜像源、下载cnpm。推荐下载使用cnpm,保留npm默认源。通过命令npm install -g cnpm --registry=https://registry.npm.taobao.org
安装cnpm。大部分前端开发者应该都用过npm install
命令下载依赖包,而发布命令npm publish
用的比较少,接下来将通过一个实例来详细介绍如何发布npm包。
创建一个npm项目
- 创建一个新的文件夹并进入,本例文件夹名【yo-coder】,执行
npm init
命令初始化项目,执行命令后有一些信息要填,直接忽略,一路回车即可(后面可以修改),最后会在文件夹下生成一个package.json文件
{
"name": "yo-coder", // 项目名称,在npm仓库中唯一
"version": "1.0.0", // 版本号
"description": "", // 描述
"main": "index.js", // 使用import yo from \'yo-coder\'导入时,yo指向的文件
"scripts": { // 自定义命令\r\n \"test\": \"echo 这是一个测试命令\"
},
"author": "朽木", // 作者
"license": "MIT" // 一种开源协议,作者只保留版权,其他的可以为所欲为
}
- 写一点代码
为了演示方便,这里就简单的创建了一个index.js文件,导出两个方法
exports.yo = function() {
alert('Yo Coder!')
}
exports.hello = function() {
alert('Hello Coder!')
}
发布到npm
到 https://www.npmjs.com/signup 注册npm账号,如果有账号了请忽略
执行命令
npm adduser
,根据提示完成登录,登录后会在~/.npmrc文件里保存身份令牌,可以把这个文件拷贝到项目里,其他人直接指定这个配置文件进行发布,不用登录执行命令
npm publish
发布-
在npm网站上查看发布的包信息 https://www.npmjs.com/package/yo-coder
-
在淘宝NPM镜像网站上查看发布的包信息 https://npm.taobao.org/package/yo-coder
cnpm不会实时更新,目前的同步频率为10分钟同步一次,可以手动点击SYNC触发同步
下载使用npm模块,以vue为例
如果你已经很熟悉vue或react这些项目,忽略以下内容吧
- 执行
npm install -g vue-cli
命令安装vue脚手架,使用vue -V
命令验证是否安装成功 - 执行
vue init webpack yo-coder-test
初始化vue项目,这里项目名为【yo-coder-test】,一路回车后,会自动开始下载依赖包,因为默认是从npm源下载依赖包,会比较慢,按ctrl c
取消下载,进入目录,手动使用cnpm install
命令下载依赖包 - 执行
npm run dev
命令启动vue项目,浏览器打开localhost:8080查看vue的欢迎界面 - 执行
npm install --save yo-coder
命令,执行成功后会在package.json里记录依赖的包,方便下次直接执行npm install命令下载依赖包。install命令中的--save是运行时依赖,记录在在dependencies下,比如antd、element-ui等;--save-dev是开发时依赖,记录在devDependencies下,比如webpack、eslint等 -
使用yo-coder模块,直接在App.vue里测试,效果就是一个简单的alert