如何在 package.json中使用 express、ES6、VS code 和 type=“module” 导入 public/js/index 中的模块.js或 public 文件夹中的其他文件

问：

使用 ES6 导入 axios、babel 等 NPM 模块不起作用。 我确实将package.json类型设置为模块。 我需要捆绑器吗？ 我是否需要中间件才能使导入在公共文件中工作？ 我正在使用节点 v16.15.1： 我正在尝试：

package.json
{
  "name": "leader_app",
  "version": "1.0.0",
  "description": "trackes IBD leader changes",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "parcel build --dist-dir public_build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "tc",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.6.0",
    "axios-es6": "^0.11.1",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "mongoose": "^7.6.0",
    "morgan": "^1.10.0",
    "node": "^20.5.1",
    "nodemon": "^3.0.1",
    "parcel": "^2.9.3",
    "pug": "^3.0.2"
  },
  "devDependencies": {
    "@types/axios": "^0.14.0",
    "babel": "^6.23.0"
  }
}

应用.js：

import path from 'path';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import express from 'express';
import morgan from 'morgan';
import viewRouter from './routes/viewRoutes.js';

const app = express();

const __dirname = dirname(fileURLToPath(import.meta.url));

app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/node_modules')); // Does not help.

app.use(morgan('tiny'));

app.use(viewRouter);
// app.use(aquireDataRouter);

// Exported to server
export default app;

索引.js

以下导入均不起作用，但以下情况除外：import { symbol_ToAxios } from './symbolToAxios.js';

index.js 的目录：

根目录/ public/js/index.js

('use strict');

// import babel from '../../node_modules/babel';
// import '@babel/polyfill';
// import babel from 'babel';
import axios from 'axios'; // Does not work.
// import { axios } from 'axios';
// import axios from '../lib/axios.js';
// import axios from '../../node_modules/axios/lib/axios.js';
// import axios, { isCancel, AxiosError } from 'axios';
import { symbol_ToAxios } from './symbolToAxios.js'; // This works.

const getSymbol = document.querySelector('.form--getSymbol');

// console.log('index/getSymbol', getSymbol); // for testing only

getSymbol.addEventListener('submit', (e) => {
  e.preventDefault();
  // console.log('public/index.js getSymbol.addEventListner'); // for testing only
  const textBoxSymbol = document.getElementById('symbolEntered').value.toUpperCase();
  // console.log('index.js/textBoxSymbol', textBoxSymbol);
  symbol_ToAxios(textBoxSymbol);
});

base.哈巴狗

我在 base.pug 中将我的索引.js文件设置为 type='module'

doctype html
html
  head
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0')
      link(rel='stylesheet', href='/css/style.css')
      link(rel="shortcut icon" type="image/x-icon" href="/images/mickey.ico?")
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
      title Leaders | #{title}
  body(data-alert=`${alert ? alert : ''}`)
    // HEADER
    include _header

    // CONTENT
    block content
      pw This is a placeholder heading


    // FOOTER
    include _footer

    //- script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js')

    script(defer src='js/index.js' type="module")

我到处寻找答案，这就是我尝试过的： 我当然希望 axios 和 babel 可以毫无问题地导入到我的文件中：

我得到的错误是：

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

获取 http://127.0.0.1:3000/node_modules/axios/lib/axios.js 网：：ERR_ABORTED 404 （未找到）