Kendo UI and Vue.js

Posted 2023-02-22

【中文标题】Kendo UI and Vue.js

【英文标题】：

【发布时间】：2016-09-16 19:44:59

【问题描述】：

大家好，我正在使用 Vue.js CLI

我一直在关注这篇文章：https://65535th.com/jquery-plugins-and-webpack/ 关于将 Jquery 插件添加到 webpack 项目。

我安装了暴露加载器并将以下行添加到我的 webpack.base.conf.js

  test: /jquery/, loader: 'expose?$!expose?jQuery!expose?jquery' 

然后在作为应用程序入口点的 main.js 中，我添加了以下两行来引入 Jquery 库，然后引入 Kendo 库。

import '../bower_components/jquery/dist/jquery.js';
import '../bower_components/kendo-ui/js/kendo.all.min.js';

然后我运行 npm run dev 启动一切并生成以下输出（请注意，它需要大量的时间来恢复和运行）

[BABEL] Note: The code generator has deoptimised the styling of "/var/www/public/kendo/bower_components/kendo-ui/js/kendo.all.min.js" as it exceeds the max of "100KB".
webpack: wait until bundle finished: /__webpack_hmr
[BABEL] Note: The code generator has deoptimised the styling of "/var/www/public/kendo/bower_components/jquery/dist/jquery.js" as it exceeds the max of "100KB".
webpack built 6459c5d00452a152a319 in 405389ms
Hash: 6459c5d00452a152a319
Version: webpack 1.13.0
Time: 405389ms
 Asset     Size  Chunks       Chunk Names
app.js  14.8 MB       0       app

ERROR in ./bower_components/kendo-ui/js/kendo.all.min.js
Module not found: Error: Cannot resolve module 'jquery' in /var/www/public/kendo/bower_components/kendo-ui/js
 @ ./bower_components/kendo-ui/js/kendo.all.min.js 1:1022-1059
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  21.4 kB       0       
webpack: bundle is now VALID.

为什么缺少 jquery？是否有某种配置我做错了？感谢您的帮助。

【问题讨论】：

检查 sourcemaps 以找到 jQuery 的代码。

【参考方案1】：

javascript 区分大小写。我使用ProvidePlugin 来定义一些别名：

new webpack.ProvidePlugin(
    "jQuery": "jquery",
    "$": "jquery",
    "window.jQuery": "jquery"
)