Package.json详解

Posted 2021-03-26 rong88

引言

前端需要学习的东西真的挺多的，之前主要从事的是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