React 和 Browserify：找不到模块 ./focusNode

Question

我在 Grunt 中使用 Browserify 来编译 jsx 文件，并且遇到一个一致的错误，即 browserify 任务因以下错误而失败；

Error: Cannot find module './focusNode' from 'C:\project\src...'

我有一个 jsx 组件：

var React = require('react');

var createBooking = React.createClass({
   render: function () {

    return (
        <div className="Booking">
            <div className="col-xs-12 noPadding">
                <div class="modal-header">
                    <h3 class="modal-title">{this.props.data.title}</h3>
                </div>
                <div class="modal-body">
                     This is a modal
                </div>
            </div>
        </div>
    )
}
});

module.exports = createBooking;

然后是一个主要的JS文件；

var React = require('react');

(function (React) {

    var Booking = require('../dist/components/CreateBooking.js');

    var render = function () {
        React.render(React.createElement(Booking, { data: { title: 'Test' } }, document.getElementById('bookingForm')));
    };

    render();

})(React);

最后是我的 gruntfile（为简洁起见缩短）；

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    browserify: {
        react: {
            options: {
                    transform: [
                        [require('grunt-react').browserify, {global: true}]
                    ],
                    debug: true
            },
            files: [{
                expand: true,
                cwd: 'Scripts/components',
                src: ['**/*.jsx'],
                dest: 'Scripts/dist/components',
                ext: '.js'
            }]          
        },
        dist: {
            files: {
                './Scripts/dist/main_built.js': ['Scripts/custom/main.js']
            },
            options: {
                debug: true,
                paths: ['./node_modules','Scripts/custom/**', 'Scripts/dist/**']
            }
        }
    },
});

我假设错误与某处的路径有关，但我无法弄清楚。有什么线索吗？

Answer 1

您的评论有点难以理解，但我相信您是在说 CreateBooking.js 是一个浏览器化的包。如果是这种情况，可能会解释您的错误：新的捆绑操作正在解析该捆绑包以获取不需要也无法解析的 require() 调用。在这里查看我的回答：.

React 和 Browserify：找不到模块 ./focusNode

React and Browserify: Cannot find module ./focusNode

.net

gruntjs

reactjs

browserify