UNPKG

2.12 kBMarkdownView Raw
1# reactify
2
3[Browserify][] transform for JSX (superset of JavaScript used in [React][]
4library).
5
6Basic 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
13If 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
18If 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
25into es5. Supported features are arrow functions, rest params, templates, object
26short notation and classes. You can activate this via `--es6` or `--harmony`
27boolean option:
28
29 % browserify -t [ reactify --es6 ] main.js
30
31You 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
46Reactify uses [jstransform][] to transform JavaScript code. It allows code
47transformations to be pluggable and, what's more important, composable. For
48example JSX and es6 are implemented as separate code transformations and still
49can be composed together.
50
51Reactify provides `--visitors` option to specify additional jstransform visitos
52which could perform additional transformations.
53
54It should point to a module which exports `visitorList` attribute with a list of
55transformation functions to be applied:
56
57 % browserify -t [ reactify --visitors es6-module-jstransform/visitors ] main.js
58
59Example 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