侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

你或许不知道的一些npm实用技巧

前端  /  管理员 发布于 5年前   604

前言

绝大多数前端和 Node.js 开发者每天的日常工作都离不开 npm,不知道你对 npm 的观感如何?如果你觉得 npm 很棒,那么不妨看下这篇文章,说不定其中有你之前没留意过的小窍门,可以让你 npm 用得更顺手。如果你觉得 npm 很糟糕,那也可以看下这篇文章,也许会发现用上一些小技巧,npm 会变得稍微不那么糟糕。

npm ci

别被它的名字骗了。npm ci 并不仅仅适用于持续集成系统,在日常开发中,npm ci 非常实用。和 npm install 不同,npm ci 根据 package-lock.json 安装依赖,这可以保证整个开发团队都使用版本完全一致的依赖,避免把时间浪费在排查因为依赖不一致而导致的各种奇怪问题上。不仅如此,npm ci 还有一个很好的副作用,加快 node 模块安装速度。因为 npm ci 直接根据 package-lock.json 中指定的版本安装,无需计算求解依赖满足问题,在大多数情况下都可以大大加速 node 模块安装过程。如果你曾经因为嫌 npm install 太慢而换用兼容性不那么好的 yarn 以及兼容性更不好的 pnpm,那么不妨试下 npm ci,也许你会发现,其实 npm 也可以不那么慢。

另外,如果 package-lock.json 过时(和 package.json 冲突),那么 npm ci 会很贴心地报错,避免项目依赖陷入过时状态。

有了 npm ci,基本上我只在引入新依赖时才使用 npm install。

注意,npm ci 在安装前会自动清除现存的 node_modules,所以 npm ci 天然规避了增量安装可能带来的不一致性等问题。(这也意味着,你又可以少记一条命令 npm prune。)不过,如果你的网络很慢,那可能就不那么妙了。别慌,你可以用 --prefer-offline,最大限度地利用 npm 的全局缓存加速安装过程。

当然,既然使用 npm ci,那就别忘了把 package-lock.json 加入 git 仓库。

npm outdated

npm ci 基于 package-lock.json 锁定依赖版本,确保项目开发环境的一致性。但这并不意味着依赖版本是锁死的。为了利用新版本带来的问题修复、新特性以及性能提升,定期还是需要升级依赖版本的。在这一场景下,推荐使用 npm outdated。它会列出还没有升到当前最新版本的项目依赖。红色表示符合指定的语义化版本范围,理论上可以无脑升级(npm update 会一次性升级所有红色依赖)。黄色表示不符合指定的语义化版本范围,比如大版本升级,升级可能会遇到兼容性问题。

有些项目处于维护阶段,不打算加新特性了,甚至可能不太严重的问题都不打算修复了,但是像安全漏洞这样的严重问题还是要管的。这时可以使用 npm audit 命令,列出项目依赖中有安全漏洞的版本。处于活跃开发阶段的项目当然也需要关注安全漏洞问题,但是因为 npm install 引入新依赖时会自动运行 npm audit,再加上会定期运行 npm outdated,所以手动运行 npm audit 的机会不太多。

npx

前面说过基本上只在引入新依赖时才使用 npm install,没有提到全局安装。全局安装当然也需要使用 npm install。不过,为了确保开发环境的一致性,npm install --global 应当慎用。个人建议仅仅在安装一些日常使用的工具时才使用全局安装,而项目开发所需的工具,则作为开发依赖安装,然后使用 npx 调用。

不推荐:

npm install --global webpackwebpack ...

推荐:

npm i -D webpacknpx webpack ...

这里 i -D 是 install --save-dev 的简写形式。

对于一些一次性的临时任务,可以直接通过 npx 运行相应工具,免去了手动安装的麻烦,也不会污染 devDependencies。

例如,之前项目使用 webpack 打包,现在想临时试下换用 rollup 打包的效果:

npx rollup ...

npx 很智能,如果路径中找不到 rollup,会自动安装。

npx 用来测试不同版本的兼容性时非常好用。下面是一些例子。

需要用到的 cowsay 的某个特性或修复已经合入 GitHub 主线,但是还没在 npmjs 上发新版,试一下:

npx github:piuccio/cowsay

临时测下内部维护的 cowsay 的一个分支:

npx git+ssh://my.hosted.git:cowsay.git#semver:^1

当前使用的是 node 的 LTS 版本(10),想试下 node 12 下构建脚本能不能跑起来:

npx -p node@12 npm run build

