Grunt Browserify扩展标志不起作用

Grunt-Browserify extensions flag not working

本文关键字：不起作用 标志 扩展 Browserify Grunt      更新时间：2023-09-26

我正在尝试使用Grunt browserify和reatify来解析和捆绑用jsx编写的React组件。我想使用扩展标志，这样我就不必指定模块的文件扩展名，但我一直无法实现这一点。以下是一些测试代码：

格伦菲尔：

'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'from'/Users/***站点/grumt-Test/src'

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

有什么想法吗？

您是否尝试过按如下方式移动browserfyOptions中的属性？

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']
                    }
                }
            }
        }
    });
相关文章：