我开始使用 Web 开发，但在导入使用 npm i MODULE -S 安装的模块时遇到问题进入我的.html在 script 内.我的文件结构类似于:
设置:
project
|_ node_modules
|_ public
| |_ css
| |_ js
| | |_ libs
| | |_ index.mjs
| |_ index.html
|_ server
|_ server.mjs
index.html文件非常简单，类似于:<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSON and AJAX</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Objects</button>
</header>
<div id="animal-info"></div>
<script type="module" src="js/index.mjs"></script>
<div id="msgid"></div>
</body>
</html>
和
index.mjs文件:import $ from 'jquery';
为了完整起见，
server.mjs文件// const path = require('path');
import path from 'path';
import express from 'express';
const app = express();
const __dirname = path.resolve();
const publicPath = path.join(__dirname, '/public');
app.use(express.static(publicPath));
const port = process.env.PORT || 8080;
app.set('port', port);
app.listen(app.get('port'), () => {
console.log(`listening on port ${port}`);
});
问题
当我运行
node --experimental-modules server/server.mjs我的页面加载完毕，我可以在 localhost:8080 中访问它，但是当我在 chrome 中打开开发人员工具时，出现以下错误:Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".
尝试解决
1) 我已更改为
index.mjs 中的导入语句文件为:import $ from '.jquery';
import $ from './jquery';
'import $ from '../../node_modules/jquery';
输出以下消息:
GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found)
GET http://localhost:49160/js/jquery net::ERR_ABORTED 404 (Not Found)
GET http://localhost:49160/node_modules/jquery net::ERR_ABORTED 404 (Not Found)
2) 我试图复制
jquery来自 node_modules 的文件夹目录到 libs目录并重新运行，以便 index.js只有以下代码:import $ from './libs/jquery';
但我收到以下错误:
GET http://localhost:49160/js/libs/jquery/ net::ERR_ABORTED 404 (Not Found)
额外
当我按照 Mozilla developer 上的文档进行操作时页面并开发我自己的模块一切正常，但是当我尝试使用第三方模块时，我遇到了一系列错误。
最佳答案
TLDR；import $ from '/js/libs/jquery/dist/jquery.js'
或者import $ from './libs/jquery/dist/jquery.js'
您的两次尝试中有两个不同的问题。
import $ from 'jquery';
这种按名称导入将不起作用，因为您的浏览器不知道在哪里搜索 jquery。根据浏览器，如果您有
jquery.js服务器的根目录(/public)中的文件，它可能有效，但不能保证。import $ from '.jquery';
import $ from './jquery';
'import $ from '../../node_modules/jquery';
不幸的是，这些都是错误的道路。 ES6 模块从文件加载，而不是从目录加载，并且 package.json 被忽略。所以所有这些都需要
dist/jquery.js最后才有机会。此外，根据您的目录结构，没有一个是正确的(假设 jquery 目录位于/public/js/libs 中)。第二个是关闭但缺少./libs一开始。
关于javascript - ES6 导入 npm 模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54622376/