本文已参与「新人创作礼」活动，一起开启掘金创作之路。
关键词：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" } }
