Использование библиотеки ES6 в проекте Ember-cli

У меня есть небольшое приложение EmberJS, которое использует Ember-Cli. Мое приложение имеет частную библиотеку ES6, которая зависит от бауэр. В принципе, я хочу импортировать библиотеку и использовать ее везде, где захочу.

Если я не ошибаюсь, я должен переслать библиотеку в свой brocfile.js и использовать ее позже. К сожалению, я не могу предоставить слишком много конкретной информации, но я постараюсь сделать все возможное, чтобы быть более ясным.

Моя внешняя библиотека называется main-lib и структурирована следующим образом (она работает в другом проекте):

  • bower_components
    • Основной Пб
      • api.js
      • main.js
      • message.js

В файле main.js у меня есть следующее:

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

var main = {};

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

export default main;

Итак, что я хочу сделать, в моем приложении импортировать main и использовать различные функции, которые он содержит.

Пример, в некотором контроллере emberjs:

import Main from 'main';

//use Main here

Чтобы сделать это, я подумал о том, чтобы сделать следующее в моем файле 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'
  }
});

Однако это ничего не делает. В принципе, я хочу, чтобы переданные файлы были включены в vendor.js или где-нибудь, где я мог бы использовать библиотеку, импортировав ее.

Там что-то мне не хватает, но я не могу точно определить его.

Edit1: После добавления этих строк в конец моего файла brocfile.js:

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

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

Я могу получить ES5, который выглядит так:

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

    var main = {};

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

    var _main = main;
    return _main;
});

Проблема заключается в том, что он не импортирует main/api и main/message. Должен ли я повторять код для каждого файла, который я хочу?

Кроме того, файл не конкатенируется в vendor.js, а просто, но в корне /dist

Ответы

Ответ 1

У вас есть следующее: import Api from 'main/api' - но я не вижу папку с именем main в том, что вы объяснили, - только папка с именем main-lib...

Может ли быть, что main/api и main/message не включены, потому что их на самом деле не существует? Возможно, вам понадобится использовать main-lib/api и main-lib/message в вашем файле main.js

Ответ 2

Интеграция брокколи с ember-cli уже включает транспилер, поэтому я думаю, что этого должно быть достаточно:

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

И затем вы можете:

import Main from 'main';

С тем, что у вас есть в вашем Brocfile, вам все равно нужно объединить ваш amdFiles (app.import сделает это для вас).

Что-то вроде:

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


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

Ничего из этого не проверено, но вы получаете идею.

Ответ 3

Эмбер, похоже, выступает, используя: https://www.npmjs.com/package/broccoli-es6modules

Это означает, что импортирование вашего модуля будет выглядеть примерно так:

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