d3 4.x的es6模块导入失败

问题描述：

TL; DR:记录的将d3导入es6模块的方法失败.正确的方法是什么?我的猜测是文档假设我使用的是可以解决这些问题的工作流程

TL;DR: The documented way to import d3 into es6 modules fails. What is the correct way to do this? My guess is the documentation assumes I use a workflow that resolves these problems

详细信息: d3 4.x的自述文件说:

Details: The readme for d3 4.x says:

D3是使用ES2015模块编写的.使用Rollup，Webpack或您首选的捆绑器创建一个自定义捆绑器.要将D3导入ES2015应用程序，请从特定的D3模块中导入特定的符号:

D3 is written using ES2015 modules. Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:

从"d3-scale"导入{scaleLinear};

import {scaleLinear} from "d3-scale";

或将所有内容导入命名空间(此处为d3):

Or import everything into a namespace (here, d3):

从"d3"导入*作为d3；

import * as d3 from "d3";

但是，当我yarn add d3并使用es6脚本标记时，此方法将无法工作:

Yet when I yarn add d3 and use a es6 script tag, this fails to work:

<html>
<head>
  <title>D3</title>
</head>
<body>
  <script type="module">
    import * as d3 from "./node_modules/d3"
  </script>
</body>
</html>

无法加载模块脚本:服务器以非JavaScript MIME类型"text/html"响应.根据HTML规范对模块脚本强制执行严格的MIME类型检查.

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

将导入替换为:

  import * as d3 from "./node_modules/d3/index.js"

..给出此错误:

未捕获的TypeError:无法解析模块说明符"d3-array"

Uncaught TypeError: Failed to resolve module specifier 'd3-array'

答

es6和es2015模块不适用于d3，因为d3选择使用汇总.您会看到此错误，因为无法按文件"./node_modules/d3/index.js"中指定的方式解析该模块，该文件中包含类似于export {default as ascending} from "./src/ascending";的行，这些行缺少以'.js'结尾的真实文件名.因此，换句话说，所有这些条目都被错误配置为不支持浏览器或Node.js中的本机模块.

es6 and es2015 modules will not work with d3 because d3 has chosen to use rollup instead. You are seeing this error because the module cannot be resolved as specified in the file "./node_modules/d3/index.js" which has lines like export {default as ascending} from "./src/ascending"; which are missing the real file name which ends with '.js'. So in other words all these entries are mis-configured to not support native modules in browsers or Nodejs.

您可以使用汇总，也可以使用脚本或手动进行所有文本替换.我使用perl单行代码是因为我不喜欢汇总，并且额外的依赖关系在节点8和节点10之间中断.令人难以置信的奇怪是，这是必要的，但是我也没有在厨房里安装模块装载器.

you can either use rollup or make all the text substitutions yourself using a script or manually. I use a perl one-liner because I dislike rollup and the extra dependencies were breaking between node 8 and node 10. it is unbelievably strange that this is necessary but I also haven't been supporting a kitchen sink of module loaders.

从"./node_modules/d3-something/index.js"中将*作为d3导入

import * as d3 from "./node_modules/d3-something/index.js"

，其内容类似于从'./src/thing'导出{default as something}.由于这些文件未使用具有相对路径完整的本机支持的语法(缺少实际的文件扩展名)，因此，如果没有汇总或进行任何更正，它将无法正常工作.多个受欢迎的项目都做出了同样的决定，要求额外的模块正常工作并放弃本机支持.

which has content like export {default as something} from './src/thing'. because these files do not use the natively supported syntax with a full relative path (it's missing the actual file extension), it won't work without rollup or whatever making these corrections. multiple popular projects have made this same decision to require extra modules to work properly and forego native support.

请参见 https://developer.mozilla. org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

d3 4.x的es6模块导入失败

相关推荐