Javascript 导入 package 无法解析模块说明符

Question

我正在尝试导入使用 npm 下载的模块。

我的 json 文件是：

{
  "name": "nodejs-web-app1",
  "version": "0.0.0",
  "description": "NodejsWebApp1",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "dependencies": {
    "fs": "^0.0.1-security",
    "http": "^0.0.1-security",
    "node-pandas": "^1.0.5",
    "node-static": "^0.7.11",
    "require": "^2.4.20",
  },
}

我有我的 html 文件：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Home</title>
    <script type="module" src="functions.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <h1>Dashboard</h1>
    <p>Welcome!</p>
    <button onclick="scraper()">CLICK</button>
    <label id="label">Reponse</label>
</body>

</html>

我的functions.js文件

import pd from 'node-pandas';
function scraper() {
    const s = pd.Series([1, 9, 2, 6, 7, -8, 4, -3, 0, 5])
    console.log(s);
    document.getElementById('label').innerHTML = 'A computer science portal for geeks';
}

和我的 server.js 文件：

var nStatic = require('node-static');
var http = require('http');
var fs = require('fs');
var port = process.env.PORT || 8080;

var file = new nStatic.Server(__dirname);

http.createServer(function (req, res) {
    file.serve(req, res);
}).listen(port);

但是在运行代码时出现错误

未捕获的类型错误：无法解析模块说明符“node-pandas”。 相对引用必须以“/”、“./”或“../”开头。

我试过了，但它也给出了另一个错误。

如果我写：

import pd from './node-pandas';

或者

import pd from '../node-pandas';

我得到：

GET http://localhost:1337/node-pandas net::ERR_ABORTED 404（未找到）

我的项目有这样的结构：

我的项目
- 服务器.js
- 函数.js
- 索引.html
- package.json
- 节点模块
  - 节点熊猫

我正在使用 Visual Studio 2019

知道我做错了什么吗？

Answer 1

我有完全相同的问题（我是一个完全的初学者）。

我通过 NPM 安装了一个依赖项，并且在该项目中他们使用了类似的导入语句

import pd from './node-pandas';

代替

import pd from './node-pandas.js';

所以我遇到了这样一种情况，Live Server 在“http://localhost/scriptname.js”上托管 javascript 文件，而项目正在“http://localhost/scriptname”上寻找该文件（没有 .js 扩展名） )

我当然可以将.js 添加到 import 语句中，但是我必须为此外部项目的所有文件上的所有 import 语句执行此操作。

奇怪的是没有很多关于这个错误的信息，但总结一下：

存在模块说明符和相对导入参考： https://sbcode.net/threejs/module-specifiers/
您只能使用相对导入引用。 如果要使用模块说明符，则需要一个工具来解决这些问题
这种工具的一个例子是 WebPack。 它将为您解析所有这些导入语句并生成一个 javascript 文件，而不是您可以将其添加到 html 文件中

Answer 2

import pd from './node-pandas';

还要检查你的 node-pandas 中是否有任何默认导出。 如果在这种情况下没有默认导出，您必须使用

import { moduleName } from './node-pandas';

这里的模块名称将与其导出的名称完全相同，对于多个导入，您应该使用逗号分隔它们

希望这能解决您的查询

Answer 3

const pd = require("node-pandas")

使用 require 代替 import 关键字可能会起作用，因为 import 是 es6 和 es7 特定的
另一方面，在 Node 项目中，常规 js 支持 require

Answer 4

您需要提供模块的相对路径，例如“assets/node-pandas/dist/node-pandas”

Answer 5

import pd from 'node-pandas';

## 这里 node-pandas 模块位于某种根目录中 ##

我建议在您的模块名称之前使用./ 或../，提供的信息不足以提供解决方案

Javascript 导入 package 无法解析模块说明符

问题描述

5 个解决方案

解决方案1
1 已采纳 2022-03-29 16:13:00

解决方案2
0 2021-02-21 12:12:39

解决方案3
0 2021-02-21 18:53:07

解决方案4
-1 2021-02-19 18:10:39

解决方案5
-1 2021-02-19 18:14:46

Javascript 导入 package 无法解析模块说明符

问题描述

5 个解决方案

解决方案1 1 已采纳 2022-03-29 16:13:00

解决方案2 0 2021-02-21 12:12:39

解决方案3 0 2021-02-21 18:53:07

解决方案4 -1 2021-02-19 18:10:39

解决方案5 -1 2021-02-19 18:14:46

解决方案1
1 已采纳 2022-03-29 16:13:00

解决方案2
0 2021-02-21 12:12:39

解决方案3
0 2021-02-21 18:53:07

解决方案4
-1 2021-02-19 18:10:39

解决方案5
-1 2021-02-19 18:14:46