本文转载自微信公众号「精益码农」,作者有态度的马甲。转载本文请联系精益码农公众号。
最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端、工程化、HTTP交互倒也还能做到柳暗花明。
于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读者构建完整的全栈技能体系。
快闪一:paakage.json文件知多少
如果你使用了nodejs、npm项目、Angular项目等,你都会用到package.json文件,package.json文件是项目的清单文件,package.json在react项目开发和部署阶段扮演了重要角色。
Package.json = 项目元信息+ 依赖的组件版本+ 脚本
请看下面的package.json示例文件:
- {
- "name": "first-react-app",
- "version": "0.1.0",
- "private": true,
- "dependencies": {
- "@testing-library/jest-dom": "^5.14.1",
- "@testing-library/react": "^11.2.7",
- "@testing-library/user-event": "^12.8.3",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-scripts": "4.0.3",
- "web-vitals": "^1.1.2"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
- }
庖丁解牛,深入分析。
Name:react项目的名称
需要满足以下约定:
① name 应使用小写
② name应该少于214字符
③ 可以使用- 或者_
Version: 当前项目的版本,需要满足以下约定
x.x.x - major.minor.patches
Private: 这是一个重要的属性,主要用于防止私有代码库的意外发布。如果为true,则不会发布到公开的npm生态系统。
Dependencies:包含一系列的node module + 生产环境依赖的版本,上面的例子中,我们需要以下版本的依赖:
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-scripts": "4.0.3",
react版本:^17.0.2,意味着npm将安装与“17.x.x”匹配的最新版本。
Scripts: 包含常见的[react命令脚本]的别名。
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- }
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文件的作用有了更深刻的认识了图片。