角度6使用资源构建库

目前,我还没有找到一种正式的内置方式来实现这一点。

我打开了一个 Angular CLI issue 希望能得到CLI团队的响应。

同时,我的解决方法是使用命令行工具:

在 package.json 我补充道:

"scripts": {
    ...
    "build": "ng build lib1 --prod && scss-bundle -c scss-bundle.config.json && cp -R projects/lib1/src/assets/ dist/lib1/assets/",
}

复制我使用的SASS文件 scss-bundle 使用配置文件 scss-bundle.config.json 其中包括:

{
  "entry": "./projects/lib1/src/assets/style/main.scss",
  "dest": "./dist/lib1/assets/style/styles.scss"
}

这将把项目的sass文件构建成1个文件,并将其复制到dist文件夹中。我的sass文件结构如下:

-- projects/lib1/src/assets/
                  -- style
                     -- main.scss
                     -- partials
                        -- _variables.scss
                        -- _styles.scss
                        __ _rtl.scss

正如你所看到的,我不想把所有原始的sas都发出去,只发一份最终的文件。当然,您也可以将其编译为 .css 改为归档。

为了确保复制所有其他资产,我使用一个简单的mac os/linux命令 cp -R 或 rsync .

当然,不是跑步 ng build 我跑 npm run build .

希望这有帮助,如果你有更好的解决方案,请告诉我。

看起来在将来,这一切都可以通过cli实现自动化,但是,目前有一些解决方案。有些人写了一个安装后脚本,如果你有很多东西的话,这是一个很好的脚本。其中一个涉及手动移动它们,但这对于IMO来说太过开放了。我还看到了一些NPM包,您可以安装它们,它们似乎扩展了NG Packager的功能(NG Packager构建库,Webpack构建应用程序)。

有些是好的,有些是坏的,依我看,我不会单独去想它们,相反,我会分享我的所作所为。

我在一个企业角度的应用程序上工作,我正在将我们的特性和功能提取到库中,这样我们就可以在不久的将来开始与迷你应用程序共享代码。由于我们的流程和构建协议,我们已经不再直接使用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

这很管用。我有一个包含资源的库的assets文件夹,并将它们存储在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",

是的,就是这样,只是一些基本的狂欢:)

不过,对于命令行中新出现的那些,我将对其进行分解。

myLibrary:prod 这是NPM脚本的名称,也称为NPM运行脚本。在命令行中使用 npm run myLibrary:prod 让你的终端来做剩下的。“休息”只是简单的命令,您的计算机终端可以读取,解释和执行相应的。

ng生成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文件夹及其资产。

cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ 这一个被分成4个部分,以供新来的人痛击。

1. cp 是“副本”
2. -R 是指“递归”,也就是说,将所有文件和文件夹复制后保持相同的结构。
3. projects/myLibrary/src/lib/assets/ 这就是我的资产所在的位置,我要移到使用上一个目录创建的新目录中 麦克迪尔 前面的命令。
4. dist/myLibrary/lib/assets/ 是复制命令的目标。

所以有了这个…

1. 命令 cp -R
2. 靶标 path/to/assets/in/library/project/
3. 目的地 path/to/desired/directory/in/build

最后一步是 npm run msgAssetsCopied 这只是我的package.json中的另一个npm脚本,它告诉敲击键盘的人资产已被复制。我通常在我的脚本中使用emojis来传递消息,以便开发人员通过在屏幕上标识emojis来更容易地了解脚本在任何时间点的确切位置。例如。。。

"msgAssetsCopied": "echo '📁 Assets Copied to Library Dist Folder 📁'",

所以 📁 Assets Copied to Library Dist Folder 📁 完成后在终端上打印。

还是新的?不用担心,现在我会告诉你他们在你的包里的位置。

{
  "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",
    }
}

爆炸物爆炸了!