d3['default'] is undefined

使用Babel引入d3,即import d3 from 'd3',使用时出现undefined的错误,调试后发现

var _d3 = __webpack_require__(164);

var _d32 = _interopRequireDefault(_d3);

var fill = _d32['default'].schemeCategory20;

_d3有schemeCategory20,d32['default']是undefined,

_interopRequireDefault是什么鬼?

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

就是根据__esModule 的一个if else,__esModule又是什么?

这里有一篇比较具体的解释 http://ryerh.com/javascript/2016/03/27/babel-module-implementation.html

简单来说,default就是我们在class后面写的 export default xxx

翻一翻源码,d3的default是true,但没有export default

 

相关链接:__esModule true in build/d3.js?

Improve docs: ES6 usage example

从这两个链接中,找到了d3的正确用法

import * as d3 from 'd3'

import文档

就是说,把d3的所有模块导出,给d3这个作用域

调试来看,就是

var _d3 = __webpack_require__(164);

var d3 = _interopRequireWildcard(_d3);

可以看到,用了import as后

从_interopRequireDefault转变为_interopRequireWildcard

也就是*替换了default

另外,必须再说一下,d3没有default,但d3的插件不一定没有

比如我使用的d3-cloud,还是要用import cloud from 'd3-cloud'

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注