web-dev-qa-db-ja.com

Angular 6アセットでライブラリを構築する

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/assets）がコピーされますが、projects/lib1/assetsはコピーされません。

angular.jsonファイルには"assets": ["src/assets"]への参照が含まれていますが、assetsキーをプロジェクトに追加することはできません。メインのルートアプリにのみ追加できます。追加すると、次のエラーが表示されます。

スキーマの検証は次のエラーで失敗しました。データパス「」に追加のプロパティ（アセット）を含めることはできません。

また、次のカスタムコピールールをアセットに追加して、アセットをdist/appnameではなくdist/libにコピーしようとしました。

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

しかし、次のエラーが表示されます。

アセットを出力パス以外の場所に書き込むことはできません。

ビルドごとにライブラリアセットのコピーを管理する組み込みの方法はありますか？

UPDATE 06/05/2018

これに関してAngular CLIで問題を開きましたが、まだ返事がありません。 問題＃11701

angular-cliangular6ng-packagr
17
dev7

現在、私はまだそうする公式の組み込み方法を見つけていません。

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

ご覧のとおり、すべての生のSassを出荷するのではなく、1つの最終ファイルだけを出荷します。もちろん、代わりに.cssファイルにコンパイルすることもできます。

他のすべてのアセットが確実にコピーされるように、単純なMac OS/Linuxコマンドcp -Rまたはrsyncを使用します。

そして、もちろん、ng buildを実行する代わりに、npm run buildを実行します。

これがお役に立てば幸いです。より良い解決策がある場合はお知らせください。

14
dev7

将来的にはこれはすべてCLIで自動化できるように見えますが、現時点ではいくつかの解決策があります。ポストインストールスクリプトの作成を伴うものもあります。これは、大量のスクリプトを実行している場合には非常に優れたスクリプトです。 1つは手動でそれらを移動することを伴いますが、それはエラーIMOに対してあまりにもオープンです。また、ng-packagrの機能を拡張するように思われる、インストール可能なnpmパッケージをいくつか見ました（ng-packagrはライブラリを構築し、webpackはアプリを構築します）。

これらのいくつかは良く、いくつかは悪いです、IMO、私はそれらについて私が個々に考えるものには入りません、代わりに私はただ私がすることを共有します。

私はエンタープライズで作業していますAngular=アプリケーションと機能をライブラリに抽出しているので、近い将来にミニアプリでコード共有を開始できます。プロセスとビルドプロトコルにより、 ng cliを直接使用してプロジェクトをビルドするのではなく、npmスクリプトを使用しています。

すでにNPMスクリプトに精通している場合は、以下をスキップしてください。それ以外の場合は、このクイックノートが非常に役立ちます。

Angular CLIでは、次のようなものを実行します...

_ng build myProject --configuration=production_は、プロジェクトのprodビルドを実行します。

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

うん、それだけです、基本的なバッシュ:)

ただし、コマンドラインを初めて使用するユーザー向けに分類します。

_myLibrary:prod_これは、npmスクリプト（別名npm runスクリプト）の名前です。コマンドラインで_npm run myLibrary:prod_を使用して呼び出し、残りは端末に任せます。 「rest」は、コンピューター端末がそれに応じて読み取り、解釈、実行できるコマンドです。

_ng build myLibrary_これは標準のng CLIビルドコマンドをトリガーし、ライブラリをビルドします

_&&_これは、「あなたが私の左にあることをした後[&&]、私の右にあることをやる」と言う

_mkdir dist/myLibrary/lib/assets_これは、資産をコピーするディレクトリを作成する基本的なbashコマンドです。 mkdirはディレクトリを作成し、パスはそのディレクトリの場所と場所を指定します。 「foo」などのディレクトリを作成したいフォルダにいた場合、「foo」にあり、「tacos」ディレクトリが必要だった場合、_mkdir bar_を実行して_foo/bar_を取得します。 「bar」ディレクトリに移動するには、_mkdir bar/tacos_を実行し、_foo/bar/tacos_のような「bar」ディレクトリに「tacos」を作成します。

フォルダーとそのアセットをcpしようとするよりも、フォルダーを作成し、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",
    }
}

_

ブームはダイナマイトになります！

2
anothercoder