从 javascript 中的 node_modules 导入时出现问题

Question

几天来我一直在为这个问题苦苦挣扎。问题是导入效果不好，我不知道为什么。以下是一些示例：

我有一个index.html，完全是空的，我只有脚本。像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="/src/index.js"></script>
</body>
</html>

在 src 文件夹中我有 index.js 和 app.js。 app.js 中的代码是：

const helloWorld = () => {
  console.log('Hello world');
};

export default helloWorld;

在index.js中的代码是：

import helloWorld from 'app.js';
helloWorld()

我使用 VSC Live Server 扩展来挂载服务器，Chrome 控制台说：

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

我说：“好的”，然后我在 index.js:

中尝试这个

import helloWorld from './app';
helloWorld()

Chrome 控制台说：

GET http://127.0.0.1:5500/src/app net::ERR_ABORTED 404（未找到）

node_modules 中的所有 npm 包都会出现这个问题。示例：

import bootstrap from 'bootstrap';
import axios from 'axios';

Chrome 控制台：

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

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

VSC 可以识别 axios 和 bootstrap 路由，但是在浏览器中尝试时出现问题。示例：

我也尝试过使用另一台本地服务器，但也没有用。我尝试了这个 link:

中解释的那个

还有一点要补充的是，它说错误在 index.html:

的第 1 行

Answer 1

关于在 index.js 中导入 app.js - 你只需要写：

import helloWorld from './app.js';

它正在运行！

至于节点模块，这个就比较复杂了。通常在项目设置（采用自动设置，例如 create-react-app）时，会安装一个 JS BUNDLER，如 Webpack、rollup.JS Parcel 等。顺便说一下，那些可以帮助你进行 js 文件引用和导入......但是一旦你创建了一个空项目并且比使用 npm install 没有捆绑器或 package.json 和更多配置 - 它会更难导入。

阅读this article关于如何在 JS 项目上安装模块

从 javascript 中的 node_modules 导入时出现问题

Problem with import from node_modules in javascript

javascript

import

npm

node-modules