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代码

转载于:https://www.cnblogs.com/mrcheng/p/10883488.html