Question

我无法将jquery库添加到我的jhipster项目中，我认为它是特定于webpack的，

这是一个具有全日历的示例，但是所有jquery插件都存在相同的问题

全部位于src / main / webapp / app / layouts / main / main.component.ts和webpack / webpack.common.js

如果我尝试这样做：

main.component.ts

import $ from 'jquery';
import 'fullcalendar';

webpack.common.js

module: {
rules: [
{ test: /fullcalendar\/dist\/.+\.js/, loader: 'imports-loader?$=jquery' },
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },

... 我收到错误消息：ERROR TypeError：jquery_1.default不是一个函数

如果我尝试使用全日历文档中的示例：

module: {
rules: [
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },

我遇到了类似这样的错误：

[加载器] ./src/main/webapp/app/app.module.ts:18:5 TS2539：无法分配给“ FullcalendarExempleAppModule”，因为它不是变量。

[加载程序] ./src/main/webapp/app/layouts/main/main.component.ts:9:95 TS2339：类型“反射类型”上不存在属性“元数据”。

[加载器] ./src/main/webapp/app/app.module.ts:18:5 TS2539：无法分配给“ FullcalendarExempleAppModule”，因为它不是变量。

jquery_1.default不是函数

我尝试了数小时的其他技巧，但没有一个... 我不明白为什么要添加一个简单的jquery插件看起来如此困难

我在github上放置了一个jhipster项目示例（因为我不知道如何使该项目成为jsfiddle ...）：

https://github.com/brynnlow/jhipster-fullcalendar-exemple.git

Answer 1

如果我有任何疑问，您想在jhpster项目中添加一个jQuery插件。

我建议您使用导入命令将所有JS文件/模块添加到vendor.ts文件中。

import 'path_to_file/file_name.js';

类似地，所有与CSS相关的文件都应导入vendor.css或vendor.scss。

您需要通过

构建项目

yarn run webpack:build

一旦您对vendor.ts文件进行了任何更改。

如何在jhipster项目中将jquery插件添加到webpack

1 个答案: