ng6 构建组件库
Angular CLI v6通过插入到我们在Angular CLI中使用的构建系统中的ng-packagr提供库支持,以及用于生成库的原理图。
您可以通过运行以下命令在现有工作区中创建库:
ng generate library my-lib
你现在应该在 projects/my-lib 中有一个库。它包含一个组件和一个NgModule内的服务。
构建你的库
您可以通过 ng build my-lib
来构建这个库,并且还可以通过用test或lint替换构建来对其进行单元测试并对其进行测试
在应用中使用库
在使用库之前,了解库一般使用的心理模型很重要。
当你想从npm使用一个库时,你必须:
- 通过 npm install library-name 将库安装到node_modules中
- 通过 import { something } from 'library-name'; 将库安装到node_modules中
这是有效的,因为在Angular CLI中导入库会查找本地磁盘上库名声带库和位置之间的映射。
Angular CLI首先在您的tsconfig路径中查找,然后在node_modules文件夹中查找。
当您构建自己的库时,它不会进入node_modules,因此我们使用tsconfig路径来告诉构建系统它在哪里。生成库自动将其路径添加到tsconfig文件。
使用你自己的库遵循类似的模式:
- 通过
ng build my-lib
构建库 - 通过
import { something } from 'my-lib';
导入到应用程序中;
请注意,您的应用在构建之前不能使用您的库。
例如,如果你克隆你的git仓库并运行npm install,你的编辑器会显示缺少my-lib导入。这是因为你还没有建立你的库。
另一个常见问题是您的库的更改没有反映在您的应用程序中。这通常是因为你的应用程序正在使用你的库的旧版本。如果发生这种情况只是重建你的库。
发布你的库
要发布您的库,请按照以下步骤操作
ng build my-lib --prod
cd dist/my-lib
npm publish
如果您以前从未在npm发布过软件包,则需要创建一个用户帐户。你可以在这里阅读更多关于npm的发布:https://docs.npmjs.com/getting-started/publishing-npm-packages
构建发布时应使用 --prod
标志,因为它会事先完全清除库的构建目录,从旧版本中删除旧的代码剩余代码。
内网使用less
因为在内网环境node-sass
安装需要联网, 所以安装不上,就改用了less
需要改动有:
angular.json
文件添加对less的支持
"schematics": {
"@schematics/angular:component": {
"styleleext": "less"
}
}
- 修改
ng-packagr
删除node-modules/ng-packagr package.json 里的node-sass模块
文件地址node_modules/ng-packagr/lib/ng-v5/entry-point/resources/stylesheet-processor.js
删除第10行 nodeSassTileImporter和14行 Sass
删除37-47行的case scss代码