Appearance
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.7 | 3 | 8 | 7 |
不过出现了 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引入依赖包,无论在哪个环境下其实打包的时候都会构建,简单来说,这个只是个规范,哪些是生成环境,哪些是构建环境,更清晰的了解当前项目
参考文档 |