记录--工程化第一步这个package.json要真的搞明白才行

工程化最开始就是package.json开始的，很多人学了很多年也没搞清楚这个为什么这么神奇，其实有些字段是在特定场景才有效的，那每个属性的适用场景和作用是什么，又牵扯很多知识点，今天先解读一些常见的属性，关注我，后期在遇到特定场景也会再逐步的补充这些属性，只有真正清楚知道每个自动的属性和场景你才能真正使用它得心应手，也才能真正掌握并帮助你解决你的问题。

创建

一个package.json 你可以使用npm init 按指令创建，也可以通过npm init -y来快速创建，当然也可以手动来创建，那现在我们创建一个。 package.json

{
  "name": "package-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

这个是原装的属性，当然还有一些额外的场景才有的，接下来我们来逐步分析：

常用属性

这些属性没有没有太复杂，但还是要仔细看看每个都可以做什么，适用于什么场景，如何去使用和配置

name

package.json 中最重要字段之一就是名称name 字段，有人的说为什么我没有配置也没有影响我项目的正常运行呢？这个是因为你没有发布npm 包，这个name就是你发布到npm的包名，如果你不打算发布你的包到npm上这个是可以省略的。

当然这个名称也不是随便乱起的，它也有一定的规则，否则有警告的如下：

字符串与 "^(?:(?:@(?:[a-z0-9-*~][a-z0-9-*._~]*)?/[a-z0-9-._~])|[a-z0-9-~])[a-z0-9-._~]*$" 的模式不匹配。

name的规则如下：

• 名称必须少于或等于 214 个字符。 这包括范围包的范围。
• 范围包的名称可以以点或下划线开头。 没有范围是不允许的。
• 新包的名称中不得包含大写字母。
• 该名称最终成为 URL、命令行参数和文件夹名称的一部分。 因此，名称不能包含任何非 URL 安全字符

version

这个是版本，跟name 字段差不多，基本是一起的，因为它们共同构成一个假定完全唯一的标识符，如果你不发布包也是这个省略这个字段的，当然这个字段值也不是随意写的，它完全基于符合语义化版本（Semantic Versioning）来管理依赖的版本，所以版本号的更新需要符合语义化版本规范，简单总结：可以被 semver 包可解析的，当然你也可以使用这个semver 进行版本的操作,具体可以看我的另一篇版本号文章版本号

keywords

这个也是发布到npm 上才有用的，它的作用也是别人可以通过搜索来查找你的包，或是通过npm search xxx开查找你的包 如下,我有两个运行时的包处理react preact 的className的，可以看看查出了什么：

PS D:\lucky-file\package-demo> npm search 'react runtime clsx'        
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
react-auto-clsx           |                      | =crazy-code     | 2023-10-10 | 1.1.0    | react vite webpack className clsx runtime
react-runtime-clsx        |                      | =zsh-yzy        | 2023-11-30 | 0.0.1    | react vite webpack className clsx runtime
react-auto-classnames     | JSX runtime for…     | =meowtec        | 2022-09-30 | 1.0.2    | react classnames clsx jsx-runtime
PS D:\lucky-file\package-demo> 

funding

如果你不开源，对资金没有要求或有其它渠道可以不使用，这个是在npm 6.13.0添加了funding命令,针对开源者，让维护 npm 的开发人员，为有意愿的捐赠者指明捐赠平台。在 package.json 文件中添加了一个funding字段，指向在线捐赠服务的 url，如 Patreon、Open 或者其他支付网站，并可以通过npm fund命令列出这些捐赠平台及其 url。

"funding": [
    {
      "type": "patreon",
      "url": "http://XXXXXX"
    },
    "http://XXXXX",
    {
          "type": "open",
      "url": "https://XXXXXX"
    }
  ]

files

项目在进行 npm 发布时，可以通过 files 指定需要跟随一起发布的内容来控制 npm 包的大小，避免安装时间太长，比如我们包体有很多文件，但我们只想把dist放进去，其他src,test文件并不想放在包体中，可以使用这个字段

但无论设置如何，总是会包含某些文件：

• package.json
• README
• CHANGES / CHANGELOG / HISTORY
• LICENSE / LICENCE
• NOTICE
• “main”字段中的文件 相反，某些文件总是被忽略：
• .git
• CVS
• .svn
• .hg
• .lock-wscript
• .wafpickle-N
• .*.swp
• .DS_Store
• ._*
• npm-debug.log
• .npmrc
• node_modules
• config.gypi
• *.orig
• package-lock.json

当然除了files 也有其它方式可以来忽略文件进入包体，我们先看一下我们什么也不处理的文件格式

1. 添加.gitignore文件

src/*
example/*

我们发布之后在看一下文件结构，只有index.js 也就是main字段指向的index.js还有package.json两个文件

2. 添加.npmignore 文件

src/*
example

同样我们发布之后看一下文件结构，如下图所示：

 "repository": {
    "type": "git",
    "url": "https://github.com/xxxxx",
    "directory": "xxxx/xxx"
  }

当然你也可以直接写字符串

"repository":"https://github.com/xxxxx/xxxx"

config

配置对象可用于设置在升级后持续存在的包脚本中使用的配置参数

  "config": {
    "type": "chrome"
  },

我们在index.js中进行打印一下

console.log(process.env.npm_package_config_type)

此时如果你直接node index.js 你会发现打印的是个undefined，我们在将其放在scripts中：

 "scripts": {
    "start": "node index.js"
  },

"dependencies": {
    "lucky-package-demo": "*"
}

"devDependencies": {
    "vite": "4.3.0"
}

"devDependencies": {
    "react": "17.0.2",
    "vite": "4.3.0"
},
"peerDependencies": {
    "react":">16.8.0 <18.0.0"
}

dependencies:
- lucky-package-demo
+ lucky-package-demo 0.0.10
- react
+ react 17.0.1 (18.2.0 is available)

dependencies:
- lucky-package-demo
+ lucky-package-demo 0.0.10
- react
+ react 16.8.0 (18.2.0 is available)

 WARN  Issues with peer dependencies found
.
└─┬ lucky-package-demo 0.0.10
  └── ✕ unmet peer react@">16.8.0 <18.0.0": found 16.8.0

 "peerDependenciesMeta":{
    "react":{
      "optional":true
    }
  }

npm i -S lucky-package-demo

如果设置成optional:false中，在project-demo中安装lucky-package-demo后将会自动安装符合范围的react的包

bundleDependencies

npm的命令 -B, --save-bundle

"dependencies": {
    "react-runtime-clsx": "0.0.1"
 },
"bundleDependencies": [
    "react-runtime-clsx"
]

project-demo
----node_modules
-------lucky-package-demo
-----------node_modules
---------------react-runtime-clsx //这个是bundleDependencies配置的
---------------clsx  这个是react-runtime-clsx的依赖

npm i -O react-runtime-clsx
// package-demo package.json 如下：
"optionalDependencies": {
    "react-runtime-clsx": "0.0.1"
}

"optionalDependencies": {
    "react-runtime-clsx": "0.0.1"
  }

本文转载于:

https://juejin.cn/post/7315606159742058530

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。