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

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

                    

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

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

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

uncaught TypeError:Cannot read property 'select' of undefined
  
1
2

1. 利用import as特性

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

2. 利用require引入

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

3. 结论

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

           

浏览人工智能教程