跳到主要内容

package.json理解

package.json配置​

private​

  • 如果你在你的package.json中设置了“private”：true，那么npm将拒绝发布它。 这是防止私人存储库意外发布的一种方法。【防止意外发布】

workspaces:​

  • yarm提供的，可共享node_mudules

browserslist:​

  • 指定了项目的目标浏览器的范围, 这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。 【可以提供统一的配置。即共享项目中的目标浏览器环境信息】

  • 参考vue-cli的browserslist配置

js
  "browserslist": [
     "> 1%",  //支持市场份额大于 1% 的浏览器。
     "last 2 versions", //支持各类浏览器最近的2个版本，当然这里的 2 是可变的数字
     "not dead"  //not 是逻辑非操作符，即对 dead取反，而浏览器被认为是 dead 条件是：最新的两个版本中发现其市场份额已经低于 0.5% 并且 24 个月内没有任务官方支持和更新了
   ]

resolutions​

  • yarn提供的resolutions统一依赖版本字段

license​

译为许可证【开源协议】。理解为协议或版权声明，违反协议的后果就是商业纠纷

main​

  • 指向库的入口文件
  • 指向源代码的入口
  • 指向打包后的入口
  • 作用：定义 CommonJS 模块的默认入口文件

module​

  • 定义了 ESM 规范的入口文件，browser 环境和 node 环境均可使用

exports​

  • exports定义了自定义导出规则，可以理解为路径映射

  • 控制包的模块入口

  • ts类型需要配置typesVersions

场景：

  • 结合Monorepo, 子包的 exports 字段与 workspace:* 依赖的结合，实现了 模块入口的精细化控制 和 本地依赖的实时同步
json
"exports": {
    ".": "./src/index.ts"
  },
"typesVersions": {
    "*": {
      "*": ["./src/*"]
    }
  },

typesVersions​

  • 当包通过 exports 字段定义 多入口 或 条件导出 时，TypeScript 无法仅通过传统的 types 或 @types 包推断出所有导出路径对应的类型声明文件，因此可通过typesVersion来控制类型
  • typesVersions 是一个键值对对象，键为 TypeScript 版本范围，值为 路径映射规则
json
"typesVersions": {
  "*": {              // TypeScript 版本范围
    // *  匹配包的所有导出路径  
    "*": ["./src/*"]  // 路径映射规则
  }
}
  • 根据exports 字段联动配置
json
{
  "exports": {
    ".": "./dist/index.js",
    "./utils": "./dist/utils.js"
  },
  "typesVersions": {
    "*": {
      ".": ["./dist/types/index.d.ts"],
      "./utils": ["./dist/types/utils.d.ts"]
    }
  }
}

types​

  • 定义了类型文件声明

files​

  • 描述你 npm publish 后推送到 npm 服务器的文件列表，如果指定文件夹，则文件夹内的所有内容都会包含进来。我们可以看到下载后的包是下面的目录结构：

另外，你还可以通过配置一个 .npmignore 文件来排除一些文件, 防止大量的垃圾文件推送到 npm, 规则上和你用的 .gitignore 是一样的。.gitignore 文件也可以充当 .npmignore 文件。

mian、module、exports区别​

  • 优先级：exports > module > main
  • 如果未定义任何字段，默认尝试加载 index.js。

scripts设置命令传参​

  • 通过$1、$2 等等占位符

package.json配置

json
"scripts": {
   "add:client": "bun add --cwd packages/client $1"
 }

执行

js
bun add:client lodash-es -D