EmberJS - Quản lý sự phụ thuộc

Ember sử dụng NPM và Bower để quản lý các phụ thuộc được định nghĩa trong package.json cho NPM và bower.json cho Bower. Ví dụ: bạn có thể yêu cầu cài đặt SASS cho các biểu định kiểu của mình mà Ember chưa cài đặt trong khi phát triển ứng dụng Ember. Để thực hiện điều này, hãy sử dụng Ember Addons để chia sẻ các thư viện có thể tái sử dụng. Nếu bạn muốn cài đặt bất kỳ khung CSS hoặc phụ thuộc JavaScript datepicker nào, hãy sử dụng trình quản lý gói Bower.

Addons

Các Ember CLI có thể được sử dụng để cài đặt các Addons Ember bằng cách sử dụng lệnh sau -

ember install ember-cli-sass

Lệnh cài đặt ember sẽ lưu tất cả các phụ thuộc vào tệp cấu hình tương ứng.

Bower

Nó là trình quản lý gói cho web quản lý các thành phần của tệp HTML, CSS, JavaScript hoặc tệp hình ảnh. Về cơ bản, nó duy trì và giám sát tất cả các gói và kiểm tra các bản cập nhật mới. Nó sử dụng tệp cấu hình bower.json để theo dõi các ứng dụng được đặt ở gốc của dự án Ember CLI.

Bạn có thể cài đặt các phụ thuộc của dự án bằng cách sử dụng lệnh sau:

bower install <dependencies> --save

Tài sản

Bạn có thể đặt JavaScript của bên thứ ba trong nhà cung cấp / thư mục của dự án mà không có sẵn dưới dạng gói Addon hoặc Bower và đặt các tài sản riêng như robots.txt, favicon, v.v. trong thư mục / công khai của dự án của bạn. Các phần phụ thuộc không được Ember cài đặt trong khi phát triển ứng dụng Ember, nên được đưa vào bằng cách sử dụng tệp kê khai ember-cli-build.js .

Mô-đun JavaScript AMD

Bạn có thể cung cấp đường dẫn nội dung làm đối số đầu tiên và danh sách các mô-đun và xuất làm đối số thứ hai. Bạn có thể đưa các nội dung này vào tệp kê khai ember-cli-build.js dưới dạng:

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
   exports: {
      'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request'
      ]
   }
});

Tài sản cụ thể về môi trường

Các nội dung khác nhau có thể được sử dụng trong các môi trường khác nhau bằng cách xác định đối tượng làm tham số đầu tiên là tên môi trường và giá trị của một đối tượng nên được sử dụng làm nội dung trong môi trường đó. Trong tệp kê khai ember-cli-build.js , bạn có thể bao gồm:

app.import ({
   development: 'bower_components/ember/ember.js',
   production:  'bower_components/ember/ember.prod.js'
});

Các tài sản khác

Khi tất cả các nội dung được đặt trong thư mục / public , chúng sẽ được sao chép vào thư mục dist /. Ví dụ: nếu bạn sao chép một biểu tượng yêu thích được đặt tại thư mục public / images / favicon.ico , nó sẽ được sao chép vào thư mục dist / images / favicon.ico . Nội dung của bên thứ ba có thể được thêm theo cách thủ công trong nhà cung cấp / thư mục hoặc bằng cách sử dụng trình quản lý gói Bower thông qua tùy chọn import () . Các nội dung không được thêm bằng cách sử dụng tùy chọn import () , sẽ không có trong bản dựng cuối cùng.

Ví dụ: hãy xem xét dòng mã sau đây nhập nội dung vào thư mục dist / .

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');

Dòng mã trên tạo một tệp phông chữ trong dist / font-awesome / phông chữ / fontawesomewebfont.ttf . Bạn cũng có thể đặt tệp trên tại một đường dẫn khác như hình dưới đây -

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
});

Nó sẽ sao chép tệp phông chữ trong dist / asset / fontawesome-webfont.ttf .