如何在Ionic应用中使用本地自定义库而无需发布到npm

完全可以不发布到npm就直接在Ionic应用中使用本地自定义库，以下是两种主流实现方式：

方式一：npm link（适合多项目共享本地库） #

操作步骤：

• 先对自定义库执行构建命令，生成构建产物到dist目录
• 进入本地库的dist输出目录，执行命令：npm link，完成后系统会全局注册该本地库的软链接
• 进入Ionic项目根目录，执行命令：npm link <你的库名>，<你的库名>需要和库package.json中定义的name字段完全一致
• 打开Ionic项目的angular.json配置文件，找到 architect > build > options 节点，新增配置项："preserveSymlinks": true，避免软链接导致的模块解析失败

方式二：tsconfig路径映射（适合单项目临时引用） #

操作步骤：

• 先构建自定义库，确保dist目录下有最新的构建产物
• 打开Ionic项目根目录的tsconfig.json文件，在compilerOptions节点下新增paths配置（如果已有paths节点直接追加即可）：

"paths": {
  "<你的库名>": ["<本地库dist目录的相对路径>/<你的库名>"],
  "<你的库名>/*": ["<本地库dist目录的相对路径>/<你的库名>/*"]
}

示例：如果你的库dist目录路径为../my-workspace/dist/my-custom-lib，则配置为：

"paths": {
  "my-custom-lib": ["../my-workspace/dist/my-custom-lib"],
  "my-custom-lib/*": ["../my-workspace/dist/my-custom-lib/*"]
}

常见问题排查 #

• 不要直接引用库的源码目录，必须引用构建后的dist目录，否则会出现类型识别、编译报错问题
• 修改库代码后需要重新构建库，再重启Ionic开发服务才能生效
• 如果出现运行时模块未找到错误，优先检查路径拼写、软链接是否生效、preserveSymlinks配置是否开启

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