Grunt编译JSX的initConfig

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baidu_35407267/article/details/54173001

自己跟着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都是一些测试，优化，检测，编译需要的工具