如何修复 require.ensure 错误 Webpack、Babel6、React？

Question

我尝试使用 require.ensure 为 Facility.js 创建一个块

import React, { Component } from 'react';
import { render } from 'react-dom';
class Facility extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
              ....
        };
    }
    render() {
        return (
            <div>
                      ....
            </div>
        );
    }
}

export default Facility;
//Tried module.exports = Facility;

NonPatientSer.js

var Facility;
require.ensure([], function(require) { Facility = require('./Facility'); }, 'facility');

开发 我可以在我的源代码中看到 facility.bundle.js 但对其的调用返回 undefined 并且此错误

警告：React.createElement：类型不应为 null、未定义、 布尔值或数字。它应该是一个字符串（对于 DOM 元素）或 ReactClass（用于复合组件）。检查渲染方法 NonPatientSer

和

未捕获的不变违规：元素类型无效：预期为 字符串（用于内置组件）或类/函数（用于复合 组件）但得到：未定义。检查渲染方法 NonPatientSer.

生产（运行构建）

不允许加载本地资源： file:///C:/Users/.../facility.bundle.js

Webpack 配置

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:  __dirname + '/',
    chunkFilename: '[name].bundle.js'
  },

Answer 1

首先，您需要修复 webpack.config 中的 publicPath 属性。你应该使用：

publicPath:  '/dist/'

而不是绝对路径。

其次，如果你使用es6语法导出模块：

export default Facility;

你应该这样写你的导入代码：

require.ensure([], function(require) {
  Facility = require('./Facility').default;
  ReactDOM.render(<Facility/>, document.getElementById('app'));
}, 'facility');

或者只是使用commonjs语法：

module.exports = Facility;

然后

require.ensure([], function(require) {
  Facility = require('./Facility');
  ReactDOM.render(<Facility/>, document.getElementById('app'));
}, 'facility');

另请参阅：http://www.2ality.com/2015/12/babel-commonjs.html

更新： 你可以在你的入口js文件中设置publicPath。例如：

entry.js

__webpack_public_path__ = '/publicPathToChunk/';

var chunk;
require.ensure([], function(require) { 
  chunk = require('./chunk'); 
}, 'chunk');

另外，你可以使用下一个技巧：

var bundleSrc = document.querySelector('[src*="bundle"]').getAttribute("src");
__webpack_public_path__ = bundleSrc.substr(0, bundleSrc.lastIndexOf("/") + 1);