Làm thế nào để bao gồm jQuery đúng trong cli góc 1.0.0-rc.0?

Question

Tôi sử dụng thành phần select2 dựa trên jQuery trong dự án AngularJS của tôi. Tôi có vấn đề tương tự như những kẻ ở đây: https://github.com/fronteed/icheck/issues/322, và giải quyết nó bằng cách sử dụng lời khuyên từ đó. Để chính xác, tôi đã nhận được lỗi TypeError: $(...).select2 is not a function khi không sử dụng lời khuyên đó.

tức là tôi đã thêm các dòng tiếp theo vào cấu hình Webpack trong @angular/cli/models/webpack-configs/common.js.

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
] 

Đây có phải là cách tốt nhất để kích hoạt jQuery trong góc/cli?

Tôi không nghĩ rằng làm tương tự như trong https://github.com/angular/angular-cli/wiki/stories-global-lib là cách chính xác, bởi vì

a) webpack bó jQuery mà không cần phải xác định nó trong kịch bản

b) nó vẫn ném TypeError: $(...).select2 is not a function lỗi khi bạn bao gồm nó như được mô tả trong câu chuyện.

Answer 1

Tôi có thể đạt được những gì tôi cần bằng cách trưng ra Webpack. Sử dụng lệnh ng eject.

Trước tiên, hãy cài đặt jQuery bằng cách sử dụng npm install -S jquery (và tôi cũng đã cài đặt npm install -S select2, vì tôi cũng cần điều đó).

Sau đó, hãy đảm bảo rằng bạn đã sao lưu tệp package.json của mình, vì trong ng eject CLI góc sẽ cố gắng thêm các phụ thuộc Webpack của nó vào trong package.json của bạn.

Sau ng eject hoàn tất công việc, bên trong webpack.config.js tôi thêm

// ... Inside require/imports part 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 

// ... Inside `plugins` section of Webpack configuration 
new ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 

Và bây giờ Select2 thêm $(...).select2 chức năng để đối tượng jQuery toàn cầu đúng cách!

Để sử dụng jQuery với Select2 bên nộp .ts của bạn, bạn có thể thêm dòng tiếp theo vào đầu tập tin đó:

import "select2"; 
import "jquery"; 
declare var $: any; 

// Somewhere deep within component 
// ... 

$(this.input.nativeElement) 
    .select2(config) 
    .on("change select2:select select2:unselect", (e: any) => this.onSelect2ElementChange(e)); 

// ... 

Answer 2

Thêm vào theo cách tương tự như liên kết mà bạn đã cung cấp sẽ đảm bảo nó được tải. Nếu không hãy thử dưới đây trong thành phần của bạn.

npm install jquery 

Sau đó sử dụng trong thành phần của bạn

declare var $:any; 
var $ = require('jquery'); 

Answer 3

tôi sử dụng jQuery trong dự án của tôi như sau.

1. Cài đặt jQuery

   npm install --save jquery 
   

2. Cài đặt jQuery loại, định nghĩa cho loại hình kiểm tra.

   npm install --save-dev @types/jquery 
   

3. Thêm refenece tệp jquery trong mảng "tập lệnh" vào bên trong tệp angular-cli.json.

   "scripts": [ 
       "../node_modules/jquery/dist/jquery.min.js" 
   ] 
   

4. nhập jquery vào bất kỳ thành phần nào bạn muốn sử dụng.

   import * as jQuery from 'jquery'; 
   

đó là nó. giống như cách bạn cũng có thể sử dụng các thư viện khác như moment.js, d3.js v.v.

Answer 4

Bạn cũng có thể sử dụng expose-loader. Ví dụ bên dưới được viết cho webpack 2,

{ test: /[\/]jquery\.js$/, 
    use: [ 
     { loader: 'expose-loader', query: 'jQuery' }, 
     { loader: 'expose-loader', query: '$' } 
    ] 
    },