npm script和package-lock.json使用示例详解

 更新时间:2023年02月02日 10:00:08   作者:Moment  
这篇文章主要为大家介绍了npm script和package-lock.json使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

npm script指南

这篇文章我们将来学习一下 package.json 文件中的 script字段以及 npm 其他的知识,直接进入正题。

npm 脚本是 package.json 中定义的一组内置脚本和自定义脚本,它们的模板是提供一种简单的命令来执行重复或者复杂的任务,例如:

  • 启动一个 react 项目;
  • 使用 webpack 对项目进行打包;
  • 等等;

每个脚本命令都有一个生命周期,执行前做些什么,执行的时候做些什么,执行完成之后做些什么,例如,在 script 字段中添加两个脚本命令,它们分别是 prestartpoststart ,具体代码如下:

  "scripts": {
    "prestart": "echo 我首先执行",
    "start": "node index.js",
    "poststart": "echo 我最后执行"
  },

在终端中执行 npm start,然后再查看控制台,会有以下输出:

npm 还可以通过 npm_package_字段名称 来获取 package.json 中的信息,需要执行 script 脚本,例如在 package.json 中有以下定义:

  "scripts": {
    "start": "node index.js"
  },

index.js 文件中有以下代码:

console.log(process.env.npm_package_version);

在终端中执行 npm start 之后,发现 package.json 中的版本信息被输出出来了。在这里是通过环境变量 process.env 拿到 package.json 的字段值。

你还可以在终端中执行命令前添加更多的字段,例如:

 npm start moment supper

你可以使用 process.argv 来获取传进来的参数,通过打印会有以下输出:

从数组第二个值开始便是我们额外传入的参数。

有的项目在启动时可能需要同时执行多个任务,多个任务的执行顺序决定了项目的表现。

串行执行,要求前一个任务执行成功以后才能执行下一个任务,使用 && 符号来连接,例如:

  "scripts": {
    "start": "node index.js && node test.js"
  },

在串行命令执行中,只要有一个执行失败,则整个脚本结束,在下面的图片中,第一个命令出错,后面不会有任何输出:

与上面整个执行方式不同的是并行执行,就是多个命令可以同时的评选执行,使用 & 符号来连接:

  "scripts": {
    "start": "node index.js & node test.js"
  },

在这里,如果有其中一个报错了,剩下的依然能正常执行.具体效果如下所示:

package-lock.json

当我们运行 npm install 命令之后,会发现自动生成了一个新文件 package-lock.json,该文件当 npm 修改 node_modules 树或者 package.json 文件时,该文件会自动修改,如果是手动修改会在下一次执行 npm install 时进行修改。

package-lock.json 文件旨在提交到代码创库中,例如 GitHub中,用于各种目的:

  • 描述依赖关系树的单一具体表示形式,以保证团队开发和部署时安装完全相同的依赖关系;
  • 为用户提供一种 time-travel 到以前的状态的工具,意思就是说你之前在 node_modules 中使用的版本是什么,当你把 node_modules 文件删除之后将代码分享给别人,他们通过 npm install 下载到的包版本也是一致;
  • 优化安装速度,如果存在的包,且版本相同则跳过,提高速度;

package-lock.json 的生成逻辑可以看下面的例子进行讲解,例如,在我们的项目 moment 中,安装依赖包 X,依赖包 X 中依赖着包 Y,并且 Y 依赖 Z,具体依赖关系请看以下代码:

// project moment
{ "name": "moment", "dependencies": { "X": "^1.0.0" }}
// package X
{ "name": "X", "version": "1.0.0", "dependencies": { "Y": "^1.0.0" }}
// package B
{ "name": "Y", "version": "1.0.0", "dependencies": { "Z": "^1.0.0" }}
// package Z
{ "name": "Z", "version": "1.0.0" }

在这种情况下 package-lock.json 文件会生成类似以下内容:

// package-lock.json
{ 
    "name": "moment",  
    "version": "1.0.0",  
    "dependencies": {    
        "X": { "version": "1.0.0" },
        "Y": { "version": "1.0.0" },
        "Z": { "version": "1.0.0" }  
    }
}

在我们后面的开发中,如果我们不修改 package.json 文件,那么 package-lock.json 文件就永远都不会被重新生成,即使 X 包发布了新版本,虽然我们 package.json 文件中写的是 ^1.0.0,但是因为 package-lock.json 文件的存在,执行 npm install 并不会自动升级。

总的来说,package.json 文件是指定依赖包能使用的范围,而 package-lock.json 文件是使用这个范围中的一个具体值。

参考文章 package.json 与 package-lock.json 的关系

以上就是npm script和package-lock.json使用示例详解的详细内容,更多关于npm script package-lock.json的资料请关注脚本之家其它相关文章!

相关文章

  • 一道优雅面试题分析js中fn()和return fn()的区别

    一道优雅面试题分析js中fn()和return fn()的区别

    这篇文章主要带领大家深入理解JavaScript中 fn() 和 return fn() 的区别,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 炫酷的js手风琴效果

    炫酷的js手风琴效果

    既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不能做出手风琴效果的书签来呢?这篇文章主要为大家分享了炫酷的手风琴效果实现方式,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 5 种JavaScript编码规范

    5 种JavaScript编码规范

    编码规范就是指导如何编写和组织代码的一系列标准,下面通过本文给大家带来了5 种JavaScript编码规范,需要的朋友参考下
    2018-01-01
  • js下拉框二级关联菜单效果代码具体实现

    js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下
    2013-08-08
  • JS实现图片的不间断连续滚动的简单实例

    JS实现图片的不间断连续滚动的简单实例

    下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js事件流、事件委托与事件阶段实例详解

    js事件流、事件委托与事件阶段实例详解

    事件委托应用在很多开发场景之中,但是很多同学对委托的原理、特别是对JS原生实现委托不太了解,下面这篇文章主要给大家介绍了关于js事件流、事件委托与事件阶段的相关资料,需要的朋友可以参考下
    2022-02-02
  • javascript模版引擎-tmpl的bug修复与性能优化分析

    javascript模版引擎-tmpl的bug修复与性能优化分析

    在平时编码中,经常要做拼接字符串的工作,如把json数据用HTML展示出来,以往字符串拼接与逻辑混在在一起会让代码晦涩不堪,加大了多人协作与维护的成本。而采用前端模板机制就能很好的解决这个问题
    2011-10-10
  • JS Html转义和反转义(html编码和解码)的实现与使用方法总结

    JS Html转义和反转义(html编码和解码)的实现与使用方法总结

    这篇文章主要介绍了JS Html转义和反转义(html编码和解码)的实现与使用方法,结合实例形式总结分析了JS Html转义和反转义、html编码和解码相关封装类定义与具体使用技巧,需要的朋友可以参考下
    2020-03-03
  • javascript使用数组的push方法完成快速排序

    javascript使用数组的push方法完成快速排序

    排序的方法有很多,本节为大家介绍的是使用数组的push方法完成快速排序,当然你也可以举一反三
    2014-09-09
  • JavaScript表单验证开发

    JavaScript表单验证开发

    这篇文章主要为大家详细介绍了JavaScript表单验证开发的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论