Angular 6构建一个带有资产的库

Question

在构建和打包Angular 6库时,我似乎无法指示Angular CLI将库的资源复制到dist/assets每个构建的文件夹中.

假设项目的文件夹结构是这样的 -

- dist
- e2e
- node_modules
- projects
  - lib1
    - src
      - lib
      - assets
        - icons
- src

当我运行ng build lib1或ng build lib1 --prod在assets/icons文件夹不被复制到dist/lib1/assets/icons.

如果我跑ng build那么src/assets(根SRC /资产)被复制,但没有projects/lib1/assets.

该angular.json文件包含"assets": ["src/assets"]对它的引用,但它不允许将assets密钥专门添加到项目中,只允许添加到主根应用程序.添加时,我收到以下错误:

架构验证失败,出现以下错误:数据路径""不应具有其他属性(资产).

我还尝试将以下自定义复制规则添加到资源,以将资产复制到dist/lib而不是dist/appname:

  "assets": [
     "src/favicon.ico",
     "src/assets",
     { "glob": "**/*", "input": "src/assets/icons", "output": "../lib1/assets/icons" }
        ],

但是我收到以下错误:

无法将资产写入输出路径之外的位置.

是否有在每个构建中管理库资产副本的内置方法？

更新06/05/2018

我向Angular CLI提出了一个问题,但尚未收到回复.问题#11701

Answer 1

目前,我还没有找到正式的内置方式.

我打开了一个Angular CLI问题,希望能得到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

所以你可以看到我不想发送所有原始sass,只有一个最终文件.当然,您也可以将其编译成.css文件.

为了确保复制所有其他资产,我使用简单的Mac OS/Linux命令cp -R或rsync.

而且,当然,而不是运行ng build我跑npm run build.

希望这会有所帮助,如果您有更好的解决方案,请告诉我.

Answer 2

看起来在未来这一切都可以通过 CLI 自动化，但是，就目前而言，有一些解决方案。有些涉及编写安装后脚本，如果您有很多事情要做，这是一个非常好的脚本。一种是手动移动它们，但这对于 IMO 错误来说太开放了。我还看到了一些您可以安装的 npm 包，它们似乎扩展了 ng-packagr 的功能（ng-packagr 构建您的库，而 webpack 构建您的应用程序）。

其中有些是好的，有些是坏的，IMO，我不会单独讨论我对它们的看法，而是分享我所做的。

我在一个企业 Angular 应用程序上工作，我正在将我们的特性和功能提取到库中，以便我们可以在不久的将来开始与迷你应用程序共享代码。由于我们的流程和构建协议，我们已经没有直接使用 ng cli 来构建我们的项目，而是使用 npm 脚本。

如果您已经熟悉 NPM 脚本，请跳到下面，否则，这个快速说明将非常有帮助。

使用 Angular CLI，你可以运行这样的东西......

ng build myProject --configuration=production 运行项目的生产版本。

ng build myLibrary运行库的生产版本，您可能会运行库ng build myLibrary --watch=true的开发版本并在您处理库时观察更改。

对我来说，当我在做这个项目时，我使用 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 run 脚本的名称。你在命令行中调用它，npm run myLibrary:prod让你的终端完成剩下的工作。“其余”只是您的计算机终端可以相应地读取、解释和执行的命令。

ng build myLibrary 这会触发标准的 ng CLI 构建命令，从而构建您的库

&& 这说“嘿，在你做我左边的事情之后[&&]，做我右边的事情”

mkdir dist/myLibrary/lib/assets这是一个基本的 bash 命令，它创建一个目录，您要将资产复制到该目录。 mkdir创建一个目录，路径指定我想要该目录的位置和内容。如果我是在文件夹中，我想在，说“富”，我会做了一个目录mkdir bar，这将使我foo/bar，如果我是“富”，并希望目录“玉米饼”是在“酒吧”目录下，我会做mkdir bar/tacos，它会在“bar”目录中创建“tacos”，比如foo/bar/tacos.

我更喜欢创建一个文件夹并从 a -> b 移动资产，而不是尝试 cp 文件夹及其资产。

cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ 对于 bash 新手，这部分分为 4 部分。

1. cp 是“复制”
2. -R 用于“递归”，意思是获取所有文件和文件夹，并在复制后保持相同的结构。
3. projects/myLibrary/src/lib/assets/这是我想要移动到我之前使用上一个mkdir命令创建的新目录的资产所在的位置。
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 脚本，它告诉敲击键盘的人资产已被复制。我通常在我的脚本中使用表情符号来显示消息，以便开发人员通过识别屏幕上的表情符号来更轻松地查看脚本在任何时间点的确切位置。例如...

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

炸药爆炸！