我正在尝试将 Seriously.js 导入流星应用程序，收到对象类型错误答案

【问题标题】：Am trying to import Seriously.js into a meteor application, am receiving an object typeerror我正在尝试将 Seriously.js 导入流星应用程序，收到对象类型错误
【发布时间】：2016-10-10 21:10:03
【问题描述】：

我正在尝试在 Meteor 应用程序中使用 Seriously.js 库 (https://github.com/brianchirls/Seriously.js/)。我已将该库放在我的流星应用程序的 /imports 文件夹中，并且我正在从整个函数最顶部的 Serious.js 中导出一个变量 Seriously：

export var Seriously = (function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define('seriously', function () {
        var Seriously = factory(root);
        if (!root.Seriously) {
            root.Seriously = Seriously;
        }
        return Seriously;
    });
} else if (typeof exports === 'object') {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like enviroments that support module.exports,
    // like Node.
    module.exports = factory(root);
.
.
.
etc.

Seriously.js 代码的其余部分是相同的。然后，在客户端脚本中，我这样导入：

import {Seriously} from '/imports/seriously/seriously.js';

然后我有客户端代码。但是，在运行代码时，浏览器会抛出这个错误：

meteor.js?hash=ae8b8af…:930 Exception from Tracker afterFlush function:
2016-06-09 21:30:19.486 meteor.js?hash=ae8b8af…:930 TypeError: _seriously.Seriously is not a constructor

引用了我的这部分代码：

var seriously = new Seriously();

并在流星中编译：

var seriously = new _seriously.Seriously();

我尝试了各种方法将 Seriously 类导出到流星中，但似乎没有任何效果，我遇到了同样的错误。有什么办法可以将此库正确导入流星？

【问题讨论】：

为了记录，全新的流星应用程序也会发生这种情况。我感觉我没有正确构建对象，但我不知道如何正确导出库。将 Seriously.js 放入 /client/lib 文件夹并从我的客户端脚本中引用它会导致找不到它。当我遇到另一个库的问题时，将其移至 /imports 文件夹，将其作为变量导出，然后以类似的方式将其导入客户端。

标签： javascript node.js oop meteor html5-video

【解决方案1】：

由于您在使用全新的流星应用程序时也遇到了问题，我们将从一个新应用程序开始：

meteor create myapp
cd myapp
meteor npm install
meteor

这里没什么特别的，我们只是在创建一个基本的应用程序。我们想使用 Meteor 提供的模块系统，这将确保我们的代码仅在我们要求时运行。为此，我们将把我们的库放在imports 文件夹中，如果使用import 语句从另一个文件引用该文件，Meteor 只会捆绑并包含该文件。我们可以将我们的seriously.js 放在以下文件夹中：

imports/seriously/seriously.js

如果我们坚持使用默认的新应用，我们可以编辑 client/main.js 文件以将其导入，这就是不同的地方。

我们需要使用不带花括号的导入语句，例如：

import Seriously from '/imports/seriously/seriously.js';

import 语句中大括号内的部分是命名导出。为了支持这一点，图书馆必须做类似export { Something, SomethingElse, etc. }的事情。

Seriously 是标准的 3rd 方 JS 库，不使用这种语法，所以我们回退到 export default Something。在不使用花括号的情况下导入时，我们只是将默认导出分配给我们选择的变量标识符，例如 Seriously。

import 工作后，我们现在可以在渲染模板时使用 Seriously：

Template.hello.onRendered(function helloOnRendered() {
  var seriously = new Seriously();

  var icon = seriously.source('#icon');
  var target = seriously.target('#canvas');
  target.source = icon;

  seriously.go();
});

关于效果，如果你需要它们，显然是这样，由于 Meteor 在 1.3 中使用了新的解析/导入代码，我们将遇到更多问题。

如果你尝试导入这样的效果：

import Seriously from '/imports/seriously/seriously.js';
import '/imports/seriously/effects/seriously.vignette.js';

Meteor 的输出将是：

Unable to resolve some modules:

  "seriously" in /Users/HiDeo/test/myapp/imports/seriously/effects/seriously.vignette.js (web.browser)

If you notice problems related to these missing modules, consider running:

  meteor npm install --save seriously

在网络浏览器中加载它会生成Uncaught Error: Cannot find module 'seriously'。

this post 在他们的论坛上描述了这个问题，但目前没有解决。

如果我们查看the source code 的这种晕影效果，我们可以看到加载机制与论坛帖子中描述的相同并且存在问题。

在我们的例子中，factory(require('seriously')); 将被执行，但没有“认真”的模块。如帖子中所述，直到问题得到解决，我们需要修改此加载机制以改为执行factory(require('/imports/seriously/seriously.js'));。整个区块看起来像这样：

if (typeof define === 'function' && define.amd) {
  // AMD. Register as an anonymous module.
  define(['seriously'], factory);
} else if (typeof exports === 'object') {
  // Node/CommonJS
  factory(require('/imports/seriously/seriously.js'));
} else {
  if (!root.Seriously) {
    root.Seriously = { plugin: function (name, opt) { this[name] = opt; } };
  }
  factory(root.Seriously);
}

然后我们可以修改我们的代码来使用这个新效果：

Template.hello.onRendered(function helloOnRendered() {
  var seriously = new Seriously();

  var icon = seriously.source('#icon');
  var target = seriously.target('#canvas');

  var vignette = seriously.effect('vignette');
  vignette.source = icon;
  vignette.amount = 10;

  target.source = vignette;

  seriously.go();
});

并且在重新加载后，将应用效果：

很遗憾，在解决或修复问题之前，我们需要对应用程序中使用的所有效果执行此操作。

【讨论】：

这对你有用吗？当我对 /imports/seriously/ 文件夹中的整个严重库执行此操作时，流星构建过程会挂在 Processing files with ecmascript
是的，我在使用最新的 Meteor 版本编写答案时对其进行了测试。处理可能需要一点时间，但之后您应该完成。
好的，很高兴知道它最终确实构建了。我的已经在全新的 i7 机器上运行了 8 分钟。你的建造花了多长时间？谢谢！
刚刚尝试编辑 seriously.js 以强制完全重建，构建和刷新浏览器花了大约 30 秒。它没有给你任何错误，它只是挂起？你可以试试meteor --verbose吗？您还应该尝试将严重的.js 文件重命名为.es5.js。
啊，seriously.js 文件单独加载就好了。但是，据我了解，该文件依赖于库中的所有其他文件。因此，如果我在导入文件夹中只有该文件 Meteor 工作正常，但我将无法使用 Serious.js 进行任何操作，如小插图（根据教程 - github.com/brianchirls/Seriously.js/wiki/Tutorial）。为此，我需要添加整个文件库。当我这样做时，流星会挂起。如果我在那里遗漏了什么，请告诉我。

【解决方案2】：

如果有人在这里寻找相同的问题但与 npm/yarn 安装有关，HiDeo 的答案也适用，但您需要替换上面的 define(...)。

if (typeof define === 'function' && define.amd) {
  // AMD. Register as an anonymous module.
  //define(['seriously'], factory);
  factory(require('/imports/seriously/seriously.js'));
} else if (typeof exports === 'object') {
  // Node/CommonJS
  factory(require('/imports/seriously/seriously.js'));
} else {
  if (!root.Seriously) {
    root.Seriously = { plugin: function (name, opt) { this[name] = opt; } };
  }
  factory(root.Seriously);
}

【讨论】：