web-dev-qa-db-ja.com

Angular Cli Webpack、外部jsファイルを追加したはバンドルするにはどうすればいいですか？

AngularCliをSystemJsからWebpackに切り替えた後にJSファイル（ベンダー）を含める方法がわかりません。

例えば

オプションA

npmでインストールされたjsファイルがいくつかあります。このようにheadタグにscriptタグを追加してもうまくいきません。それは最善の方法ではないようです

<head>
   <script src="node_modules/some_package/somejs.js">
</head>

//With systemJs I could do this

<head>
   <script src="vendor/some_package/somejs.js">
</head>

オプションB

これらのjsファイルをwebpackバンドルの一部として含めてください。これはおそらく行われるべき方法のように思えます。しかし、webpackのコードはすべてangle-cli-webpackノードパッケージの背後に隠れているように見えるので、これをどのように行うかはわかりません。アクセスできるかもしれない別のwebpack設定があるのか​​もしれないと私は考えていました。しかし、新しいAngular-Cli-WebPackプロジェクトを作成するときに表示されなかったので、よくわかりません。

詳細情報：

含めようとしているjsファイルは、Angularプロジェクトの前に含める必要があります。たとえば、jQueryやサードパーティのjs libで、実際にはモジュールのロードやTypeScript用に設定されていません。

参考文献https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.mdhttps://github.com/angular/angular-cli/tree/webpack

javascriptangularangular-cli
74
Kris Hollenbeck

Angular 7.x.xを含むAngular-Cli 7.x.xを最後にテストしました

これはscripts:[]の.angular-cli.jsonを使って達成できます。

{
  "project": {
    "version": "1.0.0",
    "name": "my-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

注：As ドキュメントに記載されているように グローバルライブラリインストールの場合：styles（またはscripts！）の値を変更する場合プロパティ、そして：

実行している場合はng serveを再起動します。

.. scripts.bundle.jsファイルを介して** globalcontextで実行されたスクリプトを見るため。

注：以下のコメントで説明しているように。 jQueryなどの es6 imports を介してUMDモジュールをサポートするJSライブラリも、es6 import構文を使用してTypeScriptファイルにインポートできます。例えば、import $ from 'jquery';です。

81
Kris Hollenbeck

scripts:[]を使用するのと、<head>を使用して<script>に何かを追加するのとでは微妙な違いがあります。 scripts:[]からのスクリプトは、常にbodyタグにロードされるscripts.bundle.jsに追加されます。したがって、ロードされますAFTER<head>内のスクリプト。したがって、スクリプトのロード順序が重要な場合（つまり、グローバルポリフィルをロードする必要がある場合）、スクリプトをフォルダに手動でコピーし（npmスクリプトなど）、このフォルダをとして追加します。 ）アセットから.angular-cli.jsonへ。

ですから、もしあなたが本当にロードされているものに依存しているのであれば以前角度そのもの（オプションA）、あなたはそれを手動でコピーする必要があります。アングルビルドに含まれるフォルダで、<script>の<head>で手動で読み込むことができます。

したがって、オプションaを達成するには、次の条件を満たす必要があります。

  • src/にvendorフォルダーを作成します。

  • このフォルダをアセットとして.angular-cli.jsonに追加します。"assets": [ "assets", "favicon.ico", "vendor" ]

  • ベンダーのスクリプトnode_modules/some_package/somejs.jsをvendorにコピーします。

  • 手動でそれをindex.htmlにロードしてください：<head> <script src="vendor/some_package/somejs.js"> </head>

しかし、ほとんどの場合、このアプローチはパッケージに対してのみ必要です。グローバルに利用可能である必要があります--- beforeその他すべて（つまり特定のpolyfills）。 Krisの答えはオプションBに当てはまり、あなたはwebpackビルド（Minification、Hashes、...）の恩恵を受けます。

ただし、スクリプトが必要ではないグローバルに利用できるようになっていてモジュール対応であればsrc/polyfills.tsにインポートできます。特定のコンポーネントに必要な場合にのみインポートしてください。 。

スクリプトをscripts:[]または手動でロードすることによってグローバルに利用できるようにすることはそれ自身の問題のセットをもたらし、本当に必要なときにだけ実際に使用されるべきです。

12
Christian Ulbrich

ファイル.angular-cli.jsonを開いて"scripts:"を検索する必要があります。あるいは外部CSSを追加する場合は、同じファイルでWord "styles":を見つける必要があります。

以下に示す例として、ブートストラップJs（bootstrap.min.js）とブートストラップCSS（bootstrap.min.css）が.angular-cli.jsonにどのように含まれているかがわかります。

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

あなたがあなた自身のjsファイルを持っているのであればあなたはここの同じ場所（.angular-cli.json）の"scripts":[]にあなたのファイルパスを追加することができます。

3
Prashant Barve

このページをご覧になるとよいかもしれません。 https://github.com/angular/angular-cli#global-library-installation

.jsファイルと.cssファイルを含める方法の基本を示します。

一部のJavaScriptライブラリはグローバルスコープに追加し、まるでそれらがscriptタグの中にあるかのようにロードする必要があります。これは、angle-cli.jsonのapps [0] .scriptsおよびapps [0] .stylesプロパティを使用して実行できます。

2
Svenn