Utilizzare la libreria ES6 nel progetto Ember-cli

Question

Ho una piccola applicazione EmberJS che utilizza Ember-Cli. La mia applicazione ha una libreria ES6 privata che è una dipendenza bower. Fondamentalmente, quello che voglio è importare la libreria e usarla dove voglio.

Se non sbaglio, dovrei traspondere la libreria nel mio brocfile.js e usarla in seguito. Sfortunatamente, non posso fornire troppe informazioni concrete, ma farò del mio meglio per essere il più chiaro possibile.

La mia libreria esterna si chiama main-lib ed è strutturato nel modo seguente (si sta lavorando in un altro progetto):

• bower_components
  • main-lib
    • api.js
    • principali .js
    • message.js

Nel file main.js, ho il seguente:

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

var main = {}; 

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

export default main; 

Quindi, quello che voglio fare, è, nella mia richiesta, per importare main e utilizzare le diverse funzioni contiene.

esempio, in un certo controllo emberjs:

import Main from 'main'; 

//use Main here 

Per farlo, ho pensato di fare quanto segue nei miei 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' 
    } 
}); 

Tuttavia, questo non fa nulla. Fondamentalmente, voglio che i file transpiled siano inclusi in vendor.js o da qualche parte dove sarei in grado di usare la libreria importandola.

C'è qualcosa che mi manca qui ma non riesco a individuarlo.

Edit1: Dopo aver aggiunto queste righe alla fine dei miei brocfile.js:

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

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

posso ottenere un ES5 che assomiglia a questo:

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

    var main = {}; 

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

    var _main = main; 
    return _main; 
}); 

Il problema è che si non importa main/api e main/message pure. Devo ripetere il codice per ogni file che voglio?

Inoltre, il file non viene concatenato in vendor.js ma semplicemente ma alla radice di /dist

Answer 1

sono disponibili le seguenti: import Api from 'main/api' - ma non vedo una cartella denominata main in quello che hai spiegato - solo una cartella chiamata main-lib ...

Potrebbe essere che main/api e main/message non sono inclusi perché in realtà non esistono? Potrebbe essere necessario utilizzare main-lib/api e main-lib/message nel file main.js

Answer 2

L'integrazione di broccoli con brace-cli include già un transpiler, quindi penso che qualcosa di simile a questo dovrebbe essere sufficiente:

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

e poi si può:

import Main from 'main'; 

---

Con quello che hai attualmente nel tuo Brocfile hai ancora bisogno di unire il tuo amdFiles (app.import lo farebbe per te).

Qualcosa di simile:

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


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

---

Niente di tutto questo è testato, ma si ottiene l'idea.

Answer 3

Ember sembrano essere advocating utilizzando: https://www.npmjs.com/package/broccoli-es6modules

Questo vorrebbe dire importare il modulo potrebbe essere simile:

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