Làm cách nào để bao gồm javascript + css từ node_modules trong ionic 2?

Question

Tôi cần bao gồm fullcalendar và chart.js trong ứng dụng ionic 2 của mình. (ionic 2 RC.3) Tôi đã sử dụng npm để cài đặt các mô-đun liên quan và các tập lệnh nằm trong thư mục node_modules của tôi.
Làm cách nào để bao gồm tập lệnh/css đúng cách từ thư mục node_modules vào ứng dụng của tôi?

Những điều tôi đã cố gắng:

• thủ sao chép js liên quan/file css vào thư mục www, và tài liệu tham khảo chúng với bình thường <script> và <link> yếu tố trong index.html. (tôi chủ yếu là nhận được điều này để làm việc, nhưng có vẻ như cực kỳ phiền phức)
• nhập chúng trong app.module.ts tôi và/hoặc component.ts tùy chỉnh tác phẩm của tôi, chẳng hạn như import 'chart.js/dist/Chart.bundle.min.js'; (loại này của tác phẩm, nhưng tôi nhận được lỗi mà các kịch bản cơ bản không thể tìm thấy jQuery, vì vậy tôi vẫn phải bao gồm jQuery trong index.html theo cách thủ công như trên)

Chắc chắn có cách nào tốt hơn?

Answer 1

Tôi tin rằng đây là cách sạch nhất mà tôi đã thấy nó được thực hiện.

Về cơ bản, chúng tôi sẽ ghi đè phần bản sao của tập lệnh xây dựng ion. Họ đã tạo ra các kịch bản xây dựng để khuyến khích điều này và làm cho nó đơn giản.

Giả sử bạn đã sử dụng NPM để cài đặt bất cứ điều gì bạn cần thư viện:

npm install chart.js --save 

(dùng để cài đặt thư viện chart.js vào thư mục node_packages trong thư mục gốc của dự án)

Nhìn vào /node_modules/@ionic/app-scripts/config/copy.config.js. Đây là những gì chúng tôi đang ghi đè, vì vậy hãy sao chép nội dung của nó vào một tệp tại /config/copy.config.js (Bạn sẽ cần phải tạo thư mục/config).

module.exports = { 
    include: [ 
    { 
     src: '{{SRC}}/assets/', 
     dest: '{{WWW}}/assets/' 
    }, 
    { 
     src: '{{SRC}}/index.html', 
     dest: '{{WWW}}/index.html' 
    }, 
    { 
     src: '{{SRC}}/manifest.json', 
     dest: '{{WWW}}/manifest.json' 
    }, 
    { 
     src: '{{SRC}}/service-worker.js', 
     dest: '{{WWW}}/service-worker.js' 
    }, 
    { 
     src: 'node_modules/ionic-angular/polyfills/polyfills.js', 
     dest: '{{BUILD}}/polyfills.js' 
    }, 
    { 
     src: 'node_modules/ionicons/dist/fonts/', 
     dest: '{{WWW}}/assets/fonts/' 
    }, 
    { 
     src: './node_modules/chart.js/dist/Chart.bundle.min.js', 
     dest: '{{BUILD}}/Chart.bundle.min.js' 
    }, 
    ] 
}; 

Phần cuối cùng là phần chúng tôi đã thêm vào, để sao chép tệp chart.js vào nơi nào đó sẽ thực sự được đưa vào bản dựng.

Để có được kịch bản của chúng tôi được sử dụng, package.json cần phải được thông báo về điều đó, vì vậy thêm này "cấu hình" để tập /package.json của bạn:

"config": { 
    "ionic_copy": "./config/copy.config.js" 
}, 

Bây giờ khi bạn xây dựng, các tập tin sẽ được sao chép, và nó rõ ràng là dễ dàng hơn sau khi một trong những đầu tiên được thực hiện, để thêm nhiều hơn nữa. Có những phần khác của quá trình xây dựng ion, bạn cũng có thể ghi đè lên, nó đáng để xem xét.

https://ionicframework.com/docs/v2/resources/app-scripts/

Bây giờ bạn có thể gọi nó trong một cách dễ dàng, một lựa chọn là bên trong index.html:

<script src="build/Chart.bundle.min.js"></script> 

Những lợi ích được, nếu bạn cài đặt một bản cập nhật module, thay đổi tập tin sẽ được cập nhật trong xây dựng của bạn, và cũng có thể, tất cả mọi thứ hoạt động dễ dàng với vcs và thiết lập môi trường mới, như phụ thuộc được xử lý bởi npm, và phần mở rộng kịch bản của chúng tôi sẽ chăm sóc mọi thứ khác.:-)

Hy vọng điều đó sẽ hữu ích! :-)