简单谈谈关于 npm 5.0 的新坑

前言

前几天升级了 Node.js v8.0 后,自带的 npm 也升级到了5.0,第一次使用的时候确实惊艳到了:原本重新安装一次模块要十几秒到事情,现在一秒多就搞定了。

先不要激动,现在我来大概讲一下 npm 5 的一些大的变化:

  • 使用npm install xxx命令安装模块时,不再需要--save选项,会自动将模块依赖信息保存到 package.json 文件;
  • 安装模块操作(改变 node_modules 文件夹内容)会生成或更新 package-lock.json 文件
  • 发布的模块不会包含 package-lock.json 文件
  • 如果手动修改了 package.json 文件中已有模块的版本,直接执行npm install不会安装新指定的版本,只能通过npm install xxx@yy更新

重新安装模块之所以快,是因为 package-lock.json 文件中已经记录了整个 node_modules 文件夹的树状结构,甚至连模块的下载地址都记录了,再重新安装的时候只需要直接下载文件即可(这样看起来 facebook 的 yarn 好像没有啥优势了)。

以下是 package-lock.json 文件的例子:

{
 "name": "test_pkg_lock",
 "version": "1.0.0",
 "lockfileVersion": 1,
 "dependencies": {
 "commander": {
 "version": "2.9.0",
 "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
 "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q="
 },
 "cssfilter": {
 "version": "0.0.8",
 "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.8.tgz",
 "integrity": "sha1-ZWTKzLqKdt2bS5IGaLn7f9pQ5Uw="
 },
 "graceful-readlink": {
 "version": "1.0.1",
 "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
 "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
 },
 "xss": {
 "version": "0.2.18",
 "resolved": "https://registry.npmjs.org/xss/-/xss-0.2.18.tgz",
 "integrity": "sha1-bfX7XKKL3FHnhiT/Y/GeE+vXO6s="
 }
 }}

带来速度的同时,npm 也挖了个大大的坑:

以后直接改 package.json 文件相应模块的版本号,再执行npm install不会更新了(好可怕),你只能手动用npm install xxx@yy指定版本号来安装,然后它会自动更新 package-lock.json 文件。直接执行npm install时,如果不存在 package-lock.json 文件,它会根据安装模块后的 node_modules 目录结构来创建;如果已经存在 package-lock.json 文件,则它只会根据 package-lock.json 文件指定的结构来下载模块,并不会理会 package.json 文件。

网上已经有很多人反应这个问题了:GitHub 上的 issue:package-lock.json file not updated after package.json file is changed

链接:https://github.com/npm/npm/issues/16866

clean project with some deps in package.json.you run npm imodules are installed and package-lock.json file is created.say you update module A in package.json file.you run npm i. I would expect this updates the package-lock.json file but it doesn't. which results in module A not being updated.

文章:Understanding lock files in NPM 5

链接:http://jpospisil.com/2017/06/02/understanding-lock-files-in-npm-5.html

这里是 npm 文档关于 package-locks 的说明

链接:https://docs.npmjs.com/files/package-locks

