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

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 is not a function

如果我尝试像 fullcalendar doc 上的示例：

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

我得到了这样的错误：

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

[at-loader] ./src/main/webapp/app/layouts/main/main.component.ts:9:95 TS2339：“typeof Reflect”类型上不存在属性“元数据”。

[at-loader] ./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 插件。

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

import 'path_to_file/file_name.js';

同样，所有与 CSS 相关的文件都应导入到 vendor.css 或 vendor.scss。

您需要通过

构建您的项目

yarn run webpack:build 

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