如何从npm安装的模块导入？网页端ES模块导入报错解决

问题原因 #

浏览器原生的ES模块系统不支持解析"裸模块名"（比如import from "gsap"这种不带路径前缀的写法），它要求模块路径必须是相对路径（.//../）、绝对路径或者完整URL，所以直接写包名会触发解析错误。

可行解决方案 #

1. 使用现代构建工具（推荐） #

像Vite、Parcel这类工具会自动处理裸模块的解析，同时还能帮你打包优化代码，是目前前端项目的标准做法：

• 以Vite为例：
  1. 在项目目录执行：

     npm create vite@latest . -- --template vanilla
     npm install gsap
     

  2. 你的index.js可以直接按文档写：

     import { gsap } from "gsap";
     console.log(gsap);
     

  3. 启动开发服务器：

     npm run dev
     

  工具会自动把gsap解析到node_modules里的对应文件，部署时执行npm run build生成可直接部署的静态文件。

2. 使用浏览器原生Import Maps #

如果不想用构建工具，可通过Import Maps让浏览器识别裸模块名，在你的index.html里添加配置：

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "gsap": "/node_modules/gsap/dist/gsap.min.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
  </body>
</html>

之后index.js里的import { gsap } from "gsap"就能正常生效了。

注意：Import Maps需要在本地用开发服务器打开（比如npx serve），直接打开本地HTML文件可能会因为跨域问题失效。

3. 优化手动路径导入（临时方案） #

如果暂时不想用上面两种方法，可以查看包的package.json里的main或module字段，找到官方指定的入口文件，比如gsap的main字段是dist/gsap.min.js，所以可以这样导入：

import { gsap } from "./node_modules/gsap/dist/gsap.min.js";

比找gsap-core.js更规范，也避免自己找错文件。

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