我是 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!');
事件訊息.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>
uj5u.com熱心網友回復：
為了訪問 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 屬性。
uj5u.com熱心網友回復：
我讓它作業。首先，我必須對我的 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" } })
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/334064.html