{
  "schemaVersion": "0.11.0",
  "canonical": "https://www.pystone.net/notes/web-ecosystem-technologies/",
  "atlas": "https://www.pystone.net/?node=web-ecosystem-technologies#knowledge-atlas",
  "markdown": "https://www.pystone.net/notes/web-ecosystem-technologies.md",
  "context": "https://www.pystone.net/notes/web-ecosystem-technologies.context.json",
  "knowledgeVersion": "224c990773de.5fa8af6e39fa",
  "build": {
    "siteCommit": "224c990773de166d23a886306577dd90379529ce",
    "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a",
    "builtAt": "1970-01-01T00:00:00.000Z",
    "version": "224c990773de.5fa8af6e39fa"
  },
  "id": "note:web-ecosystem-technologies",
  "slug": "web-ecosystem-technologies",
  "title": "Web生态相关技术",
  "type": "note",
  "visibility": "public",
  "idStability": "rename-stable",
  "author": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "publisher": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "aliases": [],
  "summary": "Web生态相关技术 下面我从三个层面来讲：",
  "contentRole": "unspecified",
  "isMoc": false,
  "mocRecognition": "none",
  "generated": false,
  "attribution": "unspecified",
  "domain": "10-计算机、信息技术与工程",
  "tags": [],
  "mocs": [],
  "contentHash": "89c574d2bd78063a3a548e431df5149a8f539e148d5eaf94ddcc4e789367eaa7",
  "assets": [],
  "headings": [
    {
      "depth": 1,
      "text": "Web生态相关技术",
      "anchor": "web生态相关技术",
      "citation": "https://www.pystone.net/notes/web-ecosystem-technologies/#web%E7%94%9F%E6%80%81%E7%9B%B8%E5%85%B3%E6%8A%80%E6%9C%AF"
    },
    {
      "depth": 2,
      "text": "1. npm 是什么",
      "anchor": "1-npm-是什么",
      "citation": "https://www.pystone.net/notes/web-ecosystem-technologies/#1-npm-%E6%98%AF%E4%BB%80%E4%B9%88"
    },
    {
      "depth": 2,
      "text": "2. npm 的核心功能",
      "anchor": "2-npm-的核心功能",
      "citation": "https://www.pystone.net/notes/web-ecosystem-technologies/#2-npm-%E7%9A%84%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD"
    },
    {
      "depth": 3,
      "text": "npm run build",
      "anchor": "npm-run-build",
      "citation": "https://www.pystone.net/notes/web-ecosystem-technologies/#npm-run-build"
    }
  ],
  "claims": [],
  "outgoing": [],
  "incoming": [
    {
      "id": "note:game-graphics-and-runtime",
      "title": "游戏图形与运行时",
      "url": "https://www.pystone.net/notes/game-graphics-and-runtime/",
      "atlas": "https://www.pystone.net/?node=game-graphics-and-runtime#knowledge-atlas",
      "label": "游戏图形与运行时",
      "origin": "explicit",
      "humanReviewed": true,
      "context": "WebGL中的“Web生态相关技术”导航项",
      "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#webgl"
    }
  ],
  "contentMarkdown": "# Web生态相关技术\n下面我从三个层面来讲：\n\n1. **npm 是什么**\n2. **npm 提供了哪些核心功能**\n3. **“npm 的构建”（build）在做什么**\n\n---\n\n## 1. npm 是什么\n\n* **Node.js 包管理器（Registry + CLI）**\n  npm（Node Package Manager）最初是为 Node.js 而生的包管理工具，核心由两部分组成：\n\n  1. **公共／私有 Registry**（即包仓库，[https://registry.npmjs.org/）：上面存了数百万个](https://registry.npmjs.org/）：上面存了数百万个) JavaScript/TypeScript 库。\n  2. **命令行工具（CLI）**：`npm` 命令本身，负责与 Registry 交互（下载、发布、搜索）、管理本地依赖、执行脚本等。\n\n* **生态枢纽**\n\n  * 所有主流的 Node.js／前端框架（React、Vue、Angular、Next.js…）都把模块发布到 npm 上。\n  * 同时也是团队内部私有包的首选分发方式。\n\n* **多模式支持**\n\n  * CommonJS、ES Module（`.mjs` 或在 `package.json` 里 `\"type\": \"module\"`）\n  * 原生支持 TypeScript → 通过社区维护的「ts-node」、`prepare` 脚本等方式也能无缝工作。\n\n---\n\n## 2. npm 的核心功能\n\n1. **依赖管理**\n\n   * **安装**：`npm install [包名]` → 拉取最新版本并写入 `node_modules/`，更新 `package.json` 和 `package-lock.json`。\n   * **卸载**：`npm uninstall [包名]` → 从 `node_modules/` 和 `dependencies` 中移除。\n   * **固定依赖树**：`package-lock.json` 锁住了每个包的精确版本，保证多人、多环境安装一致。\n\n2. **版本控制 & 发布**\n\n   * **语义化版本**（SemVer）：`major.minor.patch`，npm 在安装时会根据 `^`、`~` 等前缀动态选择版本。\n   * **发布**：`npm publish` → 根据包里的 `publishConfig`、`.npmignore` 或 `files` 字段打包并上传到 Registry。\n\n3. **脚本执行**\n\n   * 在 `package.json` 里定义 `\"scripts\"`：\n\n ```jsonc\n {\n   \"scripts\": {\n\t \"build\": \"tsc -p tsconfig.json\",\n\t \"test\": \"jest\",\n\t \"lint\": \"eslint src/**\"\n   }\n }\n ```\n   * 运行：`npm run build`、`npm test`、`npm run lint`。\n   * 支持生命周期脚本（lifecycle scripts），例如 `preinstall`、`prepare`、`prepublishOnly`、`postinstall` 等，npm 会在特定时机自动调用它们。\n\n4. **本地/全局安装**\n\n   * **本地**（项目级）安装：`npm install lodash`，仅在当前项目可用。\n   * **全局** 安装：`npm install -g typescript`，类似系统命令，可以在任意目录下直接调用 `tsc`。\n\n5. **安全审计 & 依赖诊断**\n\n   * `npm audit`：检查已安装包的已知安全漏洞并给出修复建议。\n   * `npm outdated`：列出可升级的依赖版本。\n\n6. **工作区（Workspaces）**\n\n   * 从 npm v7 开始支持 Yarn 风格的 monorepo 管理：一个仓库里同时管理多个包、共享依赖、统一安装。\n\n---\n\n### npm run build`\n\n1. **触发 Package.json 中的 `build` 脚本**\n\n   * 当你在项目根目录下运行：\n\n```bash\nnpm run build\n```\n\n npm 会依次执行：\n * `prebuild`\n * `build`\n * `postbuild`\n   这由内置的生命周期控制，保证你配置在这几个钩子里的命令被正确调用。\n\n2. **常见用途**\n\n   * **TypeScript → JavaScript**：调用 `tsc` 编译 `.ts` 到 `.js`。\n   * **打包/压缩**：调用 Webpack/Rollup/Vite/Esbuild，把模块打包成浏览器友好的包、生成 source map。\n   * **复制静态资源**：把 `.css`、`.html`、图片等资源从 `src/` 复制到 `dist/`。\n   * **环境替换**：通过环境变量（`NODE_ENV=production`）切换不同配置。\n\n3. **底层原理**\n\n   * **并不是 npm 自己做编译**，而是 npm 充当了脚本跑腿的角色：\n\n> npm 看到 `package.json` 里有个叫 `build` 的脚本，就在 shell 里执行它。\n   * **执行过程**：\n\n     1. 解析 `package.json`，找到 `scripts.build` 的命令字符串。\n     2. 在子进程里以 `sh -c \"<build 命令>\"`（UNIX）或 `cmd /d /s /c \"<build 命令>\"`（Windows）运行。\n     3. 等命令结束后，再执行 `postbuild`（如果定义了的话）。\n"
}