1

I have done a ReactJS component with a Redux store , binding two together using react-redux.

i have written this code using ES6 and webpack, when i run the component individually and test it inside the code it self by an ES6 import the code is working fine.

But i want to distribute the component as a reusable html element to be used in other projects in our organization, so i got the webpack build and used it inside a angularjs project by binding the component using a angular directive. but then i face many problems, the component is not working as expected.

i have posted a seperate post about the problem here stack overflow question

what i wanted to know is the methodology of distributing a reusable react component written using ES6 and bundled webpack or other bundling mechanism, and using the component inside an ES5 source code.please help with me some resources, guides or some pointers if possible.

Community
  • 1
  • 1
Rangana Sampath
  • 1,447
  • 3
  • 32
  • 57
  • It's hard to answer this question as it would require writing a full article. Instead, since you already started, what if you tell us about what issues you ran into? – ZekeDroid May 07 '16 at 14:29
  • when i want to use the component done with ES6 i have to depend upon a script that need to be written in ES6 to use it. without that i want to export the element from the already done ES6 code, transpile it and the use it in an already written ES5 code? when i build the component with webpack as an export default element, i can't use the component in ES5 code by a typical javascript inclusion in the header of the HTML file, the element seem to be not available in the DOM? – Rangana Sampath May 07 '16 at 14:47

1 Answers1

0

If im understanding correctly - what you want to do with the ReactJS component project is to have a build process which compiles ES6 to ES5.

Your probably already using babel, you may just need another build step to make sure babel output is in a certain directory, eg you could have a build step in your package.json like:

"build": "babel src -d build"

where src is your es6 source code, and build is the output es5 directory.

Then if you want to use the generated javascript so that its usable in other projects within a script tag, you can use browserfy for this (you can ad it to your build script if needed). Eg: 

browserify ./lib/somelib.js 
-o ./build/MyReactComponent.js 
--transform browserify-global-shim 
--standalone MyReactComponent

browserify-global-shim is needed to replace require('react') and require('react-dom') with references to a global variable, you will need to have:

"browserify-global-shim": {
  "react": "React",
  "react-dom": "ReactDOM"
}

in your package.json for this to work. It essentially converts the internal requires to:

var _react = (window.React);
var _reactDom = (window.ReactDOM);

You may even be able to use babelify to do the above in 1 step (although i have never tried this so I cant guarantee it will work)

If you want to require the component in (commonjs) for node based projects, you dont need the browserify step, you can just do something like:

var MyReactComponent = require('..pathtoreactlib');

From the other project. There may be extra steps for different code bases - but this will require more info on the company projects

Marty
  • 2,965
  • 4
  • 30
  • 45
  • i have followed the exact same , but i'm getting failed, should i do like "postal": "postal", "redux": "redux", "react-redux": "react-redux" in "browserify-global-shim" since i use those technologies as well ? – Rangana Sampath May 07 '16 at 17:24
  • No you don't need to. What's your error ? Also have you included the react and react Dom in your scripts header? If you don't want to do it from the other project, you need to export from you main entry point like: http://stackoverflow.com/questions/33815617/use-of-browserify-to-pack-react-components – Marty May 07 '16 at 17:37
  • i'm getting errors like this http://stackoverflow.com/questions/37092308/why-browserify-build-gives-error-for-react-build – Rangana Sampath May 07 '16 at 18:44
  • Have you setup your package JSON with browserfy-global-shim ? – Marty May 08 '16 at 01:31
  • yes i have setup it, "browserify-global-shim": { "react": "React", "react-dom": "ReactDOM" } – Rangana Sampath May 08 '16 at 02:32
  • Not sure why your getting that but it seems like a seperate question. I think I have given you enough of an answer here to get you going – Marty May 08 '16 at 05:48
  • yes you have given a lot of information, i have followed the exact same and still can't find a proper solution, even the build failure out put is not clear to find an direction.do you know any way to get a more clear out put of the build failure? – Rangana Sampath May 08 '16 at 18:58