Użyj biblioteki ES6 w projekcie Ember-cli

Question

Mam małą aplikację EmberJS, która używa Ember-Cli. Moja aplikacja ma prywatną bibliotekę ES6, która jest zależna od typu bower. Zasadniczo, chcę zaimportować bibliotekę i używać jej tam, gdzie chcę.

Jeśli się nie mylę, powinienem przenieść bibliotekę do mojego brocfile.js i użyć jej później. Niestety, nie mogę podać zbyt wielu konkretnych informacji, ale postaram się jak najlepiej być bardziej przejrzystym.

Moja biblioteka zewnętrzna nosi nazwę main-lib i jest skonstruowany w następujący sposób (on pracuje w innym projekcie):

• bower_components
  • main-lib
    • api.js
    • główne .js
    • message.js

W pliku main.js, mam następujące:

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

var main = {}; 

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

export default main; 

Więc, co chcę zrobić, jest w mojej aplikacji, aby importować main i korzystać z różnych funkcji zawiera.

przykład w pewnym kontrolera emberjs:

import Main from 'main'; 

//use Main here 

Aby to zrobić, myślałem o wykonanie następujących czynności w moich brocfile.js

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

Jednak to nic nie robi. Zasadniczo chcę, aby pliki transpiled zostały uwzględnione w vendor.js lub gdzieś, gdzie będę w stanie korzystać z biblioteki poprzez importowanie.

Jest coś, czego tu brakuje, ale nie mogę tego wskazać.

Edit1: Po dodaniu tych linii na końcu moich brocfile.js:

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

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

mogę dostać ES5, który wygląda tak:

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

    var main = {}; 

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

    var _main = main; 
    return _main; 
}); 

Problem polega na tym, że to nie importuje również main/api i main/message. Czy muszę powtarzać kod dla każdego pliku, który chcę?

Również plik nie jest łączony w vendor.js ale po prostu, ale u podstaw /dist

Answer 1

Masz następujące: import Api from 'main/api' - ale nie widzę folder o nazwie main w co już wyjaśnione - tylko folder o nazwie main-lib ...

Czyżby main/api i main/message nie są wliczone ponieważ w rzeczywistości nie istnieją? Może trzeba użyć main-lib/api i main-lib/message w pliku main.js

Answer 2

Integracja Brokuły z ember-CLI zawiera już transpiler, więc myślę, że coś takiego powinno wystarczyć:

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

A potem można:

import Main from 'main'; 

---

Z tym, co aktualnie masz w swojej Brocfile, musisz jeszcze scalić swoje amdFiles (app.import, zrobisz to za ciebie).

Coś jak:

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


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

---

Nic z tego nie jest testowana, ale masz pomysł.

Answer 3

Ember wydają się być advocating używając: https://www.npmjs.com/package/broccoli-es6modules

Oznaczałoby to importowanie modułu będzie wyglądać następująco:

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])