{"id":13601914,"url":"https://github.com/ericclemmons/grunt-react","last_synced_at":"2025-04-06T13:09:30.011Z","repository":{"id":9137894,"uuid":"10928342","full_name":"ericclemmons/grunt-react","owner":"ericclemmons","description":"[DEPRECATED] Grunt task for compiling Facebook React's .jsx templates into .js","archived":false,"fork":false,"pushed_at":"2016-02-21T06:16:47.000Z","size":1215,"stargazers_count":150,"open_issues_count":2,"forks_count":38,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-06T07:15:41.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/babel/grunt-babel","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ericclemmons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-25T04:37:02.000Z","updated_at":"2025-03-23T22:57:54.000Z","dependencies_parsed_at":"2022-08-30T10:32:02.026Z","dependency_job_id":null,"html_url":"https://github.com/ericclemmons/grunt-react","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fgrunt-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericclemmons","download_url":"https://codeload.github.com/ericclemmons/grunt-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485287,"owners_count":20946398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T18:01:10.019Z","updated_at":"2025-04-06T13:09:29.993Z","avatar_url":"https://github.com/ericclemmons.png","language":"JavaScript","funding_links":[],"categories":["Awesome React","Web 前端"],"sub_categories":["Tools"],"readme":"# [DEPRECATED] grunt-react\n\n[![Build Status](https://travis-ci.org/ericclemmons/grunt-react.png?branch=master)](https://travis-ci.org/ericclemmons/grunt-react)\n[![Dependencies](https://david-dm.org/ericclemmons/grunt-react.png)](https://david-dm.org/ericclemmons/grunt-react)\n[![devDependencies](https://david-dm.org/ericclemmons/grunt-react/dev-status.png)](https://david-dm.org/ericclemmons/grunt-react#info=devDependencies\u0026view=table)\n\n\u003e Grunt task for compiling [Facebook React](http://facebook.github.io/react/)'s JSX templates into JavaScript.\n\nIt also works great with `grunt-browserify`!\n\n- - - \n\n## DEPRECATION NOTICE\n\nOn **June 12th, 2015**, the React team has deprecated `JSTransform` and `react-tools`, which this project uses:\n\u003e http://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html\n\nPlease use [`grunt-babel`](https://github.com/babel/grunt-babel) instead.\n\n- - -\n\n## Getting Started\nThis plugin requires Grunt `~0.4.0`\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install grunt-react --save-dev\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\n\n```js\ngrunt.loadNpmTasks('grunt-react');\n```\n\n## The \"react\" task\n\n### Overview\nIn your project's Gruntfile, add a section named `react` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n  react: {\n    single_file_output: {\n      files: {\n        'path/to/output/dir/output.js': 'path/to/jsx/templates/dir/input.jsx'\n      }\n    },\n    combined_file_output: {\n      files: {\n        'path/to/output/dir/combined.js': [\n          'path/to/jsx/templates/dir/input1.jsx',\n          'path/to/jsx/templates/dir/input2.jsx'\n        ]\n      }\n    },\n    dynamic_mappings: {\n      files: [\n        {\n          expand: true,\n          cwd: 'path/to/jsx/templates/dir',\n          src: ['**/*.jsx'],\n          dest: 'path/to/output/dir',\n          ext: '.js'\n        }\n      ]\n    }\n  },\n})\n```\n\n### Options\n\nThese options are passed to react-tools.\n\n#### options.extension\nType: `String`\nDefault value: `js`\n\nExtension of files to search for JSX-syntax \u0026 convert to JS.\n\n#### options.ignoreMTime\nType: `Boolean`\nDefault value: `false`\n\nSpeed up compilation of JSX files by skipping files not modified since last pass.\n\n#### options.harmony\nType: `Boolean`\nDefault value: `false`\n\nTurns on JS transformations such as ES6 Classes.\n\n#### options.sourceMap\nType: `Boolean`\nDefault value: `false`\n\nAppend inline source map at the end of the transformed source\n\nTurns on JS transformations such as ES6 Classes.\n\n#### options.es6module\nType: `Boolean`\nDefault value: `false`\n\nAllows use of ES6 module syntax. This option does not affect ES6 transformations enabled or disabled by options.harmony.\n\n- - -\n\n### Recommended Usage\nWriting your applications in CommonJS format will allow you to use [Browserify](http://browserify.org/) to\nconcatenate your files.  Plus, with `grunt-react`, your templates will be converted from JSX to JS *automatically*!\n\nFirst, install `grunt-browserify` to your project:\n\n```shell\nnpm install grunt-browserify --save-dev\n```\n\nSecond, register `grunt-browserify` in your Gruntfile:\n\n```js\ngrunt.loadNpmTasks('grunt-browserify');\n```\n\nFinally, add the following task to your Gruntfile:\n\n```js\nbrowserify:     {\n  options:      {\n    transform:  [ require('grunt-react').browserify ]\n  },\n  app:          {\n    src:        'path/to/source/main.js',\n    dest:       'path/to/target/output.js'\n  }\n}\n```\n\nYou've successfully concatenated your JSX \u0026 JS files into one file!\n\n- - -\n\n### Usage Examples\n\n#### Recommended Options\n\nI recommend naming your React Components with the `.jsx` extension:\n\n```js\n/**\n * @jsx React.DOM\n */\n\nvar MyComponent = React.createClass({\n  ...\n  render: function() {\n    return (\n      \u003cp\u003eHowdy\u003c/p\u003e\n    );\n  }\n});\n```\n\nThen, set your Gruntfile to use:\n\n```js\ngrunt.initConfig({\n  react: {\n    files: {\n      expand: true,\n      cwd: 'path/to/jsx/templates/dir',\n      src: ['**/*.jsx'],\n      dest: 'path/to/output/dir',\n      ext: '.js'\n    }\n  },\n})\n```\n\nThis will output the following:\n\n```js\n/**\n * @jsx React.DOM\n */\n\nvar MyComponent = React.createClass({displayName: 'MyComponent',\n  render: function() {\n    return (\n      React.DOM.p(null, \"Howdy\")\n    );\n  }\n});\n```\n\n## Troubleshooting\n\nIf you encounter a file compilation error, you can run `grunt --verbose` to see specifics about each file being transformed.\n\n## Contributing\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).\n\n## Release History\n\n- v0.12.2\n  + Move verbose logging to `grunt --verbose` ([#53](https://github.com/ericclemmons/grunt-react/pull/53))\n\n- v0.12.1\n  + Fix issue with Browserify ([#46](https://github.com/ericclemmons/grunt-react/pull/49))\n\n- v0.12.0\n  + Update all `dependencies` \u0026 `devDependencies`\n\n- v0.11.0\n  + Update `react-tools` to `v0.13.0` ([#45](https://github.com/ericclemmons/grunt-react/pull/45))\n\n- v0.10.0\n  + Update `react-tools` to `v0.12.0` ([#40](https://github.com/ericclemmons/grunt-react/pull/40)).\n    (See release notes: http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html)\n\n- v0.9.0\n  + Continue compilation despite error. ([#31](https://github.com/ericclemmons/grunt-react/pull/31))\n- v0.8.4\n  + Add support for `harmony` via additional options. ([#32](https://github.com/ericclemmons/grunt-react/pull/32))\n- v0.8.3\n  + Update to `react-tools` at `^v0.11.0` ([#33](https://github.com/ericclemmons/grunt-react/pull/33))\n- v0.8.2\n  - Emit `react.error` for Growl \u0026 other notifications ([#23](https://github.com/ericclemmons/grunt-react/pull/23))\n- v0.8.1\n  - Throw a proper error when React fails ([#25](https://github.com/ericclemmons/grunt-react/pull/25))\n- v0.8.0\n  - Update to React v0.10.0 ([#27](https://github.com/ericclemmons/grunt-react/pull/27))\n- v0.7.0\n  - Update to React v0.9.0 ([#24](https://github.com/ericclemmons/grunt-react/pull/24))\n- v0.6.0\n  - Task changes to allow for flexible file options as found in the `grunt-contrib-*` projects.\n  - Taking hints from `grunt-contrib-less` to allow for compiling single files separately, dynamic mappings and combining.\n  - Removed `extension` option as this is determined by flexible file matching now.\n  - Removed MT time ignoring, this can be easily done with the `grunt-newer` plugin.\n  - Errors are ignored and skipped by default to match how other grunt plugins work.\n- v0.5.2\n  - `grunt.fail` instead of throwing an error ([#11](https://github.com/ericclemmons/grunt-react/pull/11))\n- v0.5.1\n  - Add file name to errors ([#15](https://github.com/ericclemmons/grunt-react/pull/15))\n- v0.5.0\n  - Update to `react-tools` `~v0.5.0`\n- v0.4.1\n  - Add logging to make it easier catch errors, thanks to @lorefnon ([#5](https://github.com/ericclemmons/grunt-react/pull/5))\n- v0.4.0\n  - Update to react-tools ~0.4.0, thanks to @Agent-H ([#3](https://github.com/ericclemmons/grunt-react/pull/3))\n- v0.3.0\n  - No longer uses `bin/jsx`, thanks to @petehunt ([#2](https://github.com/ericclemmons/grunt-react/pull/2))\n- Add `ignoreMTime` option\n- v0.2.0\n  - Add `require('grunt-react').browserify()` and `require('grunt-react').source()` for compiling within Node\n- v0.1.0\n  - Initial release\n\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/ericclemmons/grunt-react/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fgrunt-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericclemmons%2Fgrunt-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fgrunt-react/lists"}