大前端快闪：Package.Json文件知多少？

本文转载自微信公众号「精益码农」，作者有态度的马甲。转载本文请联系精益码农公众号。

成都创新互联公司服务项目包括迪庆州网站建设、迪庆州网站制作、迪庆州网页制作以及迪庆州网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，迪庆州网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到迪庆州省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

最近在公司某项目参与了一些前端工作，作为后端抠脚大汉，改点前端细节磕磕绊绊，改点大前端、工程化、HTTP交互倒也还能做到柳暗花明。

于是打算用后端程序猿的视角记录一些{大前端}的知识快闪，也算是帮助读者构建完整的全栈技能体系。

快闪一：paakage.json文件知多少

如果你使用了nodejs、npm项目、Angular项目等，你都会用到package.json文件，package.json文件是项目的清单文件，package.json在react项目开发和部署阶段扮演了重要角色。

Package.json = 项目元信息+ 依赖的组件版本+ 脚本

请看下面的package.json示例文件:

 
 
 
    
  
  
  
  1. { 
    2. 
  
  
  
  2.   "name": "first-react-app", 
    3. 
  
  
  
  3.   "version": "0.1.0", 
    4. 
  
  
  
  4.   "private": true, 
    5. 
  
  
  
  5.   "dependencies": { 
    6. 
  
  
  
  6.     "@testing-library/jest-dom": "^5.14.1", 
    7. 
  
  
  
  7.     "@testing-library/react": "^11.2.7", 
    8. 
  
  
  
  8.     "@testing-library/user-event": "^12.8.3", 
    9. 
  
  
  
  9.     "react": "^17.0.2", 
    10. 
  
  
  
  10.     "react-dom": "^17.0.2", 
    11. 
  
  
  
  11.     "react-scripts": "4.0.3", 
    12. 
  
  
  
  12.     "web-vitals": "^1.1.2" 
    13. 
  
  
  
  13.   }, 
    14. 
  
  
  
  14.   "scripts": { 
    15. 
  
  
  
  15.     "start": "react-scripts start", 
    16. 
  
  
  
  16.     "build": "react-scripts build", 
    17. 
  
  
  
  17.     "test": "react-scripts test", 
    18. 
  
  
  
  18.     "eject": "react-scripts eject" 
    19. 
  
  
  
  19.   }, 
    20. 
  
  
  
  20.   "eslintConfig": { 
    21. 
  
  
  
  21.     "extends": [ 
    22. 
  
  
  
  22.       "react-app", 
    23. 
  
  
  
  23.       "react-app/jest" 
    24. 
  
  
  
  24.     ] 
    25. 
  
  
  
  25.   }, 
    26. 
  
  
  
  26.   "browserslist": { 
    27. 
  
  
  
  27.     "production": [ 
    28. 
  
  
  
  28.       ">0.2%", 
    29. 
  
  
  
  29.       "not dead", 
    30. 
  
  
  
  30.       "not op_mini all" 
    31. 
  
  
  
  31.     ], 
    32. 
  
  
  
  32.     "development": [ 
    33. 
  
  
  
  33.       "last 1 chrome version", 
    34. 
  
  
  
  34.       "last 1 firefox version", 
    35. 
  
  
  
  35.       "last 1 safari version" 
    36. 
  
  
  
  36.     ] 
    37. 
  
  
  
  37.   } 
    38. 
  
  
  
  38. } 
    39.

庖丁解牛，深入分析。

Name：react项目的名称

需要满足以下约定：

① name 应使用小写

② name应该少于214字符

③ 可以使用- 或者_

Version: 当前项目的版本，需要满足以下约定

x.x.x - major.minor.patches

Private: 这是一个重要的属性，主要用于防止私有代码库的意外发布。如果为true，则不会发布到公开的npm生态系统。

Dependencies：包含一系列的node module + 生产环境依赖的版本，上面的例子中，我们需要以下版本的依赖：

 
 
 
    
  
  
  
  1. "react": "^17.0.2", 
    2. 
  
  
  
  2. "react-dom": "^17.0.2", 
    3. 
  
  
  
  3. "react-scripts": "4.0.3", 
    4.

react版本：^17.0.2，意味着npm将安装与“17.x.x”匹配的最新版本。

Scripts: 包含常见的[react命令脚本]的别名。

 
 
 
    
  
  
  
  1. "scripts": { 
    2. 
  
  
  
  2.     "start": "react-scripts start", 
    3. 
  
  
  
  3.     "build": "react-scripts build", 
    4. 
  
  
  
  4.     "test": "react-scripts test", 
    5. 
  
  
  
  5.     "eject": "react-scripts eject" 
    6. 
  
  
  
  6.   } 
    7.

npm start将会执行 react-scripts start

Browserlist: 这个属性用于在不同的前端工具之间共享目标浏览器和node.js版本。

eslintconfig:该属性包括Create React App使用的可共享ESLint配置。

devDependeties: 这个属性不在上面的示例代码中，但它非常重要，因此还是要啰嗦它：这个属性列出了开发和测试所需的包。

以上是package.json文件中最重要的几个属性，下面啰嗦一下版本语法：x.x.x： major.minor.patches

版本语法中有些特殊符号：

1. ~: Update patch release only. Eg. If you set ^17.0.2 then 17.0.3 will be ok but 18.0.2 will not work.

2. ^: Can update patch + minor. Not major version

3. *: Can update all three major + minor + patches versions

4. >: Higher version than specify a version.

5. >=: Equal and Higher than specify a version

6. <: Less than specifying a version

7. <=: Less or equal to specify a version

这就是快闪一：package.json知多少 的全部，现在是不是对于package.json文件的作用有了更深刻的认识了图片。

当前标题：大前端快闪：Package.Json文件知多少？
分享网址：http://www.mswzjz.com/qtweb/news12/200362.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

自适应网站知识

各行业网站

高县网站建设　　 　成都微信公众号开发　　 　成都主机托管　　 　云主机　　 　乐山服务器托管　　 　ssl数字证书　　 　简阳电信机房　　 　巴中倍辉科技　　 　网站制作公司　　 　高端网站设计　　 　成都移动主机托管　　 　四川锦华橡塑　　 　成都服务器运维　　 　叙永网站建设　　 　企业网站设计　　 　成都网站建设　　 　旅游网站建设方案　　 　青羊区雕琢时光　　 　化妆品企业网站建设方案　　 　成都网站托管