javascript - 尝试通过 npm 加载 jQuery 插件

Question

我正在尝试在 vuejs 中加载一个 jquery 插件，但似乎没有任何作用。

我有

window.$ = window.jQuery = require('jquery');
// Plugin I'm trying to load
require('jcanvas');

上面的部分似乎工作正常（我认为），但是当我尝试使用插件时

$('canvas').drawArc({
            fillStyle: '#000',
            x: 100, y: 100,
            radius: 50
        });

它抛出drawArc Is not a function error似乎插件没有正确加载或无法访问。

Answer 1

我相信你可能已经克服了这个问题，但我在让 jCanvas 与 webpack 一起工作时遇到了同样的问题。

原因是 webpack 将加载的模块视为不可变的。Jcanvas 扩展了 jquery 功能，所以它不会工作。您需要做的是通过 html 文件中的普通脚本调用从外部链接到 jquery。

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

然后，你从 webpack 中排除 jquery

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
}; 

现在您应该能够在 webpack 项目中使用 jCanvas 或任何其他扩展 jquery 的插件。

Answer 2

import $ from 'jQuery'
import "jcanvas"

$('canvas').drawArc({
    fillStyle: '#000',
    x: 100, y: 100,
    radius: 50
});