首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我正在尝试将Seriously.js导入到meteor应用程序中,收到对象类型错误

我正在尝试将Seriously.js导入到meteor应用程序中,收到对象类型错误
EN

Stack Overflow用户
提问于 2016-06-10 10:37:50
回答 2查看 259关注 0票数 3

我正在尝试在一个流星应用程序中使用Seriously.js库(https://github.com/brianchirls/Seriously.js/)。我已经将这个库放在meteor应用程序的/imports文件夹中,并且我从顶部的seriously.js中认真地导出了一个变量,覆盖了整个函数:

代码语言:javascript
运行
复制
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代码是相同的。然后,在客户端脚本中,我将这样导入:

代码语言:javascript
运行
复制
import {Seriously} from '/imports/seriously/seriously.js';

然后我就有了客户端代码。但是,在运行代码时,浏览器会抛出以下错误:

代码语言:javascript
运行
复制
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

它引用了我代码的这一部分:

代码语言:javascript
运行
复制
var seriously = new Seriously();

并编译成meteor:

代码语言:javascript
运行
复制
var seriously = new _seriously.Seriously();                   

我已经尝试了各种方法来将Seriously类导出到meteor中,但似乎没有什么工作,我遇到了同样的错误。有没有办法将这个库正确地导入到meteor中?

EN

回答 2

Stack Overflow用户

发布于 2016-07-21 18:45:50

既然您在使用全新的meteor应用程序时也遇到了问题,我们将从一个新的应用程序开始:

代码语言:javascript
运行
复制
meteor create myapp
cd myapp
meteor npm install
meteor

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

代码语言:javascript
运行
复制
imports/seriously/seriously.js

如果我们坚持默认的新应用程序,我们可以编辑client/main.js文件来导入它,这就是事情的不同之处。

我们需要使用不带大括号的import语句,如:

代码语言:javascript
运行
复制
import Seriously from '/imports/seriously/seriously.js';

import语句中,花括号内的部分称为导出。为了支持这一点,该库必须执行类似于export { Something, SomethingElse, etc. }的操作。

export default Something是标准的第三方JS库,不使用这种语法,所以我们退回到back。在不带大括号的情况下导入时,我们只是将默认导出赋值给我们选择的变量标识符,例如,Seriously

随着import的工作,我们现在可以在呈现模板时认真使用:

代码语言:javascript
运行
复制
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中使用了新的解析/导入代码。

如果您尝试导入如下效果:

代码语言:javascript
运行
复制
import Seriously from '/imports/seriously/seriously.js';
import '/imports/seriously/effects/seriously.vignette.js';

Meteor的输出将是:

代码语言:javascript
运行
复制
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

在web浏览器中加载此文件将导致Uncaught Error: Cannot find module 'seriously'

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

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

在我们的例子中,factory(require('seriously'));将被执行,但没有“严重”的模块。在问题得到解决之前,我们需要修改这个加载机制来执行factory(require('/imports/seriously/seriously.js'));。整个代码块看起来就像这样:

代码语言:javascript
运行
复制
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);
}

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

代码语言:javascript
运行
复制
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();
});

在重新加载后,效果将被应用:

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

票数 2
EN

Stack Overflow用户

发布于 2020-10-27 16:43:44

如果有人在这里寻找相同的问题,但与npm/纱线安装相关,来自HiDeo的答案也适用,但您需要替换定义(...)更重要的是。

代码语言:javascript
运行
复制
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);
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37739097

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档