引言

前端需要学习的东西真的挺多的,之前主要从事的是MVC框架,操作DOM,使用JQUERY比较多,不知到什么时候,发现现在前端MVVM是主流,不得不把之前的大部分东西丢掉,作为前端婴儿不断前行。

所以以后的文章,可能开始都比较基础,希望大拿不要见笑,若有不对的地方,希望指正,我也会不断修正迭代。

在学习MVVM(react和vue)的时候,开始就是会找iview,element,ant-pro等现成的东西,去改。CLI直接安装,也没有想去学习webpack。现在看更早一点的自己,真的是傻的可爱,就是那种没有方法的新手,弄出来完事。真的要专注一个领域,还是要每个方面都要研究透,要有逻辑的思考。

以下,就是在工作过程中,自己提问题,自己找答案的。有时候觉得挺有趣,看着看着,发现原来npm指令是这样来的,那不仅要弄清楚webpage,npm后续也要多学习。在程序里,任何东西都是有关联的。

生命不息,行走不止,学习不停。

1.概念

Node.js项目遵循模块化的架构,当我们创建了一个Node.js项目,意味着创建了一个模块,这个模块的描述文件,被称为package.json

亦即:模块的描述文件 = package.json

2.属性

name:包名

version:版本号

main  入口文件

license:项目许可

scripts:声明一系列npm脚本指令

dependencies:项目在生产环境中依赖的包-install的东西

devDependencies:项目在开发和测试环境中依赖的包

repository: 项目代码存放地方(git地址)

3.生成

自己生成package.json,在项目根目录下面npm init即可

另,解决了一个疑问,安装项目的时候,用的命令为什么不同?什么时候用npm run dev,什么时候用npm start ?

答案:看 scripts

"scripts": {

    "start": "set NODE_ENV='development' && webpack-dev-server --inline --progress --config ./build/webpack.config.development.js",

    "build": "set NODE_ENV='development' && webpack --config ./build/webpack.config.production.js"

  },

在package.json的script里面看配置的脚本指令,再查看对应的文件。

start里面可以看到端口;build打包编译,start,启动

有点小开心哦!嗯,明白了!

引申:package-lock.json

  1. package.json文件记录你项目中所需要的所有模块。当你执行npm install的时候,node会先从package.json文件中读取所有dependencies信息,然后根据dependencies中的信息与node_modules中的模块进行对比,没有的直接下载,已有的检查更新(最新版本的nodejs不会更新,因为有package-lock.json文件,下面再说)。另外,package.json文件只记录你通过npm install方式安装的模块信息,而这些模块所依赖的其他子模块的信息不会记录。
  2. package-lock.json文件锁定所有模块的版本号,包括主模块和所有依赖子模块。当你执行npm install的时候,node从package.json文件读取模块名称,从package-lock.json文件中获取版本号,然后进行下载或者更新。因此,正因为有了package-lock.json文件锁定版本号,所以当你执行npm install的时候,node不会自动更新package.json文件中的模块,必须用npm install packagename(自动更新小版本号)或者npm install packagename@x.x.x(指定版本号)来进行安装才会更新,package-lock.json文件中的版本号也会随着更新。
  3. 附:当package.json与package-lock.json都不存在,执行"npm install"时,node会重新生成package-lock.json文件,然后把node_modules中的模块信息全部记入package-lock.json文件,但不会生成package.json文件,此时,你可以通过"npm init --yes"来初始化生成package.json文件。

总结:

  • 项目中引入的包版本号之前经常会加^号,每次在执行npm install之后,下载的包都会发生变化,为了系统的稳定性考虑,每次执行完npm install之后会创建或者更新package-lock文件。该文件记录了上一次安装的具体的版本号,相当于是提供了一个参考,在出现版本兼容性问题的时候,就可以参考这个文件来修改版本号即可。
  • 重新install删掉lock

