在WebPack中添加自定义Js并通过MVC HTML helper使用它

Question

我是WebPack的新手:我有一个使用DotNet Core的MVC 5项目。我的前端是所有的HTML和Razor与引导css。我设置了webpackconfig.js和site.js。所有这些都可以很好地与NPM包一起工作。当我尝试添加我们自己的CDN或本地JS文件时，我无法访问我创建的函数。我张贴webpackconfig.js，网站。js，我的custom.js和html.

我正试图添加一个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,
},
},
},
],
}         
]
}
};

site.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")
};

Index.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>

Answer 1

为了访问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属性。

Answer 2

我让它工作了。首先，我必须修改eventMessage.js文件:

import $ from 'jquery';
export function EventChange() {

console.log("JS Script");
};
$(".EditCheckbox").change(function () {
console.log("JS Script");
});

我导入了我的脚本到我的site.js

import '../js/eventMessage.js';

最后我必须改变HTML中的复选框:

@Html.EditorFor(x => item.Enabled, new { htmlAttributes = new { @class = "EditCheckbox" } })