Skip to content

Bundle components

caoyangs edited this page Sep 13, 2016 · 2 revisions

The idea is to bundle each component with demo/demo.jsx as the entry point, which will export the demo component, allowing the explorer to "require" it.

Initially these bundles were put under client, and the app would require("component-name/bundle.min.js") to get the demo component. However, a couple of big downsides with this approach are (1) as the number of components gets bigger, gulp build takes longer and would eventually run out of memory, and (2) every component update requires a new gulp build and a server restart - not an ideal dynamic update.

Hence we need to move these bundles to server side, and let client load them. However, this way the client cannot "require" the bundles to get what they export. Therefore we have a post processing script which saves the exports to the global window object that the client can access.

Now that all the bundles are on server side, there's no rebuild or restart needed - real dynamically update.

A few things to notice:

  • when bundling, remember to exclude react and react-dom, since both our app and our components are react, including it in the bundles causes duplicate react error.
  • since the app downloads components from npm, it's important not to npmignore demo folder.
  • the explorer works best with components using our archetype.
Clone this wiki locally