今天就来看看前端管家的package.json文件相关的配置。充分了解这些配置，有助于我们提高开发效率，规范我们的项目。在每个前端项目中，都有一个package.json文件，它是项目的配置文件。常见配置包括配置项目启动、打包命令、声明依赖包等。package.json文件是一个JSON对象，对象的每个成员都是当前项目的一个设置。当我们新建一个项目时，脚手架往往会为我们初始化一个package.jaon配置文件，这个配置文件位于项目的根目录下。{"name":"my-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-scriptsstart","build":"react-scriptsbuild","test":"react-scriptstest","eject":"react-scriptseject"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","notdead","notop_miniall"],"development":["last1chromeversion","last1firefoxversion","last1safariversion"]}}当我们克隆一个新的时候项目到达本地后，需要执行npminstall(yarninstall)命令安装项目所需的依赖文件，执行该命令时会根据package.json中的配置信息自动下载所需的模块文件，即配置项目需要的运行和开发环境，必填属性package.json中最重要的两个字段是name和version，都是必填项，如果没有，则npminstall命令无法正常执行.npm规定package.json文件以名称和版本号作为唯一标识，namename很好理解，就是项目的名字，是一个字符串，命名name字段的时候，需要付出代价注意以下几点：长度名称必须小于或等于214个字符，不能以“.”和“_”开头，不能包含大写字母（这是因为包在npm上发布时，会根据这个属性得到自己的URL，所以它不能包含非URL安全字符（非URL安全））；名称可以作为参数传递给require("")以导入模块，因此名称应尽可能简短和语义化；该名称不能与其他模块名称重复，可以使用npmview命令查询模块名称是否重复，如果不重复则提示404：versionversion字段表示项目包的版本号，是一个字符串。每个项目发生变更，即将发布后，必须同步变更项目的版本号。版本号的使用规范如下：版本号的命名遵循SemanticVersion2.0.0规范，格式为：主版本号.次版本号.修订号。通常，修改主版本号是为了进行较大的功能性改动，修改次版本号是指增加新的功能，修改修订版号是指修复一些bug；如果一个版本变化较大，不稳定，可能符合预期的兼容性要求，需要发布更早的版本，版本号后面会加上之前的版本，点号分隔的标识符和版本编译信息以“-”连接：内测版（alpha）、公测版（beta）和候选版（rc，即releasecandidate）。描述信息package.jaon有五个与项目包描述信息相关的配置字段。我们分别看一下这几个字段的含义。description描述字段用来描述这个项目包，是一个字符串，可以让其他开发者在npmsearch中找到我们的项目包。keywordskeywords字段是一个字符串数组，代表这个项目包的关键词。和描述一样，是用来增加项目包的曝光度的。authorauthor，顾名思义就是作者，表示项目包的作者。它有两种形式，一种是字符串形式："author":"CUGGZ(https://juejin.cn/user/3544481220801815)"，另一种是对象形式："author"：{"name":"CUGGZ","email":"xxxxx@xx.com","url":"https://juejin.cn/user/3544481220801815"}contributorsContributors代表项目包的贡献者，而The与author不同的是，这个字段是一个包含所有贡献者的数组。homepagehomepage是项目的首页地址，是一个字符串。repositoryrepository表示存放代码的仓库地址。bugsbugs表示提交问题的项目地址，该字段是一个对象，可以添加提交问题的地址和反馈邮箱。依赖配置通常，我们的项目会依赖一个或多个外部依赖包。根据依赖包的不同用途，可以配置在以下五个属性下：dependencies、devDependencies、peerDependencies、bundledDependencies、optionalDependencies。dependencies字段声明了项目生产环境需要的依赖。当使用npm或yarn安装npm包时，npm包会自动插入到该配置项中。devDependencies声明了开发阶段需要的依赖包，如Webpack、Eslint、Babel等，辅助开发。它们与依赖项的不同之处在于它们只需要安装在开发设备上而无需在生产环境中运行代码。打包上线时不需要这些包，所以可以在devDependencies中添加这些依赖。这些依赖在本地指定npminstall时仍然会被安装和管理，但不会在生产环境中被安装。peerDependencies在某些情况下，我们的项目和我们所依赖的模块同时依赖于另一个模块，但是我们所依赖的版本不同。比如我们的项目依赖1.0版本的模块A和模块B，而模块A本身又依赖2.0版本的模块B。大多数时候，这不是问题，B模块的两个版本可以共存，同时运行。但是，有一种情况会出现这种依赖性会暴露给用户的问题。最典型的场景就是插件，比如模块A是模块B的插件，用户安装的B模块是1.0版本，但是A插件只能和B模块一起使用版本2.0。这时候如果用户把B的1.0版本的实例传给A，就会出现问题。所以需要一种机制在模板安装的时候提醒用户，如果A和B一起安装，那么B一定是2.0的模块。OptionalDependencies如果在找不到包或包安装失败时需要npm继续运行，可以将包放在optionalDependencies对象中。optionalDependencies对象中的包会覆盖dependencies中的同名包，所以你只需要在一个地方设置一下即可。bundledDependencies上面几个依赖相关的配置项是一个对象，bundledDependencies配置项是一个数组，里面可以指定一些模块，发布包的时候会把这些模块打包在一起。需要注意的是，该字段数组中的值必须是dependencies和devDependencies中声明的包。engines我们在维护一些老项目的时候，可能会对npm包的版本或者Node.js的版本有特殊的要求。如果不满足条件，项目可能无法运行。为了让项目开箱即用，可以在引擎字段中指定特定的版本号。脚本配置scripts是package.json中内置的脚本入口，是key-value键值对配置，key是可执行命令，可以通过npmrun执行。除了运行基本的脚本命令外，还可以结合pre和post完成前后操作。先看一组脚本："scripts":{"dev":"nodeindex.js","predev":"nodebeforeIndex.js","postdev":"nodeafterIndex.js"}通过配置脚本property，可以定义一些常用的操作命令："scripts":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","start":"npmrundev","unit":"jest--configtest/unit/jest.conf.js--coverage","test":"npmrununit","lint":"eslint--ext.js,.vuesrctest/unit","build":"nodebuild/build.js"}这些脚本是命令行应用程序。它们可以通过调用npmrunXXX或yarnXXX来运行，其中XXX是命令的名称。例如：npmrundev。我们可以为命令使用任何名称，脚本可以是任何动作。config字段用于配置脚本运行时的配置参数。如果运行npmrunstart，端口字段将映射到npm_package_config_port环境变量。如下图："config":{"port":3000}console.log(process.env.npm_package_config_port)//3000file&directorymain字段用于指定加载的入口文件，在两个浏览器中都可以使用和节点环境。如果我们将项目发布为npm包，那么在使用require导入npm包时，返回的是main字段中列出的文件的module.exports属性。如果不指定该字段，则默认为项目根目录下的index.js。如果没有找到，就会报错。browser字段可以定义npm包在浏览器环境下的入口文件。如果npm包只在web端使用，严禁在服务端使用，使用浏览器定义入口文件。module字段可以定义npm包的ESM规范的入口文件，在浏览器环境和node环境下都可以使用。如果npm包导出的是ESM包，使用module定义入口文件。bin字段用于指定每个内部命令对应的可执行文件的位置："bin":{"someTool":"./bin/someTool.js"}这里，someTool命令对应的可执行文件为someTool在bin目录.js中，someTool.js会创建一个符号链接node_modules/.bin/someTool。由于node_modules/.bin/目录在运行时会被添加到系统的PATH变量中，所以在运行npm时可以通过命令直接调用这些脚本，不需要路径。因此，可以简写如下：scripts:{start:'./node_modules/bin/someTool.jsbuild'}//简写scripts:{start:'someToolbuild'}package.json中提供了以上配置package一个映射到本地文件名的bin字段，然后npmpackage会将这个文件链接到prefix/fix以进行全局导入。或者链接到本地??的node_modules/.bin/文件，以便在本项目中使用。files配置是一个数组，用于描述安装npm包作为依赖包时需要指定的文件列表。当发布npm包时，files指定的文件会被推送到npm服务器。如果指定文件夹，则提交该文件夹下的所有文件。man命令是Linux中的一个帮助命令，通过它可以查看Linux中的命令帮助、配置文件帮助、编程帮助等信息。如果node.js模块是全局命令行工具，可以在package.json中使用man属性指定man命令要查找的文档地址。directories字段用于指定项目的目录。node.js模块基于CommonJS模块化规范实现，需要严格遵循CommonJS规范。除了包项目描述文件package.json必须包含在模块目录中。publish配置私有字段可以防止我们不小心将私有库发布到npm服务器。只需将该字段设置为true。preferGlobal字段表示当用户没有将该模块安装为全局模块时，如果设置为true，将显示警告。它并没有真正阻止用户进行部分安装，只是提示用户以防止误解。publishConfig配置会在模块发布时生效，用于设置发布时一些配置项的集合。如果不想让模块默认标记为最新，或者不想发布到公共仓库，可以在这里配置标签或仓库地址。更详细的配置请参考npm-config。os字段允许我们设置npm包可以在哪个操作系统上使用以及不能在哪个操作系统上使用。如果我们想让自己开发的npm包只在linux上运行，为了避免不必要的异常，建议使用windows系统的用户不要安装。这时候我们就可以使用os来配置cpu了。配置与OS配置类似，CPU可以更准确。限制用户的安装环境：license字段用于指定软件的开源协议。开源协议表达了他人获得代码后拥有的权利，可以对代码进行哪些操作，哪些操作是被禁止的。常见协议如下：MIT：只要用户在他们的项目副本中包含版权声明和许可声明，他们就可以用你的代码为所欲为，你不需要承担任何责任。Apache：类似于MIT，但也包括与向用户提供专利许可的贡献者相关的术语。GPL：当修改项目代码的用户重新分发源代码或二进制代码时，必须发布他们的相关修改。third-partyconfigurationtypings字段用于指定TypeScript的入口文件。eslint的配置可以写在单独的配置文件.eslintrc.json中，也可以写在package.json文件的eslintConfig配置项中。Babel用于指定Babel的编译配置。unpkg可以通过这个字段让npm上的所有文件都开启CDN服务。CND服务由unpkg提供。lint-staged是一个在Git临时文件上运行linters的工具。配置后，每次修改一个文件，对所有文件进行lint检查，一般与gitHooks配合使用。gitHooks用于定义在提交前执行ESlint检查的钩子。执行lint命令后，会自动修复暂存区的文件。修复后的文件不会保存到暂存区，所以需要使用gitadd命令将修复后的文件重新添加到暂存区。执行完pre-commit命令后，如果没有报错，就会执行gitcommit命令。browserslist字段用于通知支持哪些浏览器和版本。Babel、Autoprefixer和其他工具使用它来向目标浏览器添加所需的polyfill和回退。
