Question

导入 js 库会抛出此未定义

2019-03-30

360

javascript vue.js vuejs2

我尝试了所有变体，但我不明白为什么我不能包含这个库： jkanban.js

<template>
  <div id="kanban"></div>
</template>

<script>

import jKanban from '../components/jkanban.js'

export default {

}

</script>

我在控制台中收到错误：

Cannot set property 'jKanban' of undefined

仔细查看后，我发现 this 是 undefined 。

这在没有 vue 的情况下运行良好，所以我不确定这里出了什么问题。

在内部，该库正在执行以下操作：

(function () {

    this.jKanban = function () {
        var self = this;
...

Answer 1

所以这就是我所做的（它来自 Vue 3 项目，但应该适用于 React、旧版 Vue 等）...

从源代码（ https://github.com/riktar/jkanban ）复制 jkanban.js 文件从根源文件夹（不是从 dist 文件夹 - 其中包括 dragula 库的代码以及一堆支持 require 的东西，据我所知）到你自己的项目中的一个文件夹中。

添加 dragula 库： npm install dragula 。

然后进行一些代码编辑。由于某种原因，dragula 库不断抛出错误，因为没有 global 对象，所以我尝试添加这个： const gobal = window; （在 index.html 中的脚本标记中，但我猜它可以放在其他地方。）

我还编辑了 jKanban.js 文件的顶部：

import dragula from "dragula";  // change from require

const jKanban = function () {
    var self = this
    var __DEFAULT_ITEM_HANDLE_OPTIONS = {
   // etc. etc...

底部：

    //init plugin
    this.init()
}

export default jKanban; // export it

完成所有这些后，我能够导入它并在组件中使用它：

import jKanban from "@/stuff/jkanban.js";
// ...stuff
const kanban = new jKanban(someOptionsIPreparedEarlier);

当然，您还需要包含 CSS 文件。如果库有任何更新，您需要手动将其拉入。

:o)