我想用 JS、HTML 和 CSS 實作一個專案。為此，我需要一個日期選擇器。我決定使用 vanillajs-datepicker。
我的webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './resource/js/app.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
};
在我的 app.js 中，我做了 import Datepicker from './../../node_modules/vanillajs-datepicker/js/Datepicker';
在瀏覽器控制臺中，我收到以下錯誤訊息：
GET http://localhost:8080/node_modules/vanillajs-datepicker/js/Datepicker
[HTTP/1.1 404 Not Found 2ms]
Loading failed for the module with source "http://localhost:8080/node_modules/vanillajs-datepicker/js/Datepicker". localhost:8080:31:1
Loading module from "http://localhost:8080/node_modules/vanillajs-datepicker/js/Datepicker" was blocked because of a disallowed MIME type ("text/html").
更新
我的 app.js
import Datepicker from './../../node_modules/vanillajs-datepicker/js/Datepicker';
const elem = document.querySelector('input[name="dp"]');
const datepicker = new Datepicker(elem, {
autohide: true,
buttonClass: "text-gray-500",
title: 'db'
});
我的 index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/datepicker.min.css">
</head>
<body>
<h1>title</h1>
<input type="text" name="dp" >
<script src="js/app.js" lang="text/javascript" type="module"></script>
<script src="bundle.js" lang="text/javascript" type="module"></script>
</body>
什么地方出了錯？
更新 - 解決方案
通常情況下，錯誤出現在鍵盤前面。
問題是。我在我的 HTML 中謹慎地參考了未編譯的源代碼。
<script src="js/app.js" lang="text/javascript" type="module"></script>
<script src="bundle.js" lang="text/javascript" type="module"></script>
</body>
如果我洗掉了對 app.js 的參考，那么它就可以作業了。感謝您的評論和回答。并感謝@esqew！
uj5u.com熱心網友回復：
如果您使用webpack編譯app.js及其依賴項到一個單一的bundle.js（如您的組態檔所示），您不應再在 HTML 中參考任何未編譯的源代碼。使用類似工具的全部意義webpack在于將您的代碼及其依賴項提煉到一個縮小的輸出檔案中（當然，除非您以其他方式對其進行了配置）。
您應該重新訪問webpack的入門檔案，其中明確提到了這一點：
[...] 因為我們將打包我們的腳本，所以我們必須更新我們的
index.html檔案 [...] 來加載包，而不是原始./src檔案...。
uj5u.com熱心網友回復：
看起來你的匯入陳述句有一個錯字
import Datepicker from './../../node_modules/vanillajs-datepicker/js/Datepicker';
'./' 用于同一目錄中的檔案。如果您要回傳 3 個目錄，請使用 import Datepicker from '../../../node_modules/vanillajs-datepicker/js/Datepicker';
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348984.html
標籤：javascript 节点.js 网络包