在 Ember 插件中包含 bower 组件

Question

您需要如何在 Ember 插件中工作，以便在安装插件时包含 Bower 包。

1) 我用 bower instal packagename --save

安装了我想包含在我的插件中的 bower 包

2) 然后在我的插件中，在根目录中编辑 index.js，看起来像这样：

/* jshint node: true */
'use strict';

module.exports = {
  name: 'my-ember-component',
  included: function(app) {
    this._super.included(app);

    if(app.import){
      app.import(app.bowerDirectory + '/path-to-package/package.js');
    }
  }
};

但是，当我尝试在安装插件的地方启动我的应用程序时，我得到一个 ENOENT: no such file or directory, stat '/my-ember-application/tmp/source_map_concat-input_base_path-bWTPoVC9.tmp/0/bower_components/path-to-package/package.js

我想避免手动将 Bower 依赖项添加到我安装插件的每个应用程序中。

注意：我正在使用 npm link 调试我的插件，也许这可能是问题的根源？

Answer 1

通常在 ember install addon 期间将插件的 bower 组件添加到使用项目中。

但是由于您正在进行本地开发并使用 npm link。你需要模拟这个。你可以这样做：

ember generate your-addon-name

说明。

查看 ember cli 文档中关于 default blueprints 的文档。

A blueprint with the same name as the addon (unless explicitly changed, see above) will be automatically run after install (in development, it must be manually run after linking). This is where you can tie your addon’s bower dependencies into the client app so that they actually get installed.

简而言之，您需要为您的应用程序创建默认蓝图并在其中添加 bower 依赖项。

创建您的文件：

//blueprints/your-addon-name/index.js
module.exports = {
  normalizeEntityName: function() {}, // no-op since we're just adding dependencies

  afterInstall: function() {
    return this.addBowerPackageToProject('BOWER PACKAGE NAME'); // is a promise
  }
};

然后当你运行默认蓝图

ember generate your-addon-name

在 Ember 插件中包含 bower 组件

Include bower component in Ember Addon

ember.js

bower

ember-addon