在 Ember-cli 项目中使用 ES6 库

Question

我有一个使用 Ember-Cli 的小型 EmberJS 应用程序。我的应用程序有一个私有的 ES6 库，它是一个 bower 依赖项。基本上，我想要的是导入库并在任何我想用的地方使用它。

如果我没记错的话，我应该在 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

的根目录中

Answer 1

Broccoli 与 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]);

None这个已经测试过了，但是你明白了。

Answer 2

您有以下内容：import Api from 'main/api' - 但在您解释的内容中我没有看到名为 main 的文件夹 - 只有一个名为 main-lib 的文件夹 ...

会不会因为main/api和main/message其实不存在所以没有包含？您可能需要在 main.js 文件

中使用 main-lib/api 和 main-lib/message

Answer 3

Ember 好像是 advocating using: 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])

在 Ember-cli 项目中使用 ES6 库

Use ES6 library in Ember-cli project

javascript

ember.js