我试图将Seriously.js导入流星应用程序，我收到一个对象类型错误

Question

我正在尝试在Meteor应用程序中使用Seriously.js库（https://github.com/brianchirls/Seriously.js/）。我已将库放在我的meteor应用程序的/ 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();

并在meteor中编译：

var seriously = new _seriously.Seriously();                   

我已尝试过各种方法将Seriously类导出到meteor中，但似乎没有任何工作，我遇到了同样的错误。有没有办法将这个库正确导入流星？

Answer 1

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

meteor create myapp
cd myapp
meteor npm install
meteor

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

imports/seriously/seriously.js

如果我们坚持使用我们的默认新应用，我们可以修改client/main.js文件以导入它以及不同的地方。

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

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

import语句中大括号内的部分是名为exports 。为了支持这一点，图书馆必须执行export { Something, SomethingElse, etc. }。

之类的操作

严重的是标准的第三方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'));将被执行，但没有模块“认真地”＃39;在帖子中说明并且问题得到解决之前，我们需要修改此加载机制来执行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();
});

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

不幸的是，我们需要为应用程序中使用的所有效果执行此操作，直到问题得到解决或修复。

Answer 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);
}