使用Ember-cli项目中的ES6库

Use ES6 library in Ember-cli project

本文关键字：ES6 Ember-cli 项目 使用      更新时间：2023-09-26

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

如果我没有错，我应该在brocfile.js中转换库，然后使用它。不幸的是，我不能提供太多具体的信息，但我会尽我所能做到更清楚。

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

  • bower_组件
    • 主库
      • 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 的根上

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

会不会是main/api和main/message不包括在内，因为它们实际上并不存在？您可能需要在main.js文件中使用main-lib/api和main-lib/message

Broccoli与ember-cli的集成已经包括了一个transpiler，所以我认为这样的东西就足够了：

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

这些都没有经过测试，但你已经明白了。

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])
相关文章：