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

Posted 2023-02-19

【中文标题】将节点模块添加到 ember CLI 应用程序

【英文标题】：Add node module to ember CLI app

【发布时间】：2015-03-27 20:54:51

【问题描述】：

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

如何使其对 Ember 应用程序可用？

我尝试将其添加到Brocfile.js

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

但它会像这样失败：

路径或模式“node_modules/remarkable-regexp/index.js”没有 匹配任何文件

【问题讨论】：

你是通过npm install --save-dev remarkable-regexp安装模块的吗？

【参考方案1】：

从 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 捆绑包的节点模块（您需要使用其他 cmets 中描述的方法进行捆绑），但这已经是一个巨大的改进。

【参考方案2】：

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

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

【参考方案3】：

由于remarkable-regexp 是一个npm 模块，我相信将它与ember-cli 集成的最佳方式是使用ember-browserify。

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

因此，您可以使用 ES6 导入通过在其前面加上 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>

【讨论】：

效果很好，谢谢。我只担心所有browserifys 依赖项引入的文件大小和处理时间开销。

@Hedge Browserify 本身是一个相当大的项目，但是使用 ember-browserify 你的构建输出只长了四行。以下是添加到您的应用程序中的内容：hastebin.com/avukejoxid.js

【参考方案4】：

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 保持同步！

【讨论】：

这对我有用，因为我需要在插件中导入一个 npm 模块。但开始看到这个错误： BroccoliMergeTrees: Expected Broccoli node, got undefined for inputNodes[0] 这是因为tree 参数有一个undefined 值导致mergeTrees 出现异常。我更改的代码：` var nodes = [packageTree];如果（树）节点.unshift（树）； 返回合并树（节点）； `

【参考方案5】：

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

$ 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');

【讨论】：

应该可以工作，只要您不需要支持对符号链接缺乏可靠支持的文件系统（例如 Windows）

以及如何在你的component.js中导入它