尝试通过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 ，似乎插件未正确加载drawArc Is not a function error或其不可访问。

Answer 1

import $ from 'jQuery'
import "jcanvas"

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

Answer 2

我确定您可能已经克服了这一点，但是让jCanvas与Webpack一起使用时遇到了同样的问题。

原因是webpack将加载的模块视为不可变的。 Jcanvas扩展了jQuery功能，因此将无法使用。 您需要做的是通过html文件中的常规脚本调用从外部链接到jquery。

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

然后，将jquery从webpack中排除

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

现在，您应该可以使用jCanvas或在Webpack项目中扩展jquery的任何其他插件。