Question

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

错误：无法从'C：\ project \ src ...'找到模块'./focusNode'

我有一个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()次呼叫的捆绑。请在此处查看我的回答：Browserifying libraries that were themselves browserified: relative paths error。

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

1 个答案: