技术栈

主页 > 前端开发 >

[阅 #8] npm 实用小贴士

「阅」——JSCourse 旗下栏目,专门推荐我们为大家精心挑选的优质 JavaScript 相关技术内容

大家好,我是小 J,很高兴又和大家见面了。今天我为大家准备了几个比较实用的 npm 小贴士,在实际开发过程中或许会对大家有所帮助,我们来看下吧!

1. npm home 模块名

这个命令会自定打开你指定的模块名的主页(也就这个模块 package.json 中 homepage 字段指定的 URL),而且这个模块未必是你本地安装的,只要是仓库中有的就可以 , 而且这个命令也不需要非得在项目根目录中运行,任何地方都可以。比如:你输入

npm home react

就会直接打开浏览器,访问「https://facebook.github.io/react/」这个页面。其实如果你习惯了这个命令,还是挺实用的,起码不需要去记网址了。

2. npm repo 模块名

这个命令和上一个几乎一样,唯一的区别是它会打开浏览器访问这个模块 package.json 文件中 repository 字段指明的 URL,比如,你输入

npm repo react

就会打开浏览器访问「https://github.com/facebook/react」。

3. npm outdated

这个命令需要在项目中运行,它会检查你安装的模块,并告诉你哪些模块已经过期了,有了新的版本。具体的信息则包括该模块你当前安装的版本(Current)、你应该要更新到的版本(Wanted)以及仓库中最新的版本(Latest)。如下图例子所示:

npm outdated 示例结果

npm outdated 示例结果

有的时候我们可能考虑对依赖模块做升级,那么在这之前你就可以使用这个命令开看下目前有哪些模块有了更新。

4. npm prune

同样的,这个命令需要在项目中运行,它默认会去比对你项目中 package.json 文件中声明的依赖模块(包括 dependencies 和 **devDependencies **)以及实际安装的。如果发现实际安装的在 package.json 中并未声明 , 就会自动帮你移除掉。当然了,你可能会问比如我依赖一个模块 A,然后模块 A 自己依赖模块 B,这个时候 B 肯定在 package.json 中没有声明(因为我依赖的又不是 B),这个时候 npm prune 会不会把 B 删掉呢?这个当然不会,否则就是个大 bug 了,因为把 B 删了 A 就不能工作了。所以这个命令还是去分析依赖关系的,不是傻乎乎地就去删了。另外,这个命令还支持你指定一个模块,比如:

npm prune react

那么它只会去比对 react 这个模块,你还可以指定只去比对 dependencies 中的,而不去比对 devDependencies,就像这样:

npm prune --production

这个命令等于是在给你项目安装的模块瘦身,把不需要的删掉,节约空间。

5. npm config set save-prefix="~"

我们一般安装模块会使用 **npm install --save 或者 npm install --save-dev **,这样就会把安装的模块记录在 package.json 文件中,但是大家注意到没有,package.json 文件中都会多一条这样的数据:

{
  dependencies: {
    "react": "^15.6.1"
  }
}

你发现没有,版本号前面会有个 ^ 符号,而标题中的这条命令就会把这个符号变为 ~。那区别是什么呢?区别就是 ^ 锁定的是主版本号(Major Version),比如「^1.0.0」代表你可以安装 1.x.x,而 ~ 符号锁定的是主版本号 + 次版本号(Minor Version),如「~1.0.0」代表你只可以安装 1.0.x。如果你想锁死版本号,那可以直接使用:

npm config set save-exact true

6. npm ls --depth 0

这条命令可以一眼看到你项目中安装到模块,就像这样:

npm ls --depth 0 运行结果示例

npm ls --depth 0 运行结果示例

如果你还想展开一层看看这些模块各自又依赖了哪些模块,那就运行:

npm ls --depth 1

以此类推!这个命令其实比你直接去 package.json 看依赖更加直观,而且还可以看到整个依赖关系。

7. 不同项目采用不同的 npm 配置

有的时候我们希望不同的项目有不同的 npm 配置,怎么办呢?你就可以直接在项目中创建一个 .npmrc 文件,然后将这个项目所需的配置写进去。如果要快速查看当前的配置,可以运行:

npm config list

好了,以上就是今天要分享个大家的小贴士,希望对你有所帮助!我们下期见咯,拜拜!

​关注「jscourse」微信公众号获取最新课程和学习资源!

责任编辑:admin  二维码分享:
本文标签: 命令reactjsonpackage模块npm
点击我更换图片

评论列表