Grunt编译JSX的initConfig

来源：互联网发布：获奖网络小说完本推荐编辑：程序博客网时间：2024/06/11 14:07

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

0 0