尝试通过 npm 加载 jQuery 插件答案

【问题标题】：Trying to load jQuery plugin via npm尝试通过 npm 加载 jQuery 插件
【发布时间】：2018-08-07 03:44:55
【问题描述】：

我正在尝试在 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 似乎插件没有正确加载或无法访问。

【问题讨论】：

您可以尝试将 jQuery 导入为import $ from 'jQuery' 并在您的方法中使用美元符号。它应该工作
你在使用 Webpack 吗？
Did import $ from 'jquery' 但现在它的抛出`jquery is not defined`
@BelminBedak ，我相信我正在使用 webpack（抱歉不清楚，但我对此有点陌生）。这是 Laravel Packagde 的一部分，它提供了 elixir builder，它编译主 app.js 文件，其中 bootstrap.js 包含 jquery 和 jCanvas 行

标签： javascript jquery plugins vue.js jcanvas

【解决方案1】：

import $ from 'jQuery'
import "jcanvas"

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

【讨论】：

这似乎不起作用，引导程序和其他模块崩溃。初始导入 window.$ = window.jQuery = require('jquery'); 似乎确实像我以前使用过 jquery 一样工作，但它的插件似乎挂起

【解决方案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>

然后，你从 webpack 中排除 jquery

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

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

【讨论】：