在Ember-cli项目中使用ES6库 [英] Use ES6 library in Ember-cli project

问题描述

我有一个使用Ember-Cli的小型EmberJS应用程序。我的应用程序有一个私有的ES6库，是一个凉爽的依赖。基本上，我想要的是导入图书馆并使用它，无论我想要什么。

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

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

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

在main.js文件中，我有以下内容：

$从'main / api'导入Api; b
$ b

  
 import来自'main / message'的消息; 
 
 var main = {}; 
 
 main.api = Api; 
 main.message = Message; 
 
导出默认主; 
  

所以，我想做的是在我的应用程序中导入主要并使用它包含的不同功能。

例如，在某个emberjs控制器中：

  import main from'main'; 
 
 //使用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：

  mergeTrees = require（'broccoli-merge-树'）
 
 module.exports = mergeTrees（[app.toTree（），amdFiles]）; 
  

我可以得到一个看起来像这样的ES5：

{pre> 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

解决方案

您有以下内容：从'main / api'导入Api - 但我看不到名为 main 的文件夹在你所解释的内容中 - 只有一个名为 main-lib的文件夹 ...

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

I have a small EmberJS application that uses Ember-Cli. My application has a private ES6 library that is a bower dependency. Basically, what I want is to import the library and use it wherever I want.

If I'm not wrong, I should transpile the library in my brocfile.js and use it afterwards. Unfortunately, I cannot provide too much concrete information but I'll try my best to be the clearer possible.

My external library is named main-lib and is structured the following way (it is working in another project):

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

In the main.js file, I have the following:

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

var main = {};

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

export default main;

So, what I want to do, is, in my application, to import main and use the different functions it contains.

Example, in a certain emberjs controller:

import Main from 'main';

//use Main here

To do so, I thought of doing the following in my 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'
  }
});

However, this does nothing. Basically, I want the transpiled files to be included in vendor.js or somewhere where I would be able to use the library by importing it.

There's something I'm missing here but I can't pinpoint it.

Edit1: After adding these lines at the end of my brocfile.js:

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

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

I can get an ES5 that looks like this:

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

    var main = {};

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

    var _main = main;
    return _main;
});

The problem is that it does not import main/api and main/message as well. Do I have to repeat the code for each file that I want ?

Also, the file is not concatenated in vendor.js but simply but at the root of /dist

解决方案

You have the following: import Api from 'main/api' - but I don't see a folder called main in what you've explained - only a folder called main-lib ...

Could it be that main/api and main/message are not included because they actually don't exist? You might need to use main-lib/api and main-lib/message in your main.js file

这篇关于在Ember-cli项目中使用ES6库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！