Angular 6 Libraries替代npm包共享代码的技术疑问
嘿,我来帮你梳理这两个关于Angular工作区和共享库的问题,刚好我之前在项目里也遇到过类似的需求:
1. 能否创建仅包含库集合的Angular工作区(无应用)?
完全可以!Angular CLI专门提供了参数支持创建不含初始应用的纯库工作区。
你只需要在创建工作区时加上--create-application false参数就行,比如执行这条命令:
ng new shared-libs-workspace --create-application false
生成的工作区里只会有核心配置文件(angular.json、package.json等),没有默认的src应用目录。之后你就可以在这个工作区里随意创建多个共享库,比如:
# 创建认证服务库 ng generate library auth-service # 创建通用UI组件库 ng generate library ui-components
每个生成的库都会被放在projects目录下,拥有独立的配置和源码结构。
2. 能否在包含应用的另一工作区中引用该工作区的库?
当然可以,目前有两种常用的实现方式,各有优劣,你可以根据自己的场景选择:
方式一:使用npm link本地链接(推荐用于开发阶段)
这种方式适合开发过程中需要频繁修改共享库并实时同步到应用的场景:
- 先在共享库工作区中,编译目标库(以
auth-service为例):
如果需要实时监听代码变化自动重新编译,可以加上ng build auth-service--watch参数:ng build auth-service --watch - 进入编译后的库目录(比如
projects/auth-service/dist/auth-service),执行npm link,把这个库注册到本地npm全局链接中:cd projects/auth-service/dist/auth-service npm link - 切换到你的应用工作区,执行
npm link加上库的包名(就是库的package.json里的name字段,比如@shared-libs/auth-service):
之后你就能在应用里像使用普通npm包一样导入并使用这个库了,比如:npm link @shared-libs/auth-serviceimport { AuthService } from '@shared-libs/auth-service';
方式二:直接在package.json中引用本地路径(适合稳定版本的依赖)
如果共享库的版本相对稳定,不需要频繁修改,可以直接在应用工作区的package.json里指定本地依赖路径:
- 先在共享库工作区编译目标库,确保
dist目录存在。 - 在应用工作区的
package.json的dependencies里添加:
这里的路径要根据两个工作区的实际相对位置调整。"dependencies": { "@shared-libs/auth-service": "file:../shared-libs-workspace/projects/auth-service/dist/auth-service" } - 执行
npm install,Angular CLI会自动处理这个本地依赖,之后就能正常使用库了。不过这种方式每次修改共享库后,需要重新编译库,再在应用工作区执行npm update @shared-libs/auth-service才能同步变化。
额外注意事项
- 尽量保证两个工作区的Angular核心包(
@angular/core、@angular/cli等)版本一致,避免因版本差异导致的兼容性问题。 - 使用
npm link时如果遇到模块解析异常,可以尝试重启应用的开发服务器,或者清理npm缓存后重新链接。
内容的提问来源于stack exchange,提问作者skeej
相关产品推荐
相关产品推荐

