如何在Ionic项目中联动开发Ngrx/Store模块并便捷发布至npm

这种本地联动开发npm模块的需求太常见了，我给你一套完整的方案，既能让你在Ionic项目里实时调试Store模块的代码，又能轻松发布到npm供主Web应用使用：

首先确保你的Store模块是用Angular CLI创建的标准Angular库（如果不是，建议迁移过去，打包和发布更省心）。然后检查它的package.json，关键配置要到位：

• 确认name字段是你要发布到npm的包名（比如@your-org/shared-store）
• 配置scripts，添加开发和生产构建命令：

  "scripts": {
    "build": "ng pack", // 生产构建
    "build:watch": "ng pack --watch" // 开发时监听文件变化自动重新构建
  }
  

• 确保main、module、types字段指向打包后的正确路径（Angular CLI创建的库会自动生成这些，你可以检查dist文件夹里的输出是否匹配）：

  "main": "./bundles/shared-store.umd.js",
  "module": "./fesm2020/shared-store.mjs",
  "types": "./shared-store.d.ts"
  

这是核心步骤，让Ionic项目直接引用你本地的Store模块代码：

1. 打开Store模块的根目录，执行：

   npm link
   

   这会把你的Store模块链接到全局npm仓库，相当于在本地“注册”了这个包。
2. 切换到Ionic项目的根目录，执行：

   npm link @your-org/shared-store
   

   这里的包名要和Store模块package.json里的name一致。执行后，Ionic项目的node_modules里会出现这个包的软链接，指向你本地的Store模块文件夹。

现在可以同时启动两个项目的开发服务，实现实时更新：

1. 在Store模块目录下启动监听构建：

   npm run build:watch
   

   这个命令会持续监听Store模块的代码变化，一旦修改就自动重新打包到dist文件夹。
2. 在Ionic项目目录下启动开发服务器：

   ionic serve
   

   现在你修改Store模块里的任何代码（比如actions、reducers、selectors），都会触发自动打包，Ionic项目会检测到依赖变化并热更新，直接就能看到效果，完全不用走npm发布流程！

• 解决路径解析问题：如果Ionic项目出现模块找不到的错误，在Ionic项目的tsconfig.json里添加preserveSymlinks: true：

  "compilerOptions": {
    "preserveSymlinks": true,
    // 其他配置...
  }
  

  这是因为npm link用的是软链接，Angular的模块解析器可能会找不到正确路径，开启这个配置就能解决。
• 保持依赖版本一致：确保Store模块和Ionic项目里的@ngrx/store、@angular/core等依赖版本完全一致，避免出现兼容性问题（可以把这些依赖设为peerDependencies在Store模块的package.json里，这样安装时会提示版本匹配）。
• 测试打包产物：在发布前，先执行npm run build生产构建，然后可以在Ionic项目里临时取消link（执行npm unlink @your-org/shared-store，然后npm install），测试一下从本地dist文件夹安装是否正常，确保打包没有问题。

当Store模块稳定后，发布就很简单了：

1. 在Store模块目录下执行生产构建：

   npm run build
   

2. 进入dist文件夹里的包目录（比如dist/shared-store）：

   cd dist/shared-store
   

3. 登录npm（如果没登录过）：

   npm login
   

4. 发布包：

   npm publish --access public
   

   （如果是私有包，去掉--access public）

这样主Web应用的开发者直接执行npm install @your-org/shared-store就能拉取到最新的稳定版本了。

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