Как настроить jQuery в Webpack и использовать его в файле .cshtml? ⇐ Jquery

[Anonymous]

Я работаю над настройкой веб-пакета в приложении ASP.NET Core MVC. После установки jQuery в качестве зависимости я получаю сообщение об ошибке везде, где пытаюсь использовать jQuery:

Uncaught ReferenceError: $ не определен
Когда я смотрю на site.entry.js, я вижу, что jQuery включен в пакет. У меня установлен тег сценария, указывающий на этот файл, и я также включаю Bootstrap, и он работает нормально.
Тег сценария расположен внутри _Layout.cshtml:

Код: Выделить всё

Внутри моего site.js я добавил следующий импорт:

Код: Выделить всё

// JS Dependencies: Popper, Bootstrap & JQuery
import '@popperjs/core';
import 'bootstrap';
import 'jquery';
// Using the next two lines is like including partial view _ValidationScriptsPartial.cshtml
import 'jquery-validation';
import 'jquery-validation-unobtrusive';

// CSS Dependencies: Bootstrap & Bootstrap icons
import 'bootstrap-icons/font/bootstrap-icons.css';
import 'bootstrap/dist/css/bootstrap.css';

Это package.json:

Код: Выделить всё

{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "ISC",
"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"jquery": "^3.7.1",
"jquery-validation": "^1.21.0",
"jquery-validation-unobtrusive": "^4.0.0"
},
"devDependencies": {
"css-loader": "^7.1.2",
"eslint": "^9.5.0",
"expose-loader": "^5.0.0",
"mini-css-extract-plugin": "^2.9.1",
"style-loader": "^4.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
}

А это webpack.config.js:

Код: Выделить всё

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');

module.exports = {
entry: {
site: './wwwroot/js/site.js'
},
output: {
filename: '[name].entry.js',
path: path.resolve(__dirname, 'wwwroot', 'dist'),
clean: true
},
devtool: 'source-map',
mode: 'development',
plugins: [
new MiniCssExtractPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
type: 'asset/resource',
generator: {
// keep original filenames and copy images to dist/images/
filename: 'images/[name][ext]'
}
},
{
test: /\.(eot|woff(2)?|ttf|otf)$/i,
type: 'asset/resource',
generator: {
// keep original filenames and copy fonts to dist/fonts/
filename: 'fonts/[name][ext]'
}
},
{
// Exposes jQuery for use outside Webpack build
test: require.resolve('jquery'),
loader: "expose-loader", options: { exposes: ["$", "jQuery"], }
}
]
}
};

Я пытаюсь использовать jQuery внутри некоторых других моих представлений. Например, у меня есть Profile.cshtml, в нижней части которого есть тег сценария.

Код: Выделить всё

// html code is above the script tag

const accountDetailsModal = document.getElementById("editAccountModal");
const selectedState = "@Model.AccountProfile.State";
accountDetailsModal.addEventListener("show.bs.modal", event => {
let stateField = document.getElementById("State");
stateField.value = selectedState;
});

$("#editAccountModal").on("submit", "#form-accountprofileedit", function (e) {
e.preventDefault();
var form = $(this);
$.ajax({
url: form.attr("action"),
method: form.attr("method"),
data: form.serialize(),
success: function (partialResult) {
$("#formContent").html(partialResult);
}
});
});

Я не уверен, что я делаю неправильно или что я могу упустить.

Подробнее здесь: https://stackoverflow.com/questions/790 ... shtml-file