本文已参与「新人创作礼」活动，一起开启掘金创作之路。
关键词：package.json 项目开发 包开发
package.json 平时常用，但是配置项很多，所以把常用的一些配置及其意思整理成操作手册，以便不时之需。
基本信息
{
"name": "package-name",
"version": "0.0.1", // {大的变动、可能影响了向后的兼容性}.{feat}.{bugfix}
"description": "这是xxxx",
"homepage": "主页信息 表示项目首页的url",
// 接收问题反馈的url email | git issues
"bugs": {
"url": "https://github.com/xxx/xxx/issues",
"email": ""
},
// 仓库地址
"repository": {
"type": "git",
"url": "git+https://github.com/xxx.git"
},
"keywords": [],
"author": {
"name": "",
"email": "",
"url": ""
},
// 无法通过 npm publish 发布代码
"private": true,
// publishConfig 配置会在模块发布时生效，用于设置发布时一些配置项的集合。
"publishConfig": {
"tag": "1.1.0",
"registry": "https://registry.npmjs.org/",
"access": "public"
}
"license": "ISC",
}
项目执行 [typings, main, module, browser, exports, config]
{
// TypeScript的入口文件
"typings": "types/index.d.ts",
// 项目主要入口，启动项目的文件
"main": "index.js",
// 指向支持 ESM 模块的入口文件
"module": "./src/index.mjs",
// 支持 UMD 模块的入口文件，如果 npm 包只在 web 端使用，用 browser 来定义入口文件。
"browser": "./src/index.js",
// 控制子目录的访问路径
"exports": {
".": {
// 用户 import 使用时
"import": {
// 根据环境引入不同的文件
"node": "./dist/xxx.runtime.mjs",
"default": "./dist/xxx.runtime.esm.js"
},
// 除了 require 对应 main 字段之外，其它都一样
"module": "index.esm.js",
"browser": "index.umd.js",
"require": "index.common.js",
"types": "index.d.ts"
},
// 用户可以导入 dist 文件夹下的文件
"./dist/*": "./dist/*"
},
// config 字段用来配置scripts运行时的配置参数
"config": {
"port": 3000
},
// 执行脚本入口
"bin": {},
// 自定义脚本命令
"scripts": {},
}
bin
npm 会在全局可执行 bin 文件安装目录 /usr/local/bin 创建一个指向对应包的软连接。
// ./bin/index.js
#!/usr/bin/env node
console.log('hello')
"bin": {
"tc": "./bin/enter.js"
},
// npx tc
scripts
npm run env 查看脚本运行的环境变量
npm run {dev}, 意思就是跑 scripts 中的 dev 脚本，这个脚本会将当前项目的 node_modules/.bin 的绝对路径加入环境变量 PATH 中，执行结束再将环境变量恢复原样。
{
"scripts": {
"dev": "webpack --params=123 --name=kane", // 截取参数 const rawArgv = process.argv.slice(2)
"dev": "NODE_ENV=production webpack", // 如果阻塞 需要加上 cross-env -> npm i cross-env -D
}
}
// webpack.config.js
const path = require('path');
// console.log(process.argv)
const rawArgv = require("minimist")(process.argv.slice(2)) // object {params: 123, name: 'kane'}
const env = process.env.NODE_ENV // production
- 多命令
- 并行执行
npm run script1 & npm run script2 - 串行执行
npm run script1 && npm run script2
- 并行执行
项目依赖 [private, engines, browserslist]
{
// 无法通过 npm publish 发布代码
"private": true,
// 项目依赖的环境
"engines": {
"node": ">=12",
"npm": ">= 4.0.0"
},
// 兼容浏览器
"browserslist": [
"last 2 versions",
"> 1%"
],
// 应用依赖/业务依赖
"dependencies": {
// 线上代码的一部分
"foo": ">1.0.0 <=3.0.0", // ^1.2.3 兼容版本 ~1.2.3 最近可用
},
// 开发依赖 单元测试 打包工具等
"devDependencies": {},
// 同伴依赖
"peerDependencies": {},
// 打包依赖
"bundledDependencies": [],
// 可选依赖
"optionalDependencies": {},
}
peerDependencies
同伴依赖。
如果安装本包，则需要按照要求安装其他包。
发布包（组件）可能用到。提示宿主环境去安装插件，解决插件与所依赖包不一致的问题，例如 element-ui。
如果组件与环境依赖的包不一致，则会告警 手动安装 组件的依赖包。
bundledDependencies
打包依赖。npm pack -> .tgc 压缩包。压缩包中会包含 bundledDependencies 声明的包。
在发布时会将这个对象中的包，打包到最终的发布包里。
必须在 devDependencies 或者 dependencies 声明过。
npm i xxx.tgz 就同样会安装这里的两个依赖
{
"devDependencies": {
"demo": "^0.0.1",
},
"dependencies": {
"hello-else": "^1.0.0"
},
"bundledDependencies": [
"demo",
"hello-else"
]
}
optionalDependencies
可选依赖。
optionalDependencies 对象中的包会覆盖 dependencies 中同名的包，是为了解决在找不到包或者安装包失败的时候，npm i 仍然能够继续运行。
配置输出
sideEffects
协助 Webpack 进行 tree shaking。移除未引用的代码。
{
"sideEffects": false, // 正常对所有模块进行 tree shaking
"sideEffects": ["*.css", "@babel/polyfill"] // 在数组里面排除不需要的tree shaking模块
}
配合依赖使用
配合 eslint 等使用，具体可参考 前端项目添加代码规范
{
// eslint的配置
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
},
"babel": { // 指定Babel的编译配置
"presets": ["@babel/preset-env"],
"plugins": []
},
"lint-staged": { // 通常配合gitHooks一起使用
// 在Git暂存文件上运行linters的工具，
// 配置后每次修改一个文件即可给所有文件执行一次lint检查
"*.js": [
"eslint --fix",
"git add"
]
},
"gitHooks": {
// gitHooks用来定义一个钩子，在提交（commit）之前执行ESlint检查。
"pre-commit": "lint-staged"
}
}