目前还不知道关于 package-lock.json 的最佳实践,果断切换回 Node v6.x,等别人把坑填了再上。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • 简单谈谈关于 npm 5.0 的新坑

    前言 前几天升级了 Node.js v8.0 后,自带的 npm 也升级到了5.0,第一次使用的时候确实惊艳到了:原本重新安装一次模块要十几秒到事情,现在一秒多就搞定了. 先不要激动,现在我来大概讲一下 npm 5 的一些大的变化: 使用npm install xxx命令安装模块时,不再需要--save选项,会自动将模块依赖信息保存到 package.json 文件: 安装模块操作(改变 node_modules 文件夹内容)会生成或更新 package-lock.json 文件 发布的模块不会

  • 简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • 简单谈谈python中的语句和语法

    python程序结构 python"一切皆对象",这是接触python听到最多的总结了.在python中最基层的单位应该就是对象了,对象需要靠表达式建立处理,而表达式往往存在于语句中,多条语句组成代码块,多个代码块再组成一整个程序.python的核心其实是由语句和表达式组成.所以在这里简单探讨一下python中的语句和表达式. 因为以后可能会接触到两个版本的python,所以这里讲一讲python2与python3的语句差异: 1.python2中没有nolocal语句. 2.prin

  • webpack 4.0.0-beta.0版本新特性介绍

    近年来前端技术如雨后春笋般蓬勃发展,我们也在这个潮流下不断地学习.成长.前端技术的不断发展,给我们提供了许多的便利.例如:JSX的出现为我们提供了一个清晰.直观的方式来描述组件树,LESS/SASS的出现提高了我们书写css的能力,AMD/CommonJS/ES6 的出现为我们模块化开发提供了便利.然而,我们需要使用其它工具将这些工具转化成原生语言以运行在浏览器上.为了能够更好的将这些不同的资源整合到一起,我们就需要一个打包工具,webpack就是这个需求下的产物. webpack 可以看做是模

  • 简单谈谈vue的过渡动画(推荐)

    在vue中,实现过渡动画一般是下面这样: <transition name="fade"> <div></div> </transition> 用一个transition对元素或者组件进行封装. 在过渡的时候,会有 4 个(CSS)类名在 enter/leave 的过渡中切换. 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效

  • react系列从零开始_简单谈谈react

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到webpack,node等前端知识,每天会更新一篇.这篇react的系列博客会覆盖react目前的所有知识点: 一.React基础 1.React 虚拟DOM概念,React的性能高效的核心算法 2.React组件,理解什么叫组件化 3.React组件嵌套 4.JSX内置表达式 5.React的生命周

  • 简单谈谈原生js的math对象

    Math对象方法 //返回最大值 var max=Math.max(95,93,90,94,98); console.log(max); //返回最小值 var min=Math.min(95,93,90,94,98); console.log(min); //向上取整 console.log(Math.ceil(2.2)); console.log(Math.ceil(-2.2)); //向下取整 console.log(Math.floor(2.2));//2 console.log(Mat

  • 简单谈谈JS中的正则表达式

    1.正则表达式包括两部分 ①定义正则表达式的规则: ②正则表达式的模式(i/g/m): 2.声明正则表达式 ① 字面量声明: var reg = /表达式规则/表达式模式: eg:var reg = /white/g: ② 使用new关键字: var reg = new RegExp("表达式规则","表达式模式") eg: var reg = new RegExp("white","g"): 3.正则表达式的三种模式 ① g

  • 浅谈Android Studio 3.0 工具新特性的使用 Android Profiler 、Device File Explorer

    前言: 其实 studio3.0的工具大家也已经使用过一段时间了,自己呢,就是从bate版开始使用的,我觉得比较好用的几个地方.就几个,可能还没用到其他的精髓. 但我觉的这个两个功能对我是比较实用的.好那么下面就给大家介绍一下吧. 正文: 话不多说咱们直接上图吧.(个人比较喜欢看图说话) 第一个(Android Profiler)我要介绍的就是这个了.(先看一下效果"震撼一下") (图-1) (图-2) (图-3) (厉害不厉害,牛逼不牛逼)那么我们怎么来操作这个工具呢,来咱们接着看图

  • 简单谈谈js的数据类型

    近期做一些项目的时候发现,自己的js基础还是不够扎实,再看一遍犀牛书,加深自己的理解和印象.所以从这篇文章开始,后面都是关于原生js的一些内容. 这篇文章,我们具体介绍一下js的数据类型其中一种. 一.javaScript(以下简称js)的数据类型分为两类:原始类型和对象类型.js的原始类型包括数字.字符串和布尔值. 二.js有两个特殊的原始值:null(空)和undefined(未定义),它们不是数字.字符串和布尔值.它们通常分别代表各自特殊类型的唯一成员. 三.js中除了数字.字符串.布尔值

随机推荐