1

Grunt-browserify と reactify を使用して、jsx で記述された React コンポーネントを解析およびバンドルしようとしています。モジュールのファイル拡張子名を指定する必要がないように拡張子フラグを使用したいのですが、これを機能させることができませんでした。ここにいくつかのテストコードがあります:

Gruntfile:

'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、エラーが発生します。

エラー: モジュール './components/Test' が '/Users/****/Sites/grunt-test/src' から見つかりません

Grunt-browserifyのドキュメントには、v1.2.6 から拡張機能フラグをサポートしていると書かれており、ウェブ全体でこの例を見てきましたが、ここで機能させることはできないようです。コマンド ラインから browserify を実行すると、そのようbrowserify -t reactify --extension=.jsx -o dest/app.jsに機能します。

何か案は?

4

1 に答える 1