BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Angular Cli Webpack、外部jsファイルを追加またはバンドルする方法？

2023-05-22 11:09:54

質問

Angular CliをSystemJsからWebpackに変更した後、JSファイル（ベンダー）をどのようにインクルードすればよいかわかりません。

例えば

オプションA

npm経由でインストールしたjsファイルがあります。このようにscriptタグをheadタグに追加してもうまくいきません。また、最良の方法とも思えません。 

<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のコードがangular-cli-webpackノードパッケージの後ろに隠されているように見えるので、これを行う方法がわからない。私は、私たちがアクセスできるかもしれない別のwebpackの設定があるのではないかと考えていました。しかし、私は新しいangular-cli-webpackプロジェクトを作成するときに1つを見なかったので、私は確信がありません。

詳細な情報です。

私がインクルードしようとしている js ファイルは、Angular プロジェクトの前にインクルードする必要があります。例えば、jQueryや、モジュールロードやタイプスクリプトのために実際にセットアップされていないサードパーティのjs libなどです。

リファレンス https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

どのように解決するのですか？

Angular 11.x.xでangular-cli 11.x.xを使用して最後にテストされました。

これを実現するには scripts:[] で angular.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
  }
}

注意 として として、ドキュメントでは の値を変更すると、グローバルライブラリのインストールは完了します。 styles (または scripts !) プロパティであれば

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

...スクリプトが **globalcontext で実行されるのを見るには scripts.bundle.js ファイルを通してグローバルコンテキストで実行されるスクリプトを見ることができます。

注意 以下のコメントで述べられているように UMD モジュールをサポートする JS ライブを経由して es6 インポート でUMDモジュールをサポートしているJSライブラリ、例えばjQueryもes6 import構文でtypescriptファイルにインポートすることができます。例えば import $ from 'jquery'; .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します