1

我正在尝试使用 Grunt-browserify 和 reactify 来解析和捆绑用 jsx 编写的 React 组件。我想使用扩展标志，这样我就不必指定模块的文件扩展名，但我无法让它工作。这是一些测试代码：

一个 Grunt 文件：

'use strict';
module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        browserify: {
            dev: {
                src: 'src/app.jsx',
                dest: 'dest/app.js',
                options: {
                    debug: true,
                    transform: ['reactify'],
                    extensions: ['.jsx']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-browserify');

    grunt.registerTask('default', ['browserify:dev']);

};

主应用程序文件app.jsx：

'use strict';
var React = require('react');
var Test = require('./components/Test');   // Here is the problem... 

React.render(
    <Test />,
    document.getElementById('test')
);

然后Test.jsx：

'use strict';
var React = require('react');

var Test = React.createClass({

    render: function() {
        return(
            <div>
            <p>Some markup</p>
            </div>
        );
    }
});

module.exports = Test;

当我尝试通过运行编译它时grunt，出现错误：

错误：无法从“/Users/****/Sites/grunt-test/src”中找到模块“./components/Test”

Grunt-browserify 文档说它从 v1.2.6 开始就支持扩展标志，我在整个网络上都看到了这样的例子，但我似乎无法让它在这里工作。如果我从命令行运行 browserify - 就像这样browserify -t reactify --extension=.jsx -o dest/app.js- 它可以工作。

有任何想法吗？

4

1 回答 1

10

您是否尝试过如下移动 browserifyOptions 中的属性？

grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        browserify: {
            dev: {
                src: 'src/app.jsx',
                dest: 'dest/app.js',
                options: {
                    browserifyOptions: {
                        debug: true,
                        transform: ['reactify'],
                        extensions: ['.jsx']
                    }
                }
            }
        }
    });
于 2015-03-10T03:05:49.217 回答