package.json 每天都会用到,但是你真的对里面的某些字段很了解吗,本文将带你了解其中经常使用的一些字段
# repository/homepage
项目的仓库地址,会显示在 npm package 右侧
{ | |
"repository": { | |
"type": "git", | |
"url": "git+https://github.com/jerrywu001/sandpack-vue3.git" | |
}, | |
"homepage": "https://sandpack-vue3.netlify.app", | |
} |
# main/module/types
{ | |
"main": "./dist/index.js", | |
"module": "./dist/index.mjs", | |
"types": "./dist/index.d.ts", | |
} |
- main
对应 commonjs 引入方式的程序入口文件
const { Sandpack } = require('sandpack-vue3); |
- module
对应 esmodule 引入方式的程序入口文件
import { Sandpack } from 'sandpack-vue3'; |
- types
描述了程序中所有组件以及变量的类型定义
# exports
# 介绍
exports 定义了自定义导出规则,可以理解为路径映射
{ | |
"exports": { | |
".": { | |
"types": "./dist/index.d.ts", | |
"import": "./dist/index.mjs", | |
"require": "./dist/index.js" | |
}, | |
"./unstyled": { | |
"types": "./dist/unstyled.d.ts", | |
"import": "./dist/unstyled.mjs", | |
"require": "./dist/unstyled.js" | |
} | |
}, | |
} |
# 实战案例
测试了
vite
|@vue/cli
|nuxt3
|vitepress
,保证了解决方案的有效性。
import { Sandpack } from 'sandpack-vue3'; | |
import { Sandpack as UnstyledPack } from 'sandpack-vue3/unstyled'; | |
import 'sandpack-vue3/dist/styles.css'; |
以上的案例代码存在一些问题
- build 过程,无法识别'sandpack-vue3/dist/styles.css' 路径
- 解决方案:
{ | |
"exports": { | |
".": { | |
"types": "./dist/index.d.ts", | |
"import": "./dist/index.mjs", | |
"require": "./dist/index.js" | |
}, | |
"./unstyled": { | |
"types": "./dist/unstyled.d.ts", | |
"import": "./dist/unstyled.mjs", | |
"require": "./dist/unstyled.js" | |
}, | |
+ "./*": [ | |
+ "./*", | |
+ "./*.d.ts" | |
+ ] | |
}, | |
} |
- ts 无法识别'sandpack-vue3/unstyled' 路径
- 解决方案 (增加的两段内容,缺一不可!):
特别需要注意的是:dist 目录下需要保证 unstyled.d.ts 存在,并且需要和 exports 中子路径名称一致,否则依然无法找到路径
{ | |
"exports": { | |
".": { | |
"types": "./dist/index.d.ts", | |
"import": "./dist/index.mjs", | |
"require": "./dist/index.js" | |
}, | |
"./unstyled": { // <- 需和 dist 下 unstyled.d.ts 文件名称一致 | |
"types": "./dist/unstyled.d.ts", // 可以省略,但不建议 | |
"import": "./dist/unstyled.mjs", | |
"require": "./dist/unstyled.js" | |
}, | |
+ "./*": [ | |
+ "./*", | |
+ "./*.d.ts" | |
+ ] | |
}, | |
+ "typesVersions": { | |
+ "*": { | |
+ "*": [ | |
+ "./dist/*", | |
+ "./*" | |
+ ] | |
+ } | |
}, | |
} |
# type 和 exports/main/module 的关系
首先我们需要理解 type 字段的含义:
当设置为 “module” 时,所在项目中(不包含 node_modules)所有.js 文件将被视为 EsModule 类型文件。
如果省略 “type” 字段或设置为 “commonjs”,则项目中(不包含 node_modules)所有.js 文件都被视为 CommonJS 类型文件。
# type: "module"
此时.js 文件将被视为 esmodule,并且我们需要将 commonjs 文件显示声明为.cjs
改造配置如下:
{ | |
..., | |
"type": "module", | |
"main": "./dist/index.cjs", | |
"module": "./dist/index.js", | |
"types": "./dist/index.d.ts", | |
"exports": { | |
".": { | |
"types": "./dist/index.d.ts", | |
"import": "./dist/index.js", | |
"require": "./dist/index.cjs" | |
}, | |
"./unstyled": { | |
"types": "./dist/unstyled.d.ts", // 可以省略,但不建议 | |
"import": "./dist/unstyled.js", | |
"require": "./dist/unstyled.cjs" | |
}, | |
"./*": "./*" | |
}, | |
... | |
} |
# type: "commonjs" 或不设置
此时.js 将被视为 commonjs,并且我们需要将 esmodule 文件显示声明为.mjs/.esm.js (实际上你声明成.xxx.js 也可以,甚至.xxx 也行,但不建议)
改造配置如下:
{ | |
..., | |
"main": "./dist/index.js", | |
"module": "./dist/index.mjs", | |
"types": "./dist/index.d.ts", | |
"exports": { | |
".": { | |
"types": "./dist/index.d.ts", | |
"import": "./dist/index.mjs", | |
"require": "./dist/index.js" | |
}, | |
"./unstyled": { | |
"types": "./dist/unstyled.d.ts", // 可以省略,但不建议 | |
"import": "./dist/unstyled.mjs", | |
"require": "./dist/unstyled.js" | |
}, | |
"./*": "./*" | |
}, | |
... | |
} |
# main/module 和 exports 的关系
# exports 省略场景
如果没有子路径,比如 m 没有 my-package/xxx
,只是简单的 my-package
, 那配置可以简化为:
{ | |
..., | |
"main": "./dist/index.js", | |
"module": "./dist/index.mjs", | |
"types": "./dist/index.d.ts", | |
... | |
} |
# exports 不可省略场景
存在子路径,此时需要添加 exports 进行路径映射,并且 export 中的 "." 配置会具有较高优先级,所以 "." 对应的路径必须是真实存在的(这么一说,即使你在 main/module 中的路径写错了,也没关系,感兴趣的可以自行尝试一下)。
# 子路径不想放根目录下??
有时候我们有想把子路径文件放单独文件夹的想法,可行吗?答案是,可以的,但是我们必须保证 dist 根目录下 xxx.d.ts
真实存在,除它之外的其他文件可以单独文件夹。