Grunt编译JSX的initConfig

自己跟着React的tutorial做的小demo，在编译的时候，跟着babel-grunt真的实现不来，不知道是我太弱了还是api写的含混不清。config贴下，以备下次使用。
需要依赖的devDependencies贴出：

{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.14.0",
"socket.io": "^1.7.2"
},
"devDependencies": {
"babel-preset-react": "^6.16.0",
"grunt": "^1.0.1",
"grunt-babel": "^6.0.0",
"load-grunt-tasks": "^3.5.2"
}
}

Gruntfile.js中的initconfig贴出：

module.exports = function(grunt) {
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 
grunt.initConfig({
babel: {
options: {
sourceMap: true,
presets: ['babel-preset-react']
},
dist: {
files: {
'five-in-line/dist/app.js': 'five-in-line/js/app.jsx'
},
// files: [
//
{
//
expand: true,
//
cwd: 'public/js',
//
src: [ '**/*.jsx' ],
//
dest: 'public/js',
//
ext: '.js'
//
}
// ]
}
}
});
grunt.registerTask('default', ['babel']);
}

这里根据babel初始默认的都是编译es6也就是es2015的option，因为我们只是编译react的代码，所以需要将preset改成babel-preset-react。

然后执行grunt命令就好咯

第一次跑node的小demo，也明白了dependencies里边都是生产环境需要依赖的组件，而devDependencies都是一些测试，优化，检测，编译需要的工具

最后

以上就是帅气西牛为你收集整理的Grunt编译JSX的initConfig的全部内容，希望文章能够帮你解决Grunt编译JSX的initConfig所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。