【问题标题】:React and Browserify: Cannot find module ./focusNodeReact 和 Browserify:找不到模块 ./focusNode
【发布时间】:2015-09-26 00:36:29
【问题描述】:

我在 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/**']
            }
        }
    },
});   

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

【问题讨论】:

  • dist/components/CreateBooking.js 中有什么内容?
  • 只是 CreateBooking.js,它是通过 Browserify 从一个单独的文件夹中编译出来的。

标签: .net gruntjs reactjs browserify


【解决方案1】:

您的评论有点难以理解,但我相信您是在说 CreateBooking.js 是一个 Browserified 捆绑包。如果这种情况可能解释了您的错误:新的捆绑操作正在解析该捆绑包以获取不需要也无法解决的 require() 调用。在这里查看我的答案:Browserifying libraries that were themselves browserified: relative paths error

【讨论】:

  • 确实这似乎是问题所在。我还没有找到一个令人满意的解决方案,所以我转而使用 *.jsx 来保存所有文件,这样它们就可以一次性被浏览器化。不知道,但它现在有效。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-01-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多