本地安装NPM包供多项目访问、NPM与Maven包管理对比及Angular开发咨询

Hey there! 作为有Java/Maven背景的开发者，刚接触NPM确实会有不少类比的疑问，我来帮你梳理清楚这两个核心问题～

咱们从你熟悉的Maven入手，对比NPM的核心逻辑，更容易建立认知：

• 依赖声明文件

  • Maven用pom.xml，XML格式，结构严谨，支持继承、聚合等复杂项目架构；
  • NPM用package.json，JSON格式，更轻量化，除了依赖还包含项目脚本、元数据等额外信息。

• 依赖范围/类型

  • Maven有明确的依赖范围：compile（默认，编译运行都需要）、test（仅测试阶段用）、provided（由容器提供，比如Servlet API）等；
  • NPM分为三类核心依赖：dependencies（生产环境必备）、devDependencies（开发工具类依赖，比如webpack、jest）、peerDependencies（要求宿主项目提供的依赖，比如你的Angular组件需要宿主有对应版本的@angular/core）。

• 本地存储与缓存

  • Maven的本地仓库是~/.m2/repository，按groupId/artifactId/version层级存储，所有项目共享这个仓库的依赖；
  • NPM的本地缓存是~/.npm，但每个项目会在node_modules目录下完整安装所有依赖（包括子依赖），默认不共享本地仓库依赖（需通过npm link或本地路径引用实现共享）。

• 开发版本管理

  • Maven用SNAPSHOT版本标识开发中迭代的版本，每次构建会自动拉取最新快照；
  • NPM没有官方快照机制，开发阶段靠本地链接或路径引用实现实时更新，正式发布用语义化版本号（比如1.0.0、1.0.1-beta）。

• 发布流程

  • Maven需在pom.xml配置distributionManagement，执行mvn deploy上传到私服（比如Nexus）；
  • NPM需先通过npm login登录仓库，执行npm publish发布，私服地址可配置在.npmrc文件中。

针对你开发Angular 4组件的场景，有两个高效方案，让你修改组件后直接在客户端项目测试：

方案1：用npm link建立本地链接 #

这是NPM官方推荐的本地开发依赖方式，类似Maven本地快照但更灵活：

1. 在你的Angular组件项目中：
   先执行npm install安装依赖，再运行：

   npm link
   

   这个命令会把你的组件包注册到NPM全局缓存，相当于本地“发布”了这个包。

2. 在客户端项目中：
   运行以下命令关联本地组件：

   npm link <your-component-package-name>
   

   这里的<your-component-package-name>是组件项目package.json里的name字段值。

3. 实时更新组件：
   用Angular CLI开发的话，记得启动watch模式自动编译：

   ng build --watch
   

   修改组件代码后，编译产物会自动更新，客户端项目的Angular Dev Server会热加载最新内容。

4. 取消链接：
   开发完成后，在客户端项目取消关联：

   npm unlink <your-component-package-name>
   

   或在组件项目取消全局注册：

   npm unlink
   

方案2：直接引用本地文件路径 #

如果不想用全局链接，也可以直接在客户端项目指定本地组件路径：

1. 修改客户端项目的package.json：
   将组件依赖改为本地路径（比如组件项目在客户端同级目录）：

   "dependencies": {
     "your-component": "file:../your-angular-component"
   }
   

2. 安装依赖：
   运行npm install，NPM会将本地组件包关联到客户端的node_modules目录。

3. 更新组件：
   修改组件后，重新运行npm install即可同步最新内容；如果组件开启了watch编译，客户端项目能直接读取到最新编译产物。

内容的提问来源于stack exchange，提问作者fgonzalez