javascript - 在 WebPack 中添加自定义 Js 并通过 MVC HTML helper 使用它
问题描述
我是 WebPack 的新手:我有一个使用 DotNet Core 的 MVC 5 项目。我的前端是所有 HTML 和 Razor,带有 CSS 的引导程序。我设置了我的 webpackconfig.js 和我的 site.js。所有这些都适用于 NPM 包。当我尝试添加我们自己的 CDN 或本地 JS 文件时,我无法访问我创建的函数。我正在发布 webpackconfig.js、site.js、我的 custom.js 和 html。
我正在尝试向我的 EditFor 添加一个 onchange。我没有收到任何错误。我只是不确定我应该如何调用那个 JS 函数。
Webpackconfig.js
const path = require('path');
module.exports = {
entry: {
site: './src/js/site.js',
event: './src/js/eventMessage.js'
},
output: {
filename: '[name].entry.js',
path: path.resolve(__dirname, 'wwwroot', 'dist')
},
devtool: 'source-map',
mode: 'development',
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
},
{
test: /\.(woff|woff2)$/, use: [
{
loader: 'url-loader',
options: {
limit: 5000,
},
},
]
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
},
},
]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml',
},
},
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.less$/i,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
options: {
lessOptions: {
strictMath: true,
},
},
},
],
}
]
}
};
网站.js
// Import JS Dependencies
import 'bootstrap';
import 'jquery';
import 'jquery-validation';
// Import Fonts
import 'font-awesome/css/font-awesome.css';
import '../css/gear-font.css';
// Import CSS Dependencies
import 'bootstrap/dist/css/bootstrap.css';
// Custom Css
import '../css/site.css';
import '../css/main-admin.css';
// Custom Less
import '../less/main.less';
import EventChange from '../js/eventMessage';
console.log('The \'site\' bundle has been loaded!');
eventMessage.js
export function EventChange() {
console.log("JS Script")
};
索引.cshtml
<div class="card">
<div class="card-header">
<h4 class="my-0 fw-normal">@ViewData["Title"]</h4>
</div>
<table class="table table-bordered">
<tr>
<th scope="col">
@Html.DisplayName("Sport")
</th>
<th scope="col">
@Html.DisplayName("Last Updated")
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.FirstOrDefault().Enabled)
</th>
<th scope="col">
@Html.DisplayName("Actions")
</th>
</tr>
@foreach (var item in Model) {
<tr>
@Html.HiddenFor(x => item.IdSportType)
<td>
@Html.DisplayFor(x => item.SportType.Name, "Sport")
</td>
<td>
@{var lastUpdate = item.LastUpdateDate.ToShortDateString();}
@Html.DisplayFor(x => lastUpdate, "Last Updated")
</td>
<td>
@Html.EditorFor(x => item.Enabled, new { @class = "EditCheckbox", onchange = "EventChange()" }) </td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.SportType.IdsportType })
</td>
</tr>
}
</table>
</div>
解决方案
为了访问 webpack 捆绑的元素,您需要将它们添加到全局window
变量中:
/** ... */
import EventChange from '../js/eventMessage';
window.EventChange = EventChange;
/** ... */
但是,与其将变量暴露给全局窗口变量,不如直接在 js 文件中添加侦听器,如下所示:
/** ... */
import EventChange from '../js/eventMessage';
jQuery('body').on('change', '.EditCheckbox', (event) => {
EventChange();
});
/** ... */
并从模板文件中的 dom 元素中删除 onchange 属性。
推荐阅读
- ios - 在 iOS 11.3 中,didReceiveNotification 函数没有在点击时调用
- javascript - Datepicker 不是 ajax 请求后的函数
- javascript - 试图在 PHP 中搜索表
- android - 从管理员中删除应用并卸载
- laravel - Laravel 5.4:groupedBy id 并计算每个产品的数量
- parsing - 如果没有提供值,Antlr 应该放置一些标记
- c# - MessagePack 反序列化从 Dictionary<,> 继承的类中的异常
- oracle - 异常:批处理期间发生错误:ORA-01427:单行子查询返回多于一行
- python - 将元素写入另一个文件中的列表
- c# - iTextSharp XMLParser.Parse 反复抛出并吞下异常