webpack成功引入d3 v4的两种方式

针对大屏修炼，d3必不可少，可引入d3到项目中不是一件简单的事，很容易犯错，如下：

import d3 from 'd3'
//  执行代码
d3.select('#canvas').text('Hello,yiifaa!')

执行上面的代码，则必然出现d3引用错误，如下：

uncaught TypeError:
Cannot read property 'select' of undefined

1. 利用import as特性

//  利用commonjs特性
import * as d3 from 'd3'
//  代码执行正确
d3.select('#canvas').text('Hello,yiifaa!')

2. 利用require引入

let d3 = require('d3')
//  代码执行正确
d3.select('#canvas').text('Hello,yiifaa!')

3. 结论

之所以上述两种方法能解决d3引入问题，原因在d3第4版满足COMMONJS规范，以及webpack的局部require引入变量不重名特性。