25

在构建和打包 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/iconsdist/lib1/assets/icons

如果我运行,ng buildsrc/assets(根 src/assets)正在被复制,但不是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

4

5 回答 5

17

目前,我还没有找到官方内置的方法来做到这一点。

我打开了一个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/",
}

scss-bundle要复制我与配置文件一起使用的 SASS 文件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 -Rrsync.

而且,当然,ng build我没有运行,而是运行npm run build.

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

于 2018-06-05T18:28:35.010 回答
5

看起来将来这一切都可以通过 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 barfoo/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 个部分。

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

轰炸炸药!

于 2019-07-30T19:30:29.083 回答
4

当您提出问题时,除非您创建处理逻辑的 js 脚本,否则无法将 css 文件包含在 dist 文件夹中。

现在有可能,因为ng-packagr发布了一个新版本,允许您将资产与构建文件一起包含:

您可以使用 assets 选项复制这些资产。

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

更多信息在这里:https ://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

于 2020-03-30T12:46:41.890 回答
3

现在您可以使用最新版本的打包程序(版本 9.0.0-rc.3)来执行此操作。请查看此处提供的示例

于 2019-12-10T11:07:19.843 回答
-1

我只是手动将我需要的图像复制到 /dist/assets 并作为我给 /assets/image.jpg 的库中的 URL

于 2020-11-19T15:19:33.343 回答