package.json详解的更多相关文章

  1. npm中package.json详解

    通常我们使用npm init命令来创建一个npm程序时,会自动生成一个package.json文件.package.json文件会描述这个NPM包的所有相关信息,包括作者.简介.包依赖.构建等信息,格 ...

  2. (译)package.json详解

    原文链接 概述 本文囊括了所有package.json文件中你需要知道的细节.注意package.json必须是纯JSON的,而不仅仅是一个JavaScript对象字面量.该文件描述的很多行为都受np ...

  3. VSCode插件开发全攻略(三)package.json详解

    更多文章请戳VSCode插件开发全攻略系列目录导航. package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先 ...

  4. React package.json详解

    概述: 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据).npm install命令根据这个配置文件 ...

  5. package.json 详解

    使用package.json  属性说明 name - 包名. version - 包的版本号. description - 包的描述. homepage - 包的官网 url . author - ...

  6. Javascript模块化开发1——package.json详解

    一.环境安装 Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/. 在该页面你可以根据不同平台系统选择你需要的 Node.js 安装包. Node. ...

  7. package.json详解以及package-lock.json的作用

    一.创建 package.json输入如下命令之后,会要求填写基本的配置信息,这里,我们选择一路回车即可,待生成 package.json 文件之后,再来配置. npm init 二.配置 packa ...

  8. vue package.json 详解

    示例: { "name": "scrm", "version": "0.1.0", "private" ...

  9. JSON详解(转)

    JSON详解 JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.XML也是一种数据交换格 ...

随机推荐

  1. FZU Tic-Tac-Toe -.- FZU邀请赛 FZU 2283

    Problem L Tic-Tac-Toe Accept: 94    Submit: 184Time Limit: 1000 mSec    Memory Limit : 262144 KB  Pr ...

  2. adb logcat命令

    1.http://blog.csdn.net/tumuzhuanjia/article/details/39555445 2.http://blog.csdn.net/xyz_lmn/article/ ...

  3. html/css中float浮动的用法

    一.float基础用法示例 1.我们先建两个div盒子,设置高度.宽度和背景颜色: 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就 ...

  4. 【Offer】[32] 【从上到下打印二叉树】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 不换行:从上到下打印出二叉树的每个节点,同层的节点按照从左到右的顺序打印.例如,输入下图的二叉树,则依次打印出8,6,10,5,7,9, ...

  5. 【Offer】[12] 【矩阵中的路径】

    题目描述 思路分析 Java代码 代码链接 题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上 ...

  6. MATLAB之基本语法

    常用命令 dir:列出当前目录下的所有文件 clc:清除命令窗 clear all:清除环境(从内存中清除所有变量) who:将内存中的当前变量以简单形式列出 close all: 关闭所有的 Fig ...

  7. Java ArrayList源码分析(有助于理解数据结构)

    arraylist源码分析 1.数组介绍 数组是数据结构中很基本的结构,很多编程语言都内置数组,类似于数据结构中的线性表 在java中当创建数组时会在内存中划分出一块连续的内存,然后当有数据进入的时候 ...

  8. 056 模块7-os库的基本使用

    目录 一.os库基本介绍 二.os库之路径操作 2.1 路径操作 三.os库之进程管理 3.1 进程管理 四.os库之环境参数 4.1 环境参数 一.os库基本介绍 os库提供通用的.基本的操作系统交 ...

  9. ELKBR部署检测项目日志

    ELK filebeat:具有日志收集功能,相比logstash,+filebeat更轻量,占用资源更少,适合客户端使用. redis消息队列选型:Redis 服务器通常都是用作 NoSQL 数据库, ...

  10. myeclipse 保存含中文的jsp失败,提示内容含有 ISO-8859-1 不支持的字符

    就是这货,网上说各种设置首选项编码神马的,但我只是临时学一学jsp,装的myeclipse貌似不全,没有他们说的选项,后来发现了解决方案: 出错是因为我的jsp文件是用于在其他jsp中引入的,所以没有 ...