Question

我正在使用d3库。它非常大，所以我只想按需下载块。我可以使用require.ensure创建分割点，但是我对如何将库实际放入模块范围感到遗憾。我尽可能接近，下载了块，但d3始终未定义。任何帮助将不胜感激。

var React = require('react');
var d3;

require.ensure([], function(require){

    d3 = require('d3');

});

var Chart = React.createClass({
    render: function() {
        var props = this.props;
        var width = props.width;

        //d3 is undefined here
        var xScale = d3.scale.linear().domain([
            0, 111
        ]).range([
            0, width
        ]);

        return (
            <g>
            </g>
        );
    }
});

module.exports = Chart;

Answer 1

根据我的理解，机制是这样的：

require.ensure(["<file-path or module name>"], function(moduleExportsValue) {
    var myModule = require("<file-path or module name>");
});

，针对您的具体示例：

require.ensure(["d3"], function() {
    var d3 = require("d3");
    // do something with d3
});

编辑：对于在应用中无法立即显示的内容非常有帮助。例如对话框，模态，叠加。

onButtonClick: function(event) {
    this.showLoader();

    var self = this;
    require.ensure("path/to/dialog", function() {
        self.hideLoader();

        var dialog = require("path/to/dialog");
        dialog.open();
    });
},

Webpack需要确保大型模块

1 个答案: