npm.devtool.tech
👏 You can access 10.npm package with using 10Npm variable in browser devtools!
包管理工具 初始

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

初始化包

package.json

npm init -y   #默认直接生成

下载包

全局安装 在任意命令行下使用

npm i http-server -g

可以在命令行中使用

/Users/chen/.nvm/versions/node/v14.12.0/bin/http-server -> /Users/chen/.nvm/versions/node/v14.12.0/lib/node_modules/http-server/bin/http-server /Users/chen/.nvm/versions/node/v14.12.0/bin/hs -> /Users/chen/.nvm/versions/node/v14.12.0/lib/node_modules/http-server/bin/http-server

1.当前的/Users/chen/.nvm/versions/node/v14.12.0/bin全局目录下多了一个http-server的文件,然后指向了下载后的node_modules文件夹下对应目标的bin目录的文件,这样子就可以在命令行中去使用http-server 2.缩写-》真正的下载目录 3.总结:前者只是一个快捷键,后者是对应的真正下载目录

  • 写一个全局包

1.建立一个bin目录,里头建立一个www文件 2.告诉系统使用符号#!,使用什么目录呢?使用“当前有病的环境”:/usr/bin/env,什么环境呢?node 3.所以写了-》 #! /usr/bin/env node 4.在package.json里头配置"bin": { "work.cjl": "./bin/www"},使得有办法在命令行写下worck.cjl,回车后,然后就可以指向bin/www这个文件 5.进入了www文件以后,这个文件又会告诉你使用当前有病的环境来执行,什么环境呢?就是node环境,这句话的代码:#! /usr/bin/env node 6.但是目前直接输入work.cjl还是无法生效的。因为最终想要的效果是在/Users/chen/.nvm/versions/node/v14.12.0/bin中拥有/work.cjl这个目录,然后能够产生链接指向/Users/chen/.nvm/versions/node/v14.12.0/lib/node_modules中,方法一是将这个包放线上,但很慢这样子,不太可能开发一点下载一点 7.方法二:使用npm link命令,把当前package.json中"bin"下的命令"bin": { "work.cjl": "./bin/www" },链接到/Users/chen/.nvm/versions/node/v14.12.0/bin中成为/Users/chen/.nvm/versions/node/v14.12.0/bin/work.cjl快捷键,并且指向的是当前我们这个10.npm的目录中来。 8.在当前目录10.npm敲下npm link后

/Users/chen/.nvm/versions/node/v14.12.0/bin/work.cjl -> /Users/chen/.nvm/versions/node/v14.12.0/lib/node_modules/10.npm/bin/www
/Users/chen/.nvm/versions/node/v14.12.0/lib/node_modules/10.npm -> /Users/chen/Documents/Code/zhufeng-code/10.npm

我们发现确实在/Users/chen/.nvm/versions/node/v14.12.0/bin多了一个work.cjl,然后指向了一个链接/Users/chen/.nvm/versions/node/v14.12.0/lib/node_modules/10.npm/bin/www,然后这个链接又指向了当前这个目录/Users/chen/Documents/Code/zhufeng-code/10.npm 9.总结:npm link命令创建了链接指向了我的当前目录,让我能够方便使用命令行

  • 本地安装
npm i jquery --save  / -S
npm i webpack --save-dev / -D

默认不给--save表示安装到当前的dependences,表示是上线和开发的时候都需要 dependencies 开发依赖,上线不需要了

区别:比如有一天把模块发布了,人家安装我的模块,那我的模块中的dependencies就会默认被拉去下来,但是devdependencies就不会,所以开发依赖万一安装到这里头来了,导致上线要用的找不到,别人这头是没法安装找到对应依赖的。

清楚npm 缓存 : sudo npm cache clean --force 常见的依赖项 dependencies devDependencies peerDependencies 会提示你安装缺少的模块,同时需要安装一定的版本,版本不同就报错 bundleDependencies 打包时依赖 optionsDependencies 可选择依赖,如果找不到不会影响npm下载

npm install --production 只安装生产环境的依赖,也就是不安装devDependencies的依赖 npm pack 将项目打包,打包的时候是不会将node_modules的依赖打包进去,所以配置bundleDependencies:['jquery']就可以将依赖打包进来了。

版本问题

  • npm使用了1.0.0 如果第一位变了,表示不兼容老代码,是大规模的更新 如果第二位变了,表示增加了一些功能 如果第三位变了,表示修复了一些小bug

npm version major || minor || patch可以更改版本好,并且同步到git tag

  • 符号区别

^2.0.0 只要不到3都可以,不可以小过2。 ^负责表示第一位控制 ~2.1.0 只要不超过1就可以 ~负责表示第二位控制

=2.1.0

<=2.0.0

  • beta是内测,测试用的

协议问题

脚本问题

"script": {
  "test": "xxxxxx"
}

scripts 配置执行的脚本 1)执行命令 echo xxx 2) 执行node_modules下的文件

  • 当我执行npm run的时候,他会把当前目录node_modules/.bin也临时拷贝到系统path目录下,不过是临时的,执行后就没了。

因此npm run 可以执行.bin下的文件

  • 或者使用npx可以执行执行node_modules上的bin,这个就更简单,压根不需要配置scripts。如果模块不存在,它还会自动帮你安装,安装使用完后还会立即销毁。相当于临时借来用,然后还回去。这个的好处是避免我们安装全局模块,比如cra脚手架,如果按到全局,一辈子就不更新了。如果使用了npx那就可以随时借来新的脚手架来用。

发布

1.发布包的时候,会发现@vue/cli @vue/service类似的写法。这个是发表作用域包 2.发布包需要先切换到npm官方上 npm会有配置文件,使用cat ~/.npmrc查看 3.npm login

  • nrm nvm npm

nrm负责包源管理 nvm负责版本管理 npm负责包管理

npm install nrm -g
nrm ls
nrm use npm
🔎Explore Package🔎CDN Script

Score

Popularity0/100
Quality51/100
Maintenance18/100

Dependencies

DevDependencies