在Ember-cli项目中使用ES6库

Question

在Ember-cli项目中使用ES6库

javascriptember.js

20

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

如果我没错的话，应该在我的brocfile.js中转换库，然后使用它。不幸的是，我无法提供太多具体信息，但我会尽最大努力让它尽可能清晰明了。

我的外部库名为main-lib，结构如下（在另一个项目中运行）：

bower_components
- main-lib
  - 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 或者其他地方，我可以通过导入来使用该库。

我错过了一些东西，但我无法准确定位它。

编辑1：在我的 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 的根目录下。

- etiennenoel

3个回答

2

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

这些内容没有经过测试，但是你可以理解。

- givanse

执行你提到的第一件事，也就是 app.import，会将 main.js 的内容放入 vendor.js 文件中，但不会对其进行转译。 - etiennenoel

如果我保留之前的代码并添加您答案的第二部分，该代码无法在vendor.js文件中找到自己... - etiennenoel

2

Ember似乎正在倡导使用：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])

- jonathanKingston

@etiennenoel，你尝试过这个方法吗？ - jonathanKingston

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jmurphyau · Accepted Answer

你有以下内容：import Api from 'main/api' - 但是根据你所解释的，我没有看到名为main的文件夹，只看到一个名为main-lib的文件夹...

可能是因为main/api和main/message并不存在吗？你可能需要在main.js文件中使用main-lib/api和main-lib/message。