Jak dołączyć jQuery i Semantic-ui do Webpack Angular 2

Question

Jestem nowy w Webpack i używam go do projektu Angular2 (https://angularclass.github.io/angular2-webpack-starter/).

Mam trudności z uruchomieniem jQuery i Semantic-ui (zarówno .css, jak i .js) po npm install. Przypuszczam, że to nieco problematyczne, ponieważ obie biblioteki nie są w dowolnym formacie modułu i nie może być po prostu require(...) ed lub import ed

Czy muszę włączyć je po prostu w index.html jako normalne, czy jest tam „WebPACK sposób” to zrobić?

Answer 1

Wykonaj następujące kroki:

1. zainstalować Semantic-UI przy użyciu KMP: npm install semantic-ui --save
   i postępuj zgodnie z instrukcjami w trakcie procesu instalacji.
   Zainstalowałem go pod src/assets.

2. "Zbuduj" semantycznie za pomocą gulp build w swoim katalogu.
   Spowoduje to utworzenie innego katalogu pod /semantic o nazwie dist lub innej nazwy ustawionej jako katalog wyjściowy podczas procesu instalacji.
   

3. Teraz będziemy musieli powiedzieć Webpakowi, aby załadował pliki semantyczne .js i .css (te w nowo utworzonym katalogu /semantic/dist/).
   Wygenerowałem swój projekt za pomocą angular-cli i mam moje configs w katalogu głównym w pliku o nazwie angular-cli.json.
   Wygląda to tak:
   https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
   poszukaj "style" i "skrypty" w JSON i dodać minified .css semantycznej i js odpowiednio:
   "assets/semantic/dist/semantic.min.css"
   i
   "assets/semantic/dist/semantic.min.js"

4. As już zadeklarowałeś w swoim pytaniu, Semantic-UI potrzebuje jQuery, aby działać.
   Będziemy po prostu dodać skrypt do < .head> z index.html (w katalogu /src):
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5. zbudować lub służyć swoją aplikację ponownie i należy mieć Semantic-UI działa prawidłowo;)
   
   Mam nadzieję, że to pomoże.