Sử dụng thư viện ES6 trong dự án Ember-cli

Question

Tôi có một ứng dụng EmberJS nhỏ sử dụng Ember-Cli. Ứng dụng của tôi có một thư viện ES6 riêng, đó là một sự phụ thuộc bower. Về cơ bản, những gì tôi muốn là để nhập khẩu các thư viện và sử dụng nó bất cứ nơi nào tôi muốn.

Nếu tôi không sai, tôi nên transpile thư viện trong brocfile.js và sử dụng nó sau đó. Thật không may, tôi không thể cung cấp quá nhiều thông tin cụ thể nhưng tôi sẽ cố gắng hết sức để có thể rõ ràng hơn.

thư viện bên ngoài của tôi được đặt tên main-lib và được cấu trúc theo cách sau (nó được làm việc trong một dự án khác):

• bower_components
  • chính-lib
    • api.js
    • chính .js
    • message.js

Trong tập tin main.js, tôi có như sau:

import Api from 'main/api'; 
import Message from 'main/message'; 

var main = {}; 

main.api = Api; 
main.message = Message; 

export default main; 

Vì vậy, những gì tôi muốn làm, là, trong ứng dụng của tôi, nhập khẩu main và sử dụng các chức năng khác nhau Nó chứa.

Ví dụ, trong một emberjs điều khiển nhất định:

import Main from 'main'; 

//use Main here 

Để làm như vậy, tôi nghĩ về cách làm như sau trong brocfile.js tôi

var tree = 'bower_components/main-lib'; 
var ES6Modules = require('broccoli-es6modules'); 
var amdFiles = new ES6Modules(tree, { 
    format: 'amd', 
    bundleOptions: { 
    entry: 'main.js', 
    name: 'mainLib' 
    } 
}); 

Tuy nhiên, điều này không có gì. Về cơ bản, tôi muốn các tập tin transpiled được bao gồm trong vendor.js hoặc một nơi nào đó mà tôi sẽ có thể sử dụng thư viện bằng cách nhập nó.

Có điều gì đó tôi thiếu ở đây nhưng tôi không thể xác định chính xác.

Edit1: Sau khi thêm những dòng này vào cuối brocfile.js tôi:

mergeTrees = require('broccoli-merge-trees') 

module.exports = mergeTrees([app.toTree(), amdFiles]); 

tôi có thể nhận được một ES5 trông như thế này:

define(['main/api', 'main/message'], function(api, message) { 

    var main = {}; 

    main.api = Api; 
    main.message = Message; 

    var _main = main; 
    return _main; 
}); 

Vấn đề là nó cũng không nhập main/api và main/message. Tôi có phải lặp lại mã cho mỗi tệp mà tôi muốn không?

Ngoài ra, các tập tin được không nối trong vendor.js mà chỉ đơn giản nhưng tại thư mục gốc của /dist

Answer 1

Bạn có những điều sau đây: import Api from 'main/api' - nhưng tôi không thấy một thư mục có tên main đến những gì bạn đã giải thích - chỉ là một thư mục có tên main-lib ...

Nó có thể được rằng main/api và main/message không được tính bởi vì họ thực sự không tồn tại? Bạn có thể cần phải sử dụng main-lib/api và main-lib/message trong main.js tập tin của bạn

Answer 2

Sự tích hợp của Bông cải xanh với ember-cli đã bao gồm một transpiler, vì vậy tôi nghĩ rằng một cái gì đó như thế này là đủ:

app.import('bower_components/main-lib/main.js', { 
    type: 'vendor', 
    exports: { 'main': ['default'] } 
); 

Và sau đó bạn có thể:

import Main from 'main'; 

---

Với những gì bạn đang có trong Brocfile của bạn, bạn vẫn cần phải hợp nhất amdFiles (app.import của bạn sẽ làm điều đó cho bạn).

Cái gì như:

mergeTrees = require('broccoli-merge-trees') 


module.exports = mergeTrees([app.toTree(), amdFiles]); 

---

Không ai trong số này được thử nghiệm, nhưng bạn sẽ có được ý tưởng.

Answer 3

Ember dường như là advocating sử dụng: https://www.npmjs.com/package/broccoli-es6modules

Điều này có nghĩa nhập khẩu mô-đun của bạn sẽ giống như thế:

var mergeTrees = require('broccoli-merge-trees'); 

var tree = './bower_components/main-lib'; 
var ES6Modules = require('broccoli-es6modules'); 
var amdFiles = new ES6Modules(tree, { 
    format: 'amd', 
    bundleOptions: { 
    entry: 'main.js', 
    name: 'main-lib' 
    } 
}); 

module.exports = mergeTrees([app.toTree(), amdFiles])