看起来将来这一切都可以通过 CLI 自动化,但是,目前有一些解决方案。有些涉及编写安装后脚本,如果您有很多事情要做,这是一个非常好的脚本。一个涉及手动移动它们,但这对于错误IMO来说太开放了。我还看到了一些你可以安装的 npm 包,它们似乎扩展了 ng-packagr 的功能(ng-packagr 构建你的库,webpack 构建你的应用程序)。
其中有些是好的,有些是坏的,IMO,我不会单独讨论我对它们的看法,相反,我只会分享我所做的。
我在一个企业 Angular 应用程序上工作,我正在将我们的特性和功能提取到库中,以便我们可以在不久的将来开始与迷你应用程序共享代码。由于我们的流程和构建协议,我们已经没有直接使用 ng cli 来构建我们的项目,而是使用 npm 脚本。
如果您已经熟悉 NPM 脚本,请跳过下面的内容,否则,此快速说明将非常有用。
使用 Angular CLI,你可以运行类似这样的东西......
ng build myProject --configuration=production
运行项目的产品构建。
ng build myLibrary
运行库的 prod 构建,您可能会运行库ng build myLibrary --watch=true
的 dev 构建并在处理库时观察更改。
对我来说,当我在项目上工作时,我使用 ng CLI,就像你做的那样运行ng build myLibrary --watch=true
这完美地工作。我有一个包含资产的库的资产文件夹,并将它们存储在 myProject/src/lib/assets 中。一切都很好。虽然我的资产不在我的 dist/myLibrary 中......但嘿,这很酷,因为在开发过程中,当我在图像标签中使用相对路径时,<img>
webpack 是从我的库项目中提取的,而不是我的 dist 文件夹。那么如何使用 NPM 脚本解决这个问题呢?好吧,当你读到下一行时,你会拍拍自己的额头,然后说“废话,我知道”……来吧……
如果跳过,从这里开始...
"myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run msgAssetsCopied",
是的,就是这样,只是一些基本的 bash :)
不过,我会为那些不熟悉命令行的人分解它。
myLibrary:prod
这是 npm 脚本又名 npm 运行脚本的名称。您在命令行中调用它,npm run myLibrary:prod
然后让您的终端完成其余的工作。“其余”只是您的计算机终端可以相应地读取、解释和执行的命令。
ng build myLibrary
这会触发标准的 ng CLI build 命令,从而构建您的库
&&
这就是说“嘿,在你做我左边的事情之后[&&],做我右边的事情”
mkdir dist/myLibrary/lib/assets
这是一个基本的 bash 命令,它创建一个目录,您将把资产复制到该目录中。 mkdir
创建一个目录,路径指定我想要该目录的位置和内容。如果我在我想要一个目录的文件夹中,比如说“foo”,我会这样做mkdir bar
,foo/bar
如果我在“foo”中并且希望目录“tacos”在“bar”目录中,我会这样做mkdir bar/tacos
,它会在“bar”目录中创建“tacos”,如foo/bar/tacos
.
我更喜欢创建一个文件夹并从 a -> b 移动资产,而不是尝试创建一个文件夹及其资产。
cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/
对于那些刚接触 bash 的人来说,这个分为 4 个部分。
cp
是“复制”
-R
用于“递归”,意思是获取所有文件和文件夹,并在复制后保持相同的结构。
projects/myLibrary/src/lib/assets/
这是我的资产所在的位置,我想将其移至我之前使用上一个mkdir
命令创建的新目录。
dist/myLibrary/lib/assets/
是复制命令的目的地。
所以有了这个你有...
- 命令
cp -R
- 目标
path/to/assets/in/library/project/
- 目的地
path/to/desired/directory/in/build
最后一步是npm run msgAssetsCopied
我的 package.json 中的另一个 npm 脚本,它告诉敲击键盘的人资产已被复制。我通常在我的脚本中都有带有表情符号的消息,以便开发人员通过识别屏幕上的表情符号更容易在任何时间点准确地查看脚本的位置。例如...
"msgAssetsCopied": "echo ' Assets Copied to Library Dist Folder '",
所以 Assets Copied to Library Dist Folder
当我们完成后会在终端打印。
还是新的?不用担心,现在我将向您展示它们在您的 package.json 中的位置。
{
"name": "YourWorkspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
}
}
如您所见,这是您的 package.json 文件的顶部。您可以根据需要添加任意数量的脚本,下面我们将放入我刚刚分享的脚本...
{
"name": "YourWorkspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp
-R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run
msgAssetsCopied",
}
}
轰炸炸药!