从上面我们可以看到,当包名和命令名不同时(npm 命令由 node 提供),可以用 -p 选项指定包名。

npm run

在 package.json 的 scripts 属性中加入命令(例如:"foo": "echo foo")就可以通过 npm run foo 运行对应命令。这是 npm 提供的一个很方便的运行项目相关的自动化任务的机制,有一点类似 make。不过直接运行 make (不带任何参数)会运行默认任务,但直接运行 npm run (不带任何参数)会列出所有在 scripts 中声明的命令。

; npm runLifecycle scripts included in leancloud-realtime: test npm run lint && npm run build && npm run docs && npm run test:node && npm run test:browseravailable via `npm run-script`: precommit pretty-quick --staged commitmsg commitlint -e $GIT_PARAMS lint eslint --ignore-path .gitignore src test plugins && tsc realtime.d.ts --strict ...

其他

这里还有一些我个人觉得不是特别实用的小窍门,不过,每个人的需求和偏好不同,说不定你会觉得它们挺有用的。如果你有想要分享的窍门,欢迎留言。

  • npm init -y 默认情况下,npm init 会让你回答一些问题。npm init -y 可以跳过这些问题,直接上手开发。我之所以不推荐它,是因为,如果你打算尽快上手开发一个应用,绝大多数情况下会用框架,而几乎所有框架在 npmjs 上都至少有一个 create-xxx-app 包。所以基本上你没有机会输入 npm init 去回答那些问题。而如果你打算写一个组件或库,那么 package.json 中的元信息对组件或库的使用者很重要(即使是仅供你自己使用的组件或库,未来的你也未必记得当初写这个组件或库的上下文),跳过这些问题并不是一个好主意。当然,急躁是程序员的三大美德,你也许会想,我可以在完成开发后再来补这些。但是,一般来说,往往项目开始的时候是你最有兴趣(或者说,稍微不那么反感)记录这些上下文的时刻。如果在项目开始的时候都不耐烦做这个,开发完成后,很可能就更没兴趣了。同理,README 也应该在项目开始前写。
  • npm repo 可以打开项目的源代码仓库(大部分情况下是 GitHub),它还有一个姊妹命令,npm home,可以打开项目的主页。不过,我个人觉得,比起这两个命令,通常而言, IDE 或者编辑器的智能提示(速览类型、速览文档、速览定义之类)更高效。
  • .npmignore 文件可以列出不想打包的文件,避免把一些无关的文件发布到 npmjs 上。但是,统一使用 .gitignore 可以满足绝大部分场景下的需求。而且,只存在 .gitignore 的情况下,npm publish 会尊重 .gitignore 的声明,而 .npmignore 和 .gitignore 同时存在的情况下,npm publish 会忽略 .gitignore,而不是取两者的并集。换言之,.gitignore 中忽略但 .npmignore 中未忽略的文件会被打包发布。所以,使用 .npmginore 就意味着需要同时小心翼翼地维护两份大部分内容重复的列表。同时,一旦团队中有任何一人因为偶然的疏忽或者不熟悉 .npmignore 和 .gitignore 关系的细节出现了失误,那就有可能将敏感信息发布到 npmjs 上,导致安全事故。
  • 各种 npm 命令的快捷版本,比如上文用到的 npm i -D。这些个人觉得不用专门刻意去记。经常输入的命令,可以 npm help 一下看看有没有简短版本。不查也没有关系,npm t 和 npm test 乃至 npm run test 的区别绝不是开发效率的瓶颈所在。很多时候这只是个人偏好问题,比如追求尽可能少打字的人会喜欢 npm t,追求尽可能少记东西的人会喜欢 npm run test (永远不会因为误以为 npm build 表示 npm run build 而碰到问题),其他人可能会喜欢 npm test 这样中庸的选项。
  • npm xmas 猜猜输入这个命令会得到什么结果?你可以亲自试一下。提示:这个命令完全没有实用性可言。;-)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家的支持。

您可能感兴趣的文章:

  • 13 个npm 快速开发技巧(推荐)
  • 卸载安装Node.js与npm过程详解
  • Node.js中npm常用命令大全
  • yarn与npm的命令行小结
  • Node.js安装教程和NPM包管理器使用详解
  • 关于Mac下安装nodejs、npm和cnpm的教程
  • nodejs npm包管理的配置方法及常用命令介绍


  • 上一条:
    13 个npm 快速开发技巧(推荐)
    下一条:
    Node爬取大批量文件的方法示例
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客