Skip to content
大纲

package 包的介绍(配置解读)

npm、cnpm、npx、yarn

npx

1 概念

npx 是 npm5.2 之后发布的一个命令。 官网说它是“execute npm package binaries”, 就是执行 npm 依赖包的二进制文件,简而言之,就是我们可以使用 npx 来执行各种命令。使用 npx 可以在命令行直接执行本地已安装的依赖包命令, 不用在 scripts 脚本写入命令,也不用麻烦的去找本地脚本。使用 npx,可以在不全局安装依赖包的情况下,运行命令,而且运行后不会污染全局环境。

2 运行原理

step1:去 node_modules/.bin 路径检查 npx 后的命令是否存在,找到之后执行;

step2:找不到,就去环境变量$PATH 里面,检查 npx 后的命令是否存在,找到之后执行;

step3:还是找不到,自动下载一个临时的依赖包最新版本在一个临时目录,然后再运行命令,运行完之后删除,不污染全局环境。

npm,cnpm yarn pnpm 是包管理

参考

json
{
  "name": "包名",
  "version": "1.0.0", //版本号 版本必须可以通过 node-semver 进行解析,它与 npm 绑定为一个依赖项。
  "main": "index.js", // 主字段是一个模块ID,是您程序的主要入口点。
  "description": "A simple comments code", //"简介描述",
  "homepage": "", // 项目主页

  "workspaces": [
    //monorepo类型的项目,需要用到workspaces。它可以告知其他工具,当前项目的工作区间在哪里
    "./packages/*"
  ],
  "private": true, //常见在私有包pnpm下
  "type": "module", //常见在私有包pnpm下
  "repository": {
    "type": "git", //介绍自己的仓库git还是gitea,还是其他的
    "url": "https://github.com/breakon/easy-comments-code"
  },
  "cpu": ["x64", "ia32"], // 如果您的代码只在某些 CPU 架构上运行,您可以指定哪些架构

  "dependencies": {
    "typescript": "~3.8.0" // 说明
  }, //生产部署环境
  "devDependencies": {}, //开发环境

  "keywords": [
    //关键字
    "comment",
    "vue",
    "react"
  ],
  "module": "ESNext", //ECMASCRIPT模块ID是您程序的主要切入点
  "bugs": {
    //bug提交地址
    "url": "https://github.com/breakon/easy-comments-code/issues"
  },
  "scripts": {
    //脚本指令
    "test": "test"
  },
  "markdown": "github", // 控制商店中使用的 Markdown 渲染引擎。可为 "github" (默认) 或 "standard" (标准)
  "publisher": "breakon", //发布者名字
  "license": "MIT", //开源协议
  "exports": {
    //导出的唯一出口
    ".": "./index.js"
  },
  "bundleDependencies": [], // 发布包装时将捆绑的一系列包装名称

  //多入口点:http://nodejs.cn/api/packages.html#package-entry-points
  "exports": {
    ".": "./lib/index.js",
    "./lib": "./lib/index.js", //必须是以 ./ 开头的相对文件 URL。
    "./lib/index": "./lib/index.js",
    "./package.json": "./package.json"
  },
  // 单入口点("exports"  高于 main 字段)
  "main": "./index.js",

  // 子路径的导入 [http://nodejs.cn/api/packages.html#subpath-imports]
  "imports": {
    //可以让包本身某个文件作为包 依赖环境运行
    "#dep": {
      "node": "dep-node-native",
      "default": "./dep-polyfill.js"
    }
  },

  "types": "", // 将 type 属性设置为指向绑定的声明文件
  "typings": "", // 注意,“ typeings”字段是“ type”的同义词,也可以使用。

  //显示设置某些模块具有副作用,用于 webpack 的 tree-shaking 优化。
  //   比如在项目中整体引入 Ant Design 组件库的 css 文件。
  // import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
  "sideEffects": ["dist/*", "es/**/style/*", "lib/**/style/*", "*.less"],

  //vscode独有--------------start
  "displayName": "", // VS Code 库中使用的扩展的显示名称
  "extensionDependencies": [], // 其他扩展的依赖关系。扩展的标识符始终是 ${publisher}.${name}。例如: vscode.csharp。
  "extensionPack": [], // 可一起安装的一组扩展。扩展的标识符始终为 ${publisher}.${name}。例如: vscode.csharp。
  "galleryBanner": {}, // VS Code 商城使用的横幅
  "icon": "", //vscode 128 x 128 像素图标的路径
  "jspm": {},
  "preview": true, // 在 Marketplace 中设置扩展,将其标记为“预览”。
  "publishConfig": {},
  "qna": "marketplace", // 控制市场中的“问与答”(Q&A)链接。设置为 "marketplace" 可启用市场的默认“问与答”页面。设置为其他字符串可指向自定义的“问与答”页面。设置为 "false" 可完全禁用“问与答”
  "readme": "",
  "contributes": {
    "commands": [
      {
        "command": "extension.EasyCommentsCode",
        "title": "Easy Comment Code"
      }
    ],
    "keybindings": [
      {
        "command": "extension.EasyCommentsCode",
        "key": "ctrl+/",
        "mac": "cmd+/",
        "linux": "ctrl+/",
        "when": "editorTextFocus && !editorReadonly"
      }
    ]
  },
  "os": ["darwin", "linux"], // 您可以指定模块将运行的操作系统
  "activationEvents": [], // VS Code 扩展的激活事件
  "badges": [], // 在 Marketplace 的扩展页边栏中显示的徽章数组
  "bin": "",
  "categories": [], // VS Code 库用于对扩展进行分类的类别
  "contributes": {}, // 由此包表示的 VS Code 扩展的所有贡献
  "directories": {},

  "dist": {},
  "engines": {
    "node": ">=0.10.3 <15"
  }, // 项目运行环境的要求声明。
  "engineStrict": false,
  //vscode独有--------------end

  // This helps people discover your package as it's listed in 'npm search'.
  "config": {}, // A 'config' hash can be used to set configuration parameters used in package scripts that persist across upgrades.
  "contributors": [], // A list of people who contributed to this package
  // Dependencies are specified with a simple hash of package name to version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL
  "esnext": "", // A module ID with untranspiled code that is the primary entry point to your program.
  "files": [], // The 'files' field is an array of files to include in your project. If you name a folder in the array, then it will also include the files inside that folder
  "maintainers": [], // A list of people who maintains this package
  "man": [], // Specify either a single file or an array of filenames to put in place for the man program to find.
  // Dependencies are specified with a simple hash of package name to version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL.
  "optionalDependencies": {},
  "peerDependencies": {}, // Dependencies are specified with a simple hash of package name to version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL
  "preferGlobal": true, // If your package is primarily a command-line application that should be installed globally, then set this value to true to provide a warning if it is installed locally
  "prettier": {}, // Schema for .prettierrc  Prettier configuration
  "private": false, // If set to true, then npm will refuse to publish it.
  "resolutions": {} // Dependencies are specified with a simple hash of package name to version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL.
}

