NPM

598 阅读1分钟

npm

1. 临时使用

npm install xxx 时加入 --registry URL即可,不会影响到本地配置,如:

npm --registry https://registry.npm.taobao.org install jquery

2. 永久更改

我们需要修改本地的 npm 配置

npm config set registry https://registry.npm.taobao.org

3. 查看当前的 npm 源地址

npm config get registry

4. 恢复官方的源

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

5. npm 搜索

使用 npm 搜索想要安装的包,命令如下:

npm search <packageName>

示例: 搜索 jquery

~/Desktop/ServerWorkSpace/ls-demo ⌚ 11:02:39
$ npm search jquery
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS                         
jquery                    | JavaScript library…  | =dmethvin…      | 2019-05-01 | 3.4.1    | jquery javascript browser library
cheerio                   | Tiny, fast, and…     | =davidchambers… | 2019-04-06 | 1.0.0-r… | htmlparser jquery selector scraper parser html
jquery-migrate            | Migrate older…       | =dmethvin…      | 2019-06-08 | 3.1.0    | jquery javascript browser plugin migrate
jquery-mask-plugin        | A jQuery Plugin to…  | =igorescobar    | 2019-07-31 | 1.14.16  | mask masks form input jquery-plugin
ua-parser-js              | Lightweight…         | =faisalman      | 2019-06-08 | 0.7.20   | user-agent parser browser engine os device cpu jquery-plugin ecosystem:jquery
cropper                   | A simple jQuery…     | =chenfengyuan   | 2018-04-01 | 4.0.0    | image crop move zoom rotate scale cropper cropper.js cropping processing jquery plugin jquery-plugin html css javascrip
jquery-validation         | Client-side form…    | =staabm         | 2019-06-15 | 1.19.1   | jquery jquery-plugin forms validation validate
conventional-changelog-jq | conventional-change… | =hutson =bcoe…  | 2018-11-01 | 3.0.4    | conventional-changelog jquery preset
uery                      |                      |                 |            |          |                                     
imask                     | vanilla javascript…  | =unmanner       | 2019-08-14 | 5.2.0    | javascript jquery input mask
iframe-resizer            | Keep same and cross… | =davidjbradshaw | 2019-04-10 | 4.1.1    | CrossDomain Cross-Domain iFrame Resizing Resizer postMessage autoheight auto-height iframe-auto-height height-iframe he
blueimp-file-upload       | File Upload widget…  | =blueimp        | 2019-08-03 | 10.1.0   | jquery file upload widget multiple selection drag drop progress preview cross-domain cross-site chunk resume gae go pyt
jquery-param              | equivalent function… | =knowledgecode  | 2019-08-22 | 1.0.2    | jquery param equivalent jquery.param serialize post
papaparse                 | Fast and powerful…   | =mholt =pokoli  | 2019-08-12 | 5.0.2    | csv parser parse parsing delimited text data auto-detect comma tab pipe file filereader stream worker workers thread th
vanilla-lazyload          | A fast, lightweight… | =verlok         | 2019-04-26 | 12.0.0   | lazyload vanilla responsive images picture srcset SEO intersectionObserver sizes progressive performance perfmatters as
jquery-csv                | A jQuery CSV parser… | =evanplaice     | 2019-07-16 | 1.0.5    | 
jquery.fancytree          | JavaScript tree…     | =mar10          | 2019-05-31 | 2.31.0   | ajax ecosystem:jquery jquery-plugin lazy table tabletree tree treegrid
jsrender                  | Best-of-breed…       | =borismoore…    | 2019-08-03 | 1.0.4    | jsrender node express hapi browserify templates template jquery-plugin ecosystem:jquery
fullcalendar              | Full-sized drag &…   | =arshaw         | 2019-08-10 | 3.10.1   | calendar event full-sized jquery-plugin
jquery-jeditable          | Edit in place…       | =nicolascarpi   | 2019-08-27 | 2.0.13   | jquery edit in place jeditable plugin
jquery.facedetection      | A jQuery plugin to…  | =jaysalvat      | 2017-11-04 | 2.0.3    | jquery face detection image picture video canvas jquery-plugin

从以下几个方面返回搜索结果

  • Popularity:流行度,下载次数
  • Quality:质量,稳定性、测试、依赖等
  • Maintenance:维护等级,更新频率等
  • Optimal:以上三点的综合

6. npm 安装、更新、删除、查看

  • 安装: npm install <packageName>
  • 更新: npm update [packageName]
  • 删除: npm uninstall <packageName>
  • 查看: npm ls <packageName>

安装分为本地安装和全局安装

  1. 本地安装

    安装在当前项目目录(node_modules)下,根据模块访问规则,当前项目以及子项目可访问。一般用于安装项目独立使用的包。

    npm i <包>
    
  2. 全局包

    安装在 npm 指定的全局目录下,通过全局模块访问机制可以在全局范围内访问。一般用于安装工具性质的包。

    npm i -g <包>
    

7. 发布自己的包

发布自己的模块包

  • package.json 文件
  • 项目(模块、包)说明配置文件,该文件描述了当前包的信息,只有拥有 package.json 文件的项目才可以被发布

手动创建

npm init / npm init --yes

添加 --yes 会快速创建一个以当前文件夹命名的项目, 如:

~/Desktop/ServerWorkSpace/ls-demo ⌚ 10:33:17
$ npm init --yes
Wrote to /Users/xxzx/Desktop/ServerWorkSpace/ls-demo/package.json:

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

package.json 文件说明

  • name:包名称,必填
  • version:版本,必填,格式 x.x.x
  • main : 包的入口主文件
  • scripts:自定义脚本,通过 npm run 脚本名称即可执行脚本定义的命令
  • dependencies:生产环境下需要使用的依赖包
  • devDependencies:只做开发环境(测试环境)下使用的依赖包

注册 npmjs.org 账号

  • 登录: npm adduser / npm login
  • 发布: npm publish

但我们在一个拥有 package.json 文件的目录下执行 npm install (不带包名),npm 会自动根据 package.json 文件中指定的依赖进行搜索、下载和升级

注意: 如果单独的 package.json 并不会安装 devDependencies下的包