[英]Grunt-Browserify extensions flag not working
I am trying to use Grunt-browserify and reactify to parse and bundle React components written in jsx. 我正在尝试使用Grunt-browserify和reactify来解析和捆绑用jsx编写的React组件。 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: 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
: 主应用程序文件
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
: 然后是
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: 当我尝试通过运行
grunt
进行编译时,出现错误:
Error: Cannot find module './components/Test' from '/Users/****/Sites/grunt-test/src'
错误:无法从'/ Users / **** / Sites / grunt-test / src'中找到模块'./components/Test'
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. Grunt-browserify文档说它从v1.2.6开始就支持扩展标志,我在网上看到了这样的例子,但是我似乎无法在这里使用它。 If I run browserify from the command line -- like so
browserify -t reactify --extension=.jsx -o dest/app.js
-- it works. 如果我从命令行运行
browserify -t reactify --extension=.jsx -o dest/app.js
就像browserify -t reactify --extension=.jsx -o dest/app.js
-它可以工作。
Any ideas? 有任何想法吗?
Have you tried moving the properties inside browserifyOptions as follow? 您是否尝试过按照以下方式在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']
}
}
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.