Grunt编译JSX的initConfig

最新推荐文章于 2025-02-19 10:43:05 发布

原创最新推荐文章于 2025-02-19 10:43:05 发布 · 924 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了一位开发者在尝试使用 React 和 Grunt 构建工具进行项目编译过程中的经验总结，包括如何配置 Babel 来正确编译 React 代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己跟着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']);
}