Grunt-Browserify扩展标志不起作用 [英] Grunt-Browserify extensions flag not working

问题描述

我正在尝试使用Grunt-browserify并重新分析并将jsx中编写的React组件捆绑在一起。我想使用扩展标志，这样我就不必指定我的模块的文件扩展名，但我一直无法得到这个工作。以下是一些测试代码：

一个Gruntfile：

 'use严格'; 
 module.exports = function（grunt）{
 
 grunt.initConfig（{
 pkg：grunt.file.readJSON（'package.json'），
 browserify ：{
 dev：{
 src：'src / app.jsx'，
 dest：'dest / app.js'，
选项：{
 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'）; //这是问题... 
 
 React.render（
< Test /> ;, 
 document.getElementById（'test'）
）; 
  

然后 Test.jsx ：

 'use strict'; 
 var React = require（'react'）; 
 
 var Test = React.createClass（{
 
 render：function（）{
 return（
< div> 
< div> p>一些标记< / p> 
< / div> 
）; 
} 
}）; 
 
 module.exports = Test; 
  

当我尝试通过运行 grunt ，出现错误：
$ b

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

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

有什么想法？

解决方案

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'] 
} 
} 
} 
} 
}）; 
  

I am trying to use Grunt-browserify and reactify to parse and bundle React components written in jsx. I want to use the extension flag so that I don't have have to specify the file extension name of my modules, but I have been unable to get this to work. Here is some test code:

A 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']);

};

The main app file app.jsx:

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

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

And then Test.jsx:

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

var Test = React.createClass({

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

module.exports = Test;

When I try to compile this by running grunt, I get an error:

Error: Cannot find module './components/Test' from '/Users/****/Sites/grunt-test/src'

The Grunt-browserify documentation says that it has supported the extensions flag since v1.2.6 and I have seen examples of this all over the web, but I can't seem to get it to work here. If I run browserify from the command line -- like so browserify -t reactify --extension=.jsx -o dest/app.js -- it works.

Any ideas?

解决方案

Have you tried moving the properties inside browserifyOptions as follow?

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']
                    }
                }
            }
        }
    });

这篇关于Grunt-Browserify扩展标志不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！