Webpack 要求确保大型模块

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 要求确保大型模块

Webpack require ensure large modules

node.js

webpack