FrankKai.github.io icon indicating copy to clipboard operation
FrankKai.github.io copied to clipboard

关于npm那些事儿

Open FrankKai opened this issue 6 years ago • 6 comments

  • 常用npm命令总结
  • 如何更加优雅地使用npm
  • Node与操作系统之间的纠葛
  • npm semantic versioning
  • nvm命令集
  • 其他

FrankKai avatar Apr 24 '18 10:04 FrankKai

常用npm命令小结

  • 批量安装包 npm install 在package.json中的devDependencies字段中写明依赖的第三方包,然后就可以批量下载第三方包了
  • 淘宝node镜像源 $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 更换npm到特定版本号 npm install npm@版本号
  • mac上管理node版本 npm install n
  • 只下载dependencies中的模块 npm install --production
  • windows下的node版本控制工具 Nodist
  • 可以搜索出相应的包 npm search [package]
  • 查看全局安装包 npm list -g --depth 0
  • 删除全局包 npm uninstall -g <package>
  • 更新单个全局包 npm install -g <package>
  • 更新全部全局包 npm update -g 需要root权限
  • 生成项目文件package.json: npm init
  • 升级npm npm install npm -g
  • 查询包详细信息 npm info <package>
  • 只查看的包的description选项 npm info <package> description
  • 带上包名字并且查看包的description选项 npm info <package> name description
  • 设置npm安装包进度的显示和关闭 npm set progress=true
  • 查看node,npm信息及cli(脚手架)信息 npm -dd 或npm -ddd
  • 生成package-lock.json npm i --package-lock-only
  • node包安全审查(npm@6.)
    • 检查单个node包的安全隐患(需要提供package.json ,package-lock.json) npm audit
    • 修复安全隐患 npm audit fix
    • 安装单个包关闭安全审查 npm install example-package-name --no-audit
    • 安装所有包关闭安全审查
      • npm set audit false
      • 手动将~/.npmrc配置文件中的audit修改为false
  • 查看本地npm仓库关键配置 npm config list -local
  • 查看全局npm仓库关键配置 npm config list -g
  • 修改npm缓存 npm config set cache <new_path>
  • 修改npm全局包安装目录 npm config set prefix <new_path>
  • 查看单个包的版本 npm view <pkg> version
  • 查看当前package.json的依赖版本 npm ls
  • 更新npm包版本号为1.2.3 npm version 1.2.3
  • 升级主版本号 npm version major//假设当前为1.2.3,运行完升级为2.0.0
  • 升级次版本号 npm version minor//假设当前为2.0.1,运行完升级为2.1.0
  • 升级最小版本号 npm version patch//假设当前为2.0.1,运行完升级为2.1.1
  • 预升级主版本号 npm version premajor //v3.7.0 -> v4.0.0-0
  • 预升级次版本号 npm version preminor//v4.0.0-0 -> v4.1.0-0
  • 预升级最小版本号 npm version prepatch//v4.1.0-0 -> v4.1.1-0
  • 预升级发布 npm version prerelease//4.1.1-0 - > v4.1.1-1
  • 预升级发布(alpha,beta) npm version prerelease --preid=alpha npm version prerelease --preid=beta
  • 发布包时增加日志 npm version patch -m "更新了一个patch"
  • 为版本打标签(运行完npm version后) git push --tags
  • 设置npm镜像源为淘宝源(默认为https://registry.npmjs.org/ 访问非常慢) npm config -g set registry https://registry.npm.taobao.org
  • 单个项目可以通过.npmrc设置 registry=https://registry.npm.taobao.org
  • 安装nvm nvm会自动写入信息到.bash_profile,若没有,需要手动创建并写入
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
export NVM_DIR="$HOME/.nvm"

若已经有.bash_profile,则直接安装,安装后关掉重开terminal或者source .bash_profile; 若没有,则按照下面步骤操作:

// ctrl + c下面信息到剪贴板
/*
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
*/
vi .bash_profile // ctrl + v 
source .bash_profile
  • 安装依赖到本地--save-dev缩写 --save-dev // -D
  • 设置公司npm包的scope npm config set scope <org-name>
  • 查看npm包的版本信息 npm view xxx

FrankKai avatar Apr 24 '18 11:04 FrankKai

如何更加优雅地使用npm

- devDependencies与Dependencies区别 Dependencies`用于开发环境多放置开发依赖,例如jquery等用户需要加载的库;devDependencies用于生产环境多放置前端依赖,例如webpack等开发工具 - --save和--save-dev的区别 --save是对生产环境所需依赖的声明(开发应用中使用的框架,库),--save-dev是对开发环境所需依赖的声明(构建工具,测试工具) - npm i 是什么意思? npm i 是npm install的简写 - package.json中的proxy是什么? 默认值为null,类型为url,一个为了发送http请求的代理。如果HTTP__PROXY或者http_proxy环境变量已经设置好了,那么proxy设置将被底层的请求库实现。 这个配置目前我只了解到可以与create-react-app的react-scripts结合使用:Proxying API Requests in Development 可以到我的这篇博文去一探究竟:如何理解package.json中的proxy字段?

- package.json 与package-lock.json区别是什么?

package-lock.json是node_modules中所有依赖最终真实生成树,加速依赖的install,精确控制依赖版本。

它是一个用来控制版本的文件,但是工作中的实际项目和开源的vue以及element-ui,都用的是yarn.lock。和老大确认以后,老大说这是因为npm@5才推出package-lock.json,之前都是一直使用yarn.lock管理版本。现在已经是npm@6了,新项目中应该会尽量采用package-lock.json。

npm@5引入package-lock.json之后,它完整记录了整个node_modules的树形结构,其中最为关键的dependencies部分完整包括了各个依赖的以下内容:

  • version
  • integrity
  • resolved
  • bundled
  • dev
  • optional
  • requires
  • dependencies

如果手动修改了 package.json 文件中已有模块的版本,直接执行npm install不会安装新指定的版本,只能通过npm install xxx@yy更新。

- package-lock.json与yarn.lock优劣对比?

package-2@^2.0.0:
  version "2.0.1"
  resolved "https://registry.npmjs.org/package-2/-/package-2-2.0.1.tgz#a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0"
  dependencies:
    package-4 "^4.0.0"

在yarn.lock的官方文档中,https://yarnpkg.com/lang/en/docs/yarn-lock/,看到yarn.lock的文件,只有3个配置项,那就是version,resolved和dependencies这3项,而上面的package-lock.json仅仅dependicies项目下就有8个配置项,可配置项越多,说明对于版本的管理更详尽。

因此,npm@5以后的项目尽量使用package-lock.json。

- 全局的npmrc在什么位置? ~/.npmrcmacOS

- node缓存包在哪里? npm config get cache

- 全局包安装在哪里? npm root -g npm config get prefix +/lib/node_modules

- npm version运行后会自动提交? npm version versionnum/major/minor/patch 干了以下事

1.修改package.json中的version
2.git commit -m "新的version"
3.git tag "新的version"

- node_modules里的.cache目录作用是什么? 目录作用未知,但是npm存在cache机制:https://docs.npmjs.com/cli/cache.html。

  • main是干什么的?

Node looks for a package.json file and checks if it contains a main property. It will be used to point a file inside the package directory that will be the entry point. If main property does not exist, then Node tries in order index.js, index.json and index.node. https://bytearcher.com/articles/main-property-in-package.json-defines-entry-point/

vue是dist/vue.runtime.common.js axios是index.js vuex是dist/vuex.common.js vue-router是dist/vue-router.common.js iview是dist/iview.js mqtt.js是mqtt.js

  • private是干什么的? If you set "private": true in your package.json, then npm will refuse to publish it.
  • HOST 私网内调试 HOST=0.0.0.0(windows机器想连接macOS本地,做Edge浏览器兼容)
  • 查看node安装目录 which node
  • npm包限定node版本 package.json里面的engines字段

FrankKai avatar Apr 24 '18 11:04 FrankKai

Node与操作系统之间的纠葛

- export命令 export 命令用于设置或显示环境变量。通过 export 添加的环境变量仅在此次登陆周期内有效。

比如很多时候我们的开发环境和生产环境,就可以通过设置一个临时环境变量来,然后在程序中根据不同的环境变量来设置不同的参数。

设置 NODE_ENV 环境变量。退出 SHELL 时失效

$ export NODE_ENV=development

查看当前所有环境变量

$ export -p 
...
declare -x Apple_PubSub_Socket_Render="/private/tmp/com.apple.launchd.T7FbIu3TKI/Render"
declare -x HOME="/Users/frank"
declare -x LANG="zh_CN.UTF-8"
declare -x LOGNAME="frank"
declare -x NVM_CD_FLAGS=""
declare -x NVM_DIR="/Users/frank/.nvm"
...

在 Node.js 代码中判断当前环境是开发环境还是生产环境:

if (process.env.NODE_ENV === 'development') {
    console.log('开发环境');
} else {
    console.log('生产环境');
}

FrankKai avatar May 16 '18 08:05 FrankKai

npm semantic versioning

重点:

^1.0.0 // same major range
~1.0.0 // same minor range
1.0.0 // fixed version

关键词:major minor patch range npm semver calculator image image

semver calculator

same major range
^2.2.1

大于2.2.1版本,主版本号不变,可能会是2.2.2, 2.3.1, 2.9.0等等。 ^x.y.z,主版本号x作为最新版本号。

same minor range
~2.2.0

大于2.2.1版本,主,次版本号不变,可能会是2.2.1, 2.2.3, 2.2.9等等。

a range of stable versions

>,<,=,>=,<=,-指明版本范围。

>2.1
1.0.0 - 1.2.0

注意:连字符左右必须有空格

包括像alpha 和 beta预发布版本
1.0.0-rc.1
预发布版本范围
>1.0.0-alpha
>=1.0.0-rc.0 < 1.0.1
使用多个版本集

使用||去组合版本集

^2 < 2.2 || >2.3

FrankKai avatar Jul 06 '18 03:07 FrankKai

nvm命令集

  • 安装最新版node nvm install node
  • 安装指定版本 nvm install 8.12.0
  • 列举所有可用版本 nvm ls-remote
  • 切换最新版本 nvm use node nvm run node --version
  • 切换指定版本 nvm use 8.12.0 nvm run 8.12.0 --version
  • 切换某个minor下的最新版本 nvm exec 8.11 node --version
  • 获取安装路径 nvm which 8.12.0
  • 查看已安装node版本 nvm list
  • 切换到系统版本 nvm use system nvm run system --version
  • 设置默认版本 nvm alias default v15.14.0

FrankKai avatar Oct 10 '18 06:10 FrankKai

其他

  • WHATWG API与Legacy API区别? 例如url模块,WHATWG API是被浏览器实现的新的API,而Legacy API是旧的遗留的API。
 // Legacy API
import url from 'url'
const Url = url.parse(str);
// WHATWG API
import { URL } from 'url';
const Url = new URL(str)
  • /usr/local/lib/node_modules中放了什么? 放的是全局的node包。
  • node_modules/.bin中放了什么? 放了各种node_modules包下的soft link。 这些soft link基本上都是每个单独的包中bin目录的文件。
lrwxr-xr-x  1 frank  staff  15  9 23 16:16 mqtt -> ../mqtt/mqtt.js
lrwxr-xr-x  1 frank  staff  18  9 23 16:16 mqtt_pub -> ../mqtt/bin/pub.js
lrwxr-xr-x  1 frank  staff  18  9 23 16:16 mqtt_sub -> ../mqtt/bin/sub.js

上面3个文件,mqtt存放在mqtt一级目录下,pub.js和sub.js存放在bin目录下。

  • npm login 409错误
npm ERR! code E409 npm ERR! 409 Conflict - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:frankkai - [conflict] User frankkai already exists

解决办法:

npm login --registry http://registry.npmjs.org
npm publish --registry http://registry.npmjs.org
  • 强制清除npm缓存
npm cache clean -f
  • npm link
cd ~/projects/node-redis    # go into the package directory
    npm link                    # creates global link
    cd ~/projects/node-bloggy   # go into some other package directory.
    npm link redis              # link-install the package

注意link的名字是package.json的name,而不是目录名称。

  • NODE_OPTIONS=--openssl-legacy-provider 假如使用node14和node16版本,会报错。升级到v18.12.0即可。

  • 淘宝镜像源同步npm包 发布完npm包之后,淘宝镜像源不会立刻同步,至少需要10分钟,若想立刻获取淘宝源下最新的包,在下面链接做同步即可。 https://npmmirror.com/sync/random-pro.js

  • 发布npm包(npm publish)失败怎么办? npm adduser + OTP。

FrankKai avatar May 13 '19 07:05 FrankKai