package.json
- 参考
- stereobooster/package.json
- package.json fields explained
- npm package.json
- pnpm package.json
- https://nodejs.org/api/packages.html
- https://nodejs.org/api/packages.html#packages_package_entry_points
- https://webpack.js.org/guides/package-exports
- https://unpkg.com/browse/antd/package.json
- jsnext:main jsforum/jsforum#5
- style,sass twbs/bootstrap#12441
- used by postcss/postcss-import
- jspm - shim - https://jspm.org/
- stereobooster/package.json
{
// 主要包入口定义
"main": "lib/cjs/index.js",
"unpkg": "dist/pkg.development.js",
"types": "lib/types/index.d.ts",
"esnext": "lib/esnext/index.d.ts",
// 由 bundler 使用的 esm 入口
"module": "lib/esm/index.js",
// 导入单入口
// "exports": "./index.js"
// 导出多个入口
// 未 export 的为私有
// https://nodejs.org/api/esm.html#resolver-algorithm
"exports": {
// 定义后可自引用
".": "./main.mjs",
// import {} from 'pkg/foo'
"./foo": "./foo.js",
// 同时支持 cjs 和 esm
"import": "./index.mjs",
"require": "./index.cjs",
// typescript 4.7+
// https://github.com/microsoft/TypeScript/issues/33079
"types": "./index.ts",
// 指定路径
".": {
"types": "./lib/index.d.ts",
"default": "./lib/index.js"
},
// 替代
"./*": {
"types": "./lib/*/index.d.ts",
"default": "./lib/*/index.js"
},
// 允许访问
"./package.json": "./package.json"
},
// Node 条件 resolve
"node": "",
"node-addons": "",
"default": "",
"import": "",
"require": "",
// 社区定义的条件
"browser": "", // build for browser
"deno": "", // build for deno
"development": "", // dev build entrypoint - node --conditions=development main.js
"production": "", // prod build entrypoint
// 针对包的 import map
"imports": {
"#dep": {
"node": "dep-node-native",
"default": "./dep-polyfill.js"
}
},
// 可以 tree shaking
// /*#__PURE__*/
"sideEffects": true,
// 部分文件有 side effetcs
"sideEffects": ["./src/register.js", "*.css", "!(dist/(components|utils)/**)"]
}
- Node.js 12+ 可使用 exports 替代 main
- 现在的 node 可以在 require 时也使用 esm - 实时转译
- types = typings
- Community Conditions Definitions
{
"bundlewatch": {
"files": [
{
"path": "dist/*.production.min.js"
}
]
}
}
exports
- TypeScript 4.7 支持 exports
- TypeScript 5.0 支持 bundler moduleResolution
- --conditions,-C
node --conditions=development index.js
- 运行 node 指定 condition 会根据 condition resolve
- 常见类型
- types -
d.ts
- 一般放在最前面 - import - esm -
import
,import()
使用 ECMAScript module loader- 可能 mjs 结尾
- module
- 可能 js 结尾
- require - cjs
- node - cjs/esm
- node-addons - native C++ addons
- default - cjs/esm - 优先级低
- 注意
- 一般为 esm
- 一定要放在最后
- 不建议,因为不用环境处理逻辑不同
- 注意
- types -
- 扩展
- types - 优先级高
- demo
- browser - 例如 iife 格式
- development
- 有些为源码 - ts
- 但是有些环境不支持 ts - 例如 nextjs
- production
- https://nodejs.org/api/packages.html#conditional-exports
package.json
{
"sideEffects": "false",
"types": "src/.ts",
"main": "dist/cjs/index.js",
"module": "lib/esm/index.mjs",
"exports": {
".": {
"types": "./src/index.ts",
"import": "./lib/esm/index.mjs",
"default": "./lib/cjs/index.js"
},
"./src/": "./src/",
"./icons/*": "./lib/icons/*.json",
"./package.json": "./package.json"
}
}
- lukeed/resolve.exports
- resolve 逻辑实现
- https://webpack.js.org/guides/package-exports/
- https://github.com/preactjs/preact/blob/master/package.json
- 多个子包,发布为 mono package
- 展开 exports https://cdn.skypack.dev/@wener/[email protected]/dist=es2020?meta
exports types
- ts 4.7+
- package.json - type module
- tsconfig.json 的 module 设置为 Node12 或 NodeNext
替代方案
package.json
{
"typesVersions": {
"*": {
"index": ["lib/components/index.d.ts"],
"tokens": ["lib/tokens/index.d.ts"]
}
}
}
imports
- 包内映射 import
{
"imports": {
"#dep": {
"node": "dep-node-native",
"default": "./dep-polyfill.js"
},
"#internal/*.js": "./src/internal/*.js"
},
"dependencies": {
"dep-node-native": "^1.0.0"
}
}
// 根据环境 import dep-node-native 或 polyfill
import '#dep';
self-referencing
- Self-referential import breaks on Yarn Berry PNPM linker vite#6808
- https://nodejs.org/api/packages.html#packages_self_referencing_a_package_using_its_name