无法导入节点模块答案

【问题标题】：Not able to import a node module无法导入节点模块
【发布时间】：2021-10-30 22:28:40
【问题描述】：

我想用 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/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">
</head>

<body>
    <h1>title</h1>
    <input type="text" name="dp" class="w-5 h-5 text-gray-500 w-full">

    <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 的引用，那么它可以工作。感谢 cmets 和 answears。感谢@esqew！

【问题讨论】：

你真的运行webpack...？您应该在 HTML 中引用 bundle.js；但是我们不能给你太多具体的建议，因为你没有在这里提供所说的 HTML。你能告诉我们什么不适用于符合minimal reproducible example 的代码吗？
@esqew 你是对的。我用 html 和 app.js 文件更新了问题。我是 webpack 的新手，这让我很困惑....
如果您使用webpack 将app.js 及其依赖项编译为单个bundle.js，为什么您仍然在HTML 中离散地引用未编译的源代码？你能否提供一个指向源文档的链接，你隐含地声称这是引用你的 JS 源代码的正确方法……？你读过webpack’s Getting Started document吗，它明确提到“因为我们将捆绑我们的脚本，我们必须更新我们的index.html文件[...]来加载捆绑包，而不是原始的./src文件”。
@esqew 你是对的！那是错误！谢谢，我会改的。感谢您提供指向“Webpack 入门”文档的链接。顶！
@esqew 你能留下一个简短的答案，以便我可以将其标记为已接受吗？

标签： javascript node.js webpack

【解决方案1】：

如果您使用webpack 将app.js 及其依赖项编译成单个bundle.js（如您的配置文件所示），则不应再在HTML 中引用任何未编译的源代码。使用webpack 之类的工具的全部意义在于将您的代码及其依赖项提取到一个缩小的输出文件中（当然，除非您以其他方式配置它）。

你应该重新访问webpack’s Getting Started document，它明确提到了这一点：

[...] 因为我们将捆绑我们的脚本，我们必须更新我们的 index.html 文件 [...] 以加载捆绑包，而不是原始的 ./src 文件...。

【讨论】：

【解决方案2】：

您的导入语句似乎有错字：

import Datepicker from './../../node_modules/vanillajs-datepicker/js/Datepicker';

'./' 用于同一目录中的文件。如果您要返回 3 个目录，请使用 import Datepicker from '../../../node_modules/vanillajs-datepicker/js/Datepicker';

【讨论】：

谢谢！你的意思是：../../node_mod.. 两者都是可能的。但是，这并不能解决问题。我用 html 和 app.js 补充了我的问题。