TL;DR:记录在案的将d3导入es6模块的方法失败了。正确的方法是什么?我的猜测是,文档假定我使用解决这些问题的工作流
详细信息:D34的自述文件。x说:
D3是使用ES2015模块编写的。使用汇总、Webpack或您首选的捆绑程序创建自定义捆绑包。要将D3导入ES2015应用程序,请从特定D3模块导入特定符号:
从“d3比例”导入{scaleLinear};
或者将所有内容导入命名空间(此处为d3):
从"d3"中导入*作为d3;
然而,当我yarn添加d3
并使用es6脚本标记时,这将无法工作:
<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类型检查。
将导入替换为:
import * as d3 from "./node_modules/d3/index.js"
..给出此错误:
无法解析模块说明符d3-array
es6和es2015模块不能与d3一起使用,因为d3选择使用汇总。您看到此错误是因为无法按照文件“/node_modules/d3/index.js”中的指定解析该模块,该文件的行类似于“/src/ascending”中的“export{default as ascending}”
缺少以“”结尾的真实文件名。js’。因此,换句话说,所有这些条目都被错误配置为不支持浏览器或NodeJ中的本机模块。
您可以使用汇总或使用脚本或手动进行所有文本替换。我使用perl单行程序,因为我不喜欢汇总,额外的依赖关系在节点8和节点10之间中断。令人难以置信的是,这是必要的,但我也没有支持模块加载器的厨房接收器。
从“/node_modules/d3 something/index.js”导入*作为d3
其内容类似于导出{default as something}from'/src/东西'。因为这些文件没有使用本机支持的语法和完整的相对路径(它缺少实际的文件扩展名),所以如果不进行汇总或任何更正,它将无法工作。多个流行的项目都做出了同样的决定,需要额外的模块才能正常工作,并放弃本机支持。
看见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
@jimmont是正确的:由于“裸”导入,在没有本地构建的情况下导入d3包的模块形式不起作用。这些问题可以通过CDN的D3使用来解决,特别是unpkg。通用域名格式。故事是这样的。
事实证明,d3使用package.json来允许它从一个单一的源npm本身导出两种格式。为此,它使用模块: field。
访问所有d3或子模块/repo(共有30个)的最简单方法UNPGG是理想的:
要导入所有d3:
import*作为d3从'https://unpkg.com/d3?module“
要导入子模块,请执行以下操作:
import*作为从中的选择https://unpkg.com/d3-selection?module“
问题内容: 我需要做类似的事情: 上面的代码无法编译;它抛出。 我尝试使用此处所示的方法,但是我不知道从哪里来。这是没有最终被接受的ES6提案吗?该文章中指向“编程API”的链接将我转至不推荐使用的docs页面。 问题答案: 现在,ECMA确实有动态进口建议。这是在第3阶段。这也可以作为babel-preset使用。 以下是根据您的情况进行条件渲染的方法。 这基本上返回了一个承诺。承诺解决方案有望
问题内容: 我开始认为这是不可能的,但是无论如何我都想问。 我想测试我的一个ES6模块以特定方式调用另一个ES6模块。有了茉莉花,这非常容易- 应用程式码: 和测试代码: 笑话相当于什么?我觉得这是一件很想做的简单的事,但是我一直在努力尝试弄清头发。 我最接近的是将s 替换为s,并将其移入测试/函数中。都不是我想做的事情。 为了获得加分,我希望在其中的功能为默认导出时使整个工作正常进行。但是,我知
问题内容: 我一直在整个互联网上寻找答案,但没有明确的答案。 当前,NodeJS仅使用CommonJS语法加载模块,如果您确实要使用标准的ES2015模块语法,则必须事先对其进行转换,或者在运行时使用外部模块加载器。 目前,我不太愿意使用这两种方法,NodeJS维护人员是否计划支持ES2015模块?我完全没有发现任何提示。 目前,NodeJS 6.x声称支持96%的ES2015功能,但没有任何模块
我需要做一些事情,比如: 上面的代码无法编译;它抛出 我尝试使用,如下所示,但我不知道来自哪里。这是一个最终没有被接受的ES6提案吗?该文章中指向“编程 API”的链接将我转储到一个已弃用的文档页面。
我在网上到处找都找不到一个明确的答案。 当前Node.js仅使用CommonJS语法来加载模块,如果您真的想使用标准的ECMAScript 2015模块语法,那么您要么必须事先传输它,要么在运行时使用外部模块加载器。 目前,我不太愿意使用这两种方法中的任何一种,Node.js的维护人员是否计划支持ECMAScript2015模块?关于这一点,我根本没有找到任何提示。 目前,Node.js6.x声称
我看到ES6模块的公共导出是通过以下两种方式完成的: 这两个都有效吗? 如果是这样,为什么它们都存在? 使用ES6语法的模块导出还有其他有效的选项吗? 我很惊讶我还没能用我的谷歌找到答案。我只关心ES6模块,而不关心通用JS、要求JS、AMD、节点等。
问题内容: 我有一个用ES6编写的node.js库(与Babel一起编译),在其中导出了以下子模块: 如果从我的主要项目中,我包括这样的图书馆 我可以看到正确的输出,并且可以按预期工作。但是,如果我尝试包含这样的库: 会的。 有人可以解释这里发生了什么吗?这两种导入方法不应该等效吗?如果没有,我想念什么? 问题答案: 正在请求一个具有所有“ lib”命名出口的对象。 被命名为exports,这就是
模块内的所有代码和数据都有文件作用域,这意味着它们不能被模块外部的代码访问。 要在模块外部共享代码或数据,需要使用export关键字导出。 在后端(服务器端)使用模块是相对简单的,你只需使用import关键字。 然而,Web浏览器没有模块或导入的概念,他们只知道如何加载JavaScript代码。 我们需要一种方法来引入一个javascript模块,以便从其他JavaScript代码开始使用它。 这