1 | # reactify
|
2 |
|
3 | [Browserify][] transform for JSX (superset of JavaScript used in [React][]
|
4 | library).
|
5 |
|
6 | Basic usage is:
|
7 |
|
8 | % browserify -t reactify main.js
|
9 |
|
10 | `reactify` transform activates for files with either `.jsx` extension or `/**
|
11 | @jsx React.DOM */` pragma as a first line for any `.js` file.
|
12 |
|
13 | If you want to reactify modules with other extensions, pass an `-x /
|
14 | --extension` option:
|
15 |
|
16 | % browserify -t coffeeify -t [ reactify --extension coffee ] main.coffee
|
17 |
|
18 | If you don't want to specify extension, just pass `--everything` option:
|
19 |
|
20 | % browserify -t coffeeify -t [ reactify --everything ] main.coffee
|
21 |
|
22 | ## ES6 transformation
|
23 |
|
24 | `reactify` transform also can compile a limited set of es6 syntax constructs
|
25 | into es5. Supported features are arrow functions, rest params, templates, object
|
26 | short notation and classes. You can activate this via `--es6` or `--harmony`
|
27 | boolean option:
|
28 |
|
29 | % browserify -t [ reactify --es6 ] main.js
|
30 |
|
31 | You can also configure it in package.json
|
32 |
|
33 | ```json
|
34 | {
|
35 | "name": "my-package",
|
36 | "browserify": {
|
37 | "transform": [
|
38 | ["reactify", {"es6": true}]
|
39 | ]
|
40 | }
|
41 | }
|
42 | ```
|
43 |
|
44 | ## Using 3rd-party jstransform visitors
|
45 |
|
46 | Reactify uses [jstransform][] to transform JavaScript code. It allows code
|
47 | transformations to be pluggable and, what's more important, composable. For
|
48 | example JSX and es6 are implemented as separate code transformations and still
|
49 | can be composed together.
|
50 |
|
51 | Reactify provides `--visitors` option to specify additional jstransform visitos
|
52 | which could perform additional transformations.
|
53 |
|
54 | It should point to a module which exports `visitorList` attribute with a list of
|
55 | transformation functions to be applied:
|
56 |
|
57 | % browserify -t [ reactify --visitors es6-module-jstransform/visitors ] main.js
|
58 |
|
59 | Example above uses [es6-module-jstransform][] to compile es6 module syntax
|
60 | (`import` and `export` declarations) into CommonJS module constructs.
|
61 |
|
62 | [Browserify]: http://browserify.org
|
63 | [React]: http://facebook.github.io/react/
|
64 | [jstransform]: https://github.com/facebook/jstransform
|
65 | [es6-module-jstransform]: https://github.com/andreypopp/es6-module-jstransform
|