D3 4.x ES6模块导入失败：正确导入方式是什么？

安全阿岳

2026-5-15

解决D3 4.x ES6模块直接导入失败的问题

你遇到的问题其实很常见——D3的npm包本身是为**打包工具（Rollup、Webpack等）**设计的，并不是直接给浏览器原生ES模块用的，这也是官方文档没提浏览器直接导入的原因，默认假设你在用打包工作流。

先说说你之前报错的原因：

第一个错误Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"：你导入./node_modules/d3时，服务器返回的是这个目录的索引HTML页面（不是JS文件），所以MIME类型不符合要求，浏览器拒绝加载。
第二个错误Uncaught TypeError: Failed to resolve module specifier 'd3-array'：浏览器原生ES模块只认相对路径/绝对URL，而D3的源码里用的是裸模块导入（比如import ... from 'd3-array'），浏览器根本不知道d3-array指向哪里，自然解析失败。

下面给你几种可行的解决方案：

方案1：用CDN提供的ES模块版本（最简单快捷）

直接导入CDN上专门为浏览器ES模块编译的D3版本，不需要本地安装，直接用：

<html>
<head>
  <title>D3</title>
</head>
<body>
  <script type="module">
    // 导入D3的ES模块版本
    import * as d3 from "https://cdn.jsdelivr.net/npm/d3@4/+esm";
    
    // 测试使用，比如创建一个线性比例尺
    const scale = d3.scaleLinear().domain([0, 100]).range([0, 500]);
    console.log(scale(50)); // 输出250
  </script>
</body>
</html>

这个方法适合快速原型开发，不需要配置任何工具。

方案2：使用打包工具（官方推荐的生产环境方式）

按照官方文档的思路，用Rollup或Webpack处理：

确保你已经安装了D3：yarn add d3
在你的JS源码文件（比如app.js）里正常导入：

import * as d3 from "d3";

// 你的业务代码
const scale = d3.scaleLinear().domain([0, 100]).range([0, 500]);

用打包工具（比如Webpack）把app.js打包成浏览器能识别的文件（比如bundle.js）
在HTML里引入打包后的文件：

<script src="./bundle.js"></script>

这种方式适合生产项目，能优化代码体积，处理依赖关系。

方案3：用ES Module Shims让浏览器支持裸模块导入（适合本地调试）

如果你一定要用本地node_modules里的D3，可以用es-module-shims来让浏览器解析裸模块：

安装依赖：yarn add es-module-shims
在HTML里先引入shim脚本，再用module-shim类型导入：

<html>
<head>
  <title>D3</title>
</head>
<body>
  <!-- 先引入ES Module Shims -->
  <script async src="./node_modules/es-module-shims/dist/es-module-shims.js"></script>
  <!-- 用module-shim类型替代module -->
  <script type="module-shim">
    import * as d3 from "d3";
    
    // 测试代码
    console.log(d3.scaleLinear);
  </script>
</body>
</html>

这个工具会在浏览器里模拟npm的模块解析逻辑，让你能直接用裸模块导入。

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