为何ES6 import无法在普通JavaScript文件中导入第三方库？

这个错误的核心原因是：浏览器原生的ES模块系统只能识别以 /、./ 或 ../ 开头的相对/绝对路径，无法直接解析像 @reduxjs/toolkit 这样的npm包名。下面是几种可行的解决方案：

方案1：使用CDN提供的ES模块版本 #

直接导入CDN上的库的ES模块版本，用完整URL替代包名。比如：

• 导入Redux Toolkit：

  import { configureStore } from 'https://cdn.jsdelivr.net/npm/@reduxjs/toolkit@1.9.5/dist/redux-toolkit.esm.js';
  

• 导入Chart.js：

  import { Chart } from 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.esm.js';
  

建议指定具体版本号（比如@1.9.5），避免因CDN自动更新最新版本导致兼容性问题。

方案2：使用前端构建工具（推荐） #

如果是正经开发项目，用构建工具（比如Vite、Create React App）来处理模块解析是标准做法，步骤如下：

1. 初始化项目（以Vite为例）：

   npm create vite@latest my-project -- --template vanilla
   cd my-project
   

2. 安装需要的依赖：

   npm install @reduxjs/toolkit
   

3. 在项目的JS文件中正常导入：

   import { configureStore } from "@reduxjs/toolkit";
   

4. 启动开发服务器：

   npm run dev
   

构建工具会自动把npm包名解析成对应的文件路径，打包或运行时就不会报错了。

方案3：直接引用本地安装的包文件（应急用） #

如果你不想用构建工具，可以先通过npm安装包，然后用相对路径引用包内的ES模块文件：

1. 先安装依赖：

   npm install @reduxjs/toolkit
   

2. 在你的JS文件中用相对路径导入（假设JS文件和node_modules目录同级）：

   import { configureStore } from './node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js';
   

这种方法缺点是路径容易受项目结构影响，部署时需要手动处理依赖文件，不推荐用于正式项目。

内容的提问来源于stack exchange，提问作者Mohamed