package.json小记

人间二两风
626 阅读6分钟

写这篇小记的原因是自己在写date-picker组件时需要引入swiper，用到的是swiper8.1.5。在引入过程中我按照node_modules中的目录顺序(swiper.scss位于swiper的根目录下）按照如下方式引入到我的main.js中：

import "swiper/swiper.scss";

出现如下报错

ERROR in ./src/App.js 12:0-28
Module not found: Error: Package path ./swiper.scss is not exported from package /Volumes/D/exercise/reactproject/node_modules/swiper (see exports field in /Volumes/D/exercise/reactproject/node_modules/swiper/package.json)

webpack compiled with 1 error and 1 warning

所以我就跟随提示打开了swiper的package.json文件，不打开不知道一打开吓一跳，里面的内容非常多。随后我想起曾经面试时有问过package.json的内容和作用，面试完一直没有仔细了解。所以借着机会找了很多文章，了解了package.json的组成。

介绍

package.json是一个包或一个项目的说明目录。我们在项目中所引入的每一个包都是从npm上下载并管理的，这些包是谁做的？需要什么环境？用的时候需要注意什么？用的时候需要安装什么？怎么用？出问题了怎么办？这些都是我们在使用过程中可能遇到的问题。

package.json可以理解为是一个人的档案，详细的记录了一个包的名称name、简介description、年龄version、父母author，生病了怎么修bug、家住哪里repository、依赖谁dependencies等等。

他的主要结构如下图：

1653750165225.jpg

(上图引自博主CUGGZ的文章：关于前端大管家 package.json，你知道多少？，如有侵权可删除）

因此，就像我们找工作或是交朋友一样，当拿到一个新的项目或者是使用一个新的包的时候，想要最好的初步了解他就是先看他的package.json.

基本信息

  1. name: 包的名字（不能有大写字符）
  2. version：包的版本号
  3. description：包的描述、简介
  4. keywords: 关键词，方便别人搜索到他
  5. author：作者是谁，谁写了这个包
  6. license：许可身份证
  7. repository：这个包所在的仓库地址，也就是他的家，可以通过这个地址找到他
  8. homepage：主页，有的包可能有自己的官网来帮助大家使用它
  9. private：是否私有，也就是这个包是属于个人的还是开源的

常用信息

dependencies与devDependencies

dependencies——运行依赖

运行依赖指的是项目运行过程中所依赖的包，例如飞机必须要依赖发动机才可以飞行。

devDependencies——开发依赖

开发依赖是在开发过程中所用到的包，在项目运行过程中用不到，是为了帮助更好的开发代码所产生的一些辅助软件，例如typeScript，eslint等。好比飞机的跑道，在起飞前需要，起飞后就不需要了。

为什么要分开

这里也许有刚入行的朋友会像我当初一样发出疑问，搞这么麻烦干什么直接合并到一起不就好了为什么要分开？分开是因为一个包或项目最后被打包到服务器上运行，包的大小会影响运行速度，而且有的地方类似于小程序只可以有2M，所以必须要缩减上线包的体积。

安装依赖

当安装开发依赖时使用npm i xx --d或者npm i xx -D, 它就会出现到开发依赖中。当安装开发依赖时使用npm i xx --或者npm i xx -S, 它就会出现到运行依赖中。 这里有一个我踩了好久的坑，千万不要写成npm i xx -s，这样式写入不进package.json的。

scripts

这个属性是用到最多的，它表示如何运行这个项目或者这个包，类似如下。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  • 前面的start、build、test等key值是他的启动项，后面的value值时对应的node命令。当在启动项前面加上npm run 运行时，就会运行后面对应的指令。
  • 我们可以通过在指令后面加上 --port、--hot等一些配置来设置这个项目启动时的端口号、是否热更新、以及所同时启用的插件如v-console。
  • 不同的项目scripts有不同的配置方式，有的项目通过一条指令启动整个项目打开的是index页面或者error页面，而有的项目将每一个单页的启动都写在scripts中，这样启动后打开的就是对应的页面
  • 但是通常这个位置都会有几个不同环境的启动方式，例如上面的start和test两种环境。以及打包指令build。

exports

这个指令主要用来设置这个包的导出项，在项目中通常不会配置但是在一些公用包里面会配置默认导出项，来供不同环境不同需求的人按需引入。

文章开头所提到的引入时所报的错误提示就和这里有关。错误提示翻译过来为：Package path ./swiper.scss并没有从包里面被导出，你可以查看 xxxxxx（包package.json的路径）下的exports导出了什么。以下是swiper包package.json的部分exports导出：

"exports": {
    ".": "./swiper.esm.js",
    "./core": "./swiper.esm.js",
    "./bundle": "./swiper-bundle.esm.js",
    "./css": "./swiper.min.css",
    "./css/bundle": "./swiper-bundle.min.css",
    "./less": "./swiper.less",
    "./less/a11y": "./modules/a11y/a11y.less",
    "./less/autoplay": "./modules/autoplay/autoplay.less",
    "./less/controller": "./modules/controller/controller.less",
    "./less/scrollbar": "./modules/scrollbar/scrollbar.less",
    "./less/thumbs": "./modules/thumbs/thumbs.less",
    "./less/virtual": "./modules/virtual/virtual.less",
    "./less/zoom": "./modules/zoom/zoom.less",
    "./scss": "./swiper.scss",
    "./scss/a11y": "./modules/a11y/a11y.scss",
    "./scss/autoplay": "./modules/autoplay/autoplay.scss",
    "./scss/controller": "./modules/controller/controller.scss",
    "./react": "./react/swiper-react.js",
    "./vue": "./vue/swiper-vue.js",
    "./svelte": "./svelte/swiper-svelte.js",
    "./types": "./types/index.d.ts",
    "./package.json": "./package.json"
  },

可以看到swiper提供了非常丰富的文件导出，在最中间的位置可以看到scss的引入方式："./scss": "./swiper.scss",于是我将代码中的引入方式修改为import "swiper/scss";果然就不报这个错误了，而且所写的swiper也有了样式，说明文件被导入了进来。

三方配置

也可以在这里为项目启动提供三方插件的配置指令，例如

  1. 在提交代码commit之前检查代码是否符合eslint的规则
  2. 在提交代码commit之前检查代码是否有语法错误，不允许错误的代码提交
  3. 在提交代码时统计代码行数

其他

  • browser：指定该模板供浏览器使用的版本
  • engines：指定包或项目运行的npm或node版本，一些老旧项目使用最新的node或npm是无法运行的，必须要回退到指定的版本才可以。
  • os：指定你的操作系统
  • cpu：指定你的cpu环境

参考文档

除上述提到的基本的和常用的之外，还有一些少见的配置，可以参考其他大神写的文章，非常详细。

avatar
文章
阅读
粉丝