Angular Cli Webpack, jak dodawać lub pakować zewnętrzne pliki js?

Question 1

Nie jestem pewien, jak dołączyć pliki JS (dostawców) po przełączeniu Angular Cli z SystemJs na Webpack.

Na przykład

Opcja A

Mam kilka plików js, które zostały zainstalowane przez npm. Dodawanie tagów skryptu do tagu head w ten sposób nie działa. Nie wydaje się też najlepszym sposobem.

<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>

Opcja B.

Dołącz te pliki js jako część pakietu webpack. Wydaje się, że tak powinno być. Jednak nie jestem pewien, jak to zrobić, ponieważ cały kod pakietu webpack wydaje się być ukryty za pakietem węzłów angular-cli-webpack. Pomyślałem, że może jest inna konfiguracja pakietu internetowego, do której moglibyśmy mieć dostęp. Ale nie jestem pewien, ponieważ nie widziałem go podczas tworzenia nowego projektu angular-cli-webpack.

Więcej informacji:

Pliki js, które próbuję dołączyć, muszą zostać dołączone przed projektem Angular. Na przykład jQuery i biblioteka js innej firmy, która nie jest tak naprawdę skonfigurowana do ładowania modułu lub maszynopisu.

Odnośniki https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

Question 2

Ostatnio testowane przy użyciu angular-cli 7.xx z Angular 7.xx

Można to osiągnąć stosując scripts:[]w .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
  }
}

Uwaga: Jak sugeruje dokumentacja w instalacji biblioteki globalnej: jeśli zmienisz wartość swojej styles(lub scripts!) Właściwości, to:

Uruchom ponownie usługę, jeśli ją uruchamiasz,

..aby zobaczyć skrypty wykonywane w ** globalcontext za pośrednictwem scripts.bundle.jspliku.

Uwaga: jak omówiono w komentarzach poniżej. Biblioteki JS, które obsługują moduły UMD za pośrednictwem importu es6, takie jak jQuery, można również importować do plików maszynopisu przy użyciu składni importu es6. Na przykład: import $ from 'jquery';.

Question 3

Istnieje subtelna różnica pomiędzy używaniem scripts:[]a potem dodaniem czegoś do <head>with <script>. Skrypty z scripts:[]get są dodawane do, scripts.bundle.jsktóre są zawsze ładowane w tagu body i tym samym będą ładowane PO skryptach w <head>. Tak więc, jeśli kolejność ładowania skryptów ma znaczenie (tj. Musisz załadować globalny polyfill), jedyną opcją jest ręczne skopiowanie skryptów do folderu (np. Skryptem npm) i dodanie tego folderu jako zasobu do .angular-cli.json.

Więc jeśli naprawdę zależy ci na tym, aby coś było ładowane przed samym angularem ( opcja A ), musisz skopiować to ręcznie do folderu, który zostanie uwzględniony w kompilacji kątowej, a następnie możesz załadować go ręcznie za pomocą pliku <script>in <head>.

Dlatego, aby uzyskać opcję a , musisz:

utwórz vendorfolder wsrc/
dodaj ten folder jako zasób do .angular-cli.json:

"assets": [
    "assets",
    "favicon.ico",
     "vendor"
  ]

skopiuj skrypt dostawcy node_modules/some_package/somejs.jsdovendor
załaduj go ręcznie w index.html: <head> <script src="vendor/some_package/somejs.js"> </head>

Jednak w większości przypadków takie podejście jest potrzebne tylko w przypadku pakietów, które muszą być dostępne globalnie, przede wszystkim (np. Niektóre wypełnienia). Odpowiedź Krisa jest prawdziwa dla Opcji B i możesz skorzystać z kompilacji pakietu internetowego (minifikacja, skróty, ...).

Jednak jeśli twoje skrypty nie muszą być globalnie dostępne i jeśli są gotowe do modułów , możesz je zaimportować src/polyfills.tslub nawet lepiej zaimportować je tylko wtedy, gdy potrzebujesz ich w określonych komponentach.

Udostępnianie skryptów globalnie poprzez scripts:[]lub poprzez ich ręczne ładowanie przynosi własny zestaw problemów i powinno być używane tylko wtedy, gdy jest to absolutnie konieczne.

Question 4

Musisz otworzyć plik .angular-cli.jsonpliku i musisz wyszukać "scripts:"lub jeśli chcesz dodać zewnętrzny css, musisz znaleźć słowo "styles":w tym samym pliku.

Jako przykład pokazany poniżej zobaczysz, jak bootstrap Js ( bootstrap.min.js) i bootstrap CSS ( bootstrap.min.css) zawiera .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"
  ],

Na pewno, jeśli masz własny plik js, możesz dodać ścieżkę do pliku tutaj w .angular-cli.jsontym samym miejscu (w "scripts":[]).

Question 5

Możesz zajrzeć na tę stronę: https://github.com/angular/angular-cli#global-library-installation

Przedstawia podstawy dołączania plików .js i .css

Niektóre biblioteki javascript należy dodać do zakresu globalnego i załadować tak, jakby znajdowały się w tagu skryptu. Możemy to zrobić za pomocą właściwości apps [0] .scripts i apps [0] .styles z angular-cli.json.

Question 6

Nie używałem wcześniej angular-cli, ale obecnie pracuję z kompilacją Angular / Webpack. W celu zapewnienia mój wniosek z jQuery i innych dostawców używać wtyczki WebPACK, w ProvidePlugin(). Zazwyczaj będzie to webpack.config.jsznajdować się w twoim : Oto przykład dla bibliotek jquery, lodash i moment. Oto link do dokumentacji (która jest w najlepszym przypadku niejasna)

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'lodash',
    moment: 'moment',
  })
]

Co niewiarygodne, w rzeczywistości umożliwia to natychmiastowe użycie, pod warunkiem, że wszystkie inne ustawienia pakietu webpack zostały wykonane poprawnie i zostały zainstalowane z npm.