将节点模块添加到 ember CLI 应用程序

Question

我想在我的 Ember-CLI 应用程序中使用此 Node.js 模块 https://www.npmjs.com/package/remarkable-regexp。

如何让 Ember 应用程序可以使用它？

我尝试将其添加到 Brocfile.js

app.import('node_modules/remarkable-regexp/index.js');

但它失败了：

Path or pattern "node_modules/remarkable-regexp/index.js" did not match any files

Answer 1

由于 remarkable-regexp 是一个 npm 模块，我认为将其与 ember-cli 集成的最佳方法是使用 ember-browserify.

在您的 ember-cli 应用程序中，您可以通过运行 npm install --save-dev ember-browserify

安装插件

因此，您可以使用 ES6 import 导入模块，方法是在其前面加上 npm:

import Remarkable from 'npm:remarkable';
import Plugin from 'npm:remarkable-regexp';

var plugin = Plugin(
  // regexp to match
  /@(\w+)/,

  // this function will be called when something matches
  function(match, utils) {
    var url = 'http://example.org/u/' + match[1]

    return '<a href="' + utils.escape(url) + '">'
      + utils.escape(match[1])
      + '</a>'
  }
)

new Remarkable()
  .use(plugin)
  .render("hello @user")

// prints out:
// <p>hello <a href="http://example.org/u/user">user</a></p>

Answer 2

browserify 噪音可能是首选方法，但我通过在 vendor 文件夹中创建一个符号链接来绕过它，如下所示：

$ npm install --save-dev css.escape
$ cd vendor
$ ln -s ../node_modules/css.escape/css.escape.js css.escape.js

然后

// ember-cli-build.js
app.import('vendor/css.escape.js');

Answer 3

ember-browserify 是在应用程序中使用的绝佳选择，并且有 work being done 尝试允许 Ember CLI 导入 NPM 包而无需任何额外帮助。

但是，如果您试图在插件和应用程序中都实现这一点，您可以采取稍微不同的方法，即手动修改 broccoli 构建链以包含您的 Node 包。

这是如何在插件的 index.js 文件中完成此操作的简单示例：

var path = require('path');
var mergeTrees = require('broccoli-merge-trees');
var Funnel = require('broccoli-funnel');

module.exports = {
  name: 'my-addon',

  treeForVendor: function(tree) {
    var packagePath = path.dirname(require.resolve('node-package'));
    var packageTree = new Funnel(this.treeGenerator(packagePath), {
      srcDir: '/',
      destDir: 'node-package'
    });
    return mergeTrees([tree, packageTree]);
  },

  included: function(app) {
    this._super.included(app);

    if (app.import) {
      this.importDependencies(app);
    }
  },

  importDependencies: function(app) {
    app.import('vendor/node-package/index.js');
  }
};

类似的技术可用于标准应用程序。同样，一旦 Ember CLI 团队添加了对 Node 模块的支持，此方法将很快被替换，因此请尽量谨慎使用它并与 Ember CLI 保持同步！

Answer 4

将您的 ember-cli 更新为 v2.15.0-beta.1。新版本允许您使用 app.import 和 node_modules

更多信息请查看https://github.com/ember-cli/ember-cli/pull/7045

Answer 5

从 Ember-CLI 2.15.0 开始，您现在可以 import node modules directly。为了演示，请确保您的应用程序在 Ember-CLI 2.15.0 上，然后尝试安装 Moment.js:

yarn add moment
将 app.import('node_modules/moment/moment.js') 添加到您的 ember-cli-build.js 文件。
您现在可以通过 window 对象访问时刻：window.moment。
（可选）如果您希望能够 import moment from 'moment'，您可以生成供应商 shim。有关详细信息，请参阅 this link。

这不适用于不提供单个 JavaScript 捆绑包的节点模块（您需要使用其他评论中描述的方法进行捆绑），但这已经是一个巨大的改进。

将节点模块添加到 ember CLI 应用程序

Add node module to ember CLI app

javascript

node.js

ember.js

npm

ember-cli