dependencies版本范围指示

^
只控制到版本的主要, 安装依赖的时候,会更新次要补丁
~
只允许补丁, 安装依赖的时候更新补丁
X
任意版本例如:1.2.x
*
任意版本例如:表示>=0.0.0的任意版本

如果什么符号都没有,那么就是只能允许当前版本


version主要次要补丁
3.8.7387

不过出现了 pnpm-lock.yaml,yarn.lock,package-lock.json 那么lock就为最高级,使用哪个包管理那就锁住哪个版本,其中package为npm生成的lock,具体版本查看lock文件

cnpm不支持版本锁定,也就是package-lock.json这些文件对它无效

json
{
  "dependencies": {
    "foo": "1.0.0 - 2.9999.9999",
    "bar": ">=1.0.2 <2.1.2",
    "baz": ">1.0.2 <=2.3.4",
    "boo": "2.0.1",
    "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
    "asd": "http://asdf.com/asdf.tar.gz",
    "til": "^1.2",
    "elf": "~1.2.3",
    "two": "2.x",
    "thr": "3.3.x",
    "lat": "latest",
    "dyl": "file:../dyl"
  }
}

dependencies和 devDependencies

我们在开发的时经常见到 -D,其实这更多的是一种规范,运行node的规范,在前端构建项目中,像vue如果全局在main.js引入依赖包,无论在哪个环境下其实打包的时候都会构建,简单来说,这个只是个规范,哪些是生成环境,哪些是构建环境,更清晰的了解当前项目


dependencies版本范围指示

参考版本

参考文档 |

参考文章