Cách đưa jQuery và Semantic-ui vào Webpack Angular 2

Question

Tôi mới sử dụng Webpack và sử dụng nó cho dự án Angular2 (https://angularclass.github.io/angular2-webpack-starter/).

Tôi đang gặp khó khăn khi tải jQuery và Semantic-ui để hoạt động (cả .css và .js) sau khi nhập npm install. Tôi cho rằng nó hơi có vấn đề vì cả hai thư viện đều không có định dạng mô-đun nào và không thể chỉ đơn giản là require(...) ed hoặc import ed

Tôi có cần bao gồm chúng đơn giản trong index.html như bình thường hay không. để làm điều này ?

Answer 1

Thực hiện theo các bước sau:

1. Install Semantic-UI sử dụng NPM: npm install semantic-ui --save
   và làm theo hướng dẫn trong quá trình cài đặt.
   Tôi đã cài đặt nó theo src/assets.

2. "Xây dựng" ngữ nghĩa bằng cách sử dụng gulp build bên trong thư mục của nó.
   Thao tác này sẽ tạo một thư mục khác dưới /semantic được gọi là dist hoặc bất kỳ tên nào bạn đặt làm thư mục đầu ra trong quá trình cài đặt.
   

3. Bây giờ chúng tôi sẽ phải yêu cầu Webpack tải tệp .js và .css của Semantic (các tệp trong thư mục /semantic/dist/ mới được tạo).
   Tôi đã tạo dự án của mình bằng cách sử dụng angular-cli và có cấu hình của tôi trong thư mục gốc trong tệp có tên angular-cli.json.
   Nó trông như thế này:
   https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
   Look cho "phong cách" và "kịch bản" trong JSON và thêm .css được rút gọn Semantic và .js tương ứng:
   "assets/semantic/dist/semantic.min.css"
   và
   "assets/semantic/dist/semantic.min.js"

4. Như bạn đã nêu trong câu hỏi của bạn, Semantic-UI cần jQuery để làm việc.
   Chúng tôi sẽ chỉ cần thêm đoạn mã vào < .head> của index.html (trong thư mục /src):
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5. xây dựng hoặc phục vụ ứng dụng của bạn một lần nữa và bạn nên có Semantic-UI hoạt động bình thường;)
   
   Hy vọng điều này sẽ hữu ích.