使用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

Object.defineProperty(exports, '__esModule', { value: true });

 

相关链接：__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

function _interopRequireWildcard(obj) {
    if (obj && obj.__esModule) {
        return obj; 
    } else {
        var newObj = {}; 
        if (obj != null) {
            for (var key in obj) {
                if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; 
            } 
        } 
        newObj['default'] = obj; return newObj; 
    } 
}

也就是*替换了default

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

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