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