Factor react-native packager bundles into common shared bundles
Check the directories.
Here is an overview:
⌘ tree -I 'node_modules' .
.
├── build.js
├── lib
│ └── sayHi.js
├── package.json
└── page
├── bar
│ └── index.ios.js
└── foo
└── index.ios.js
You should ignore the build.js right now.
Suppose we have two bundles to build: foo.ios.jsbundle, bar.ios.jsbundle.
We can use the packager shipped with RN, and do:
node node_modules/react-native/local-cli/cli.js bundle --entry-file page/foo/index.ios.js --bundle-output rn-packager-build/foo.ios.jsbundle node node_modules/react-native/local-cli/cli.js bundle --entry-file page/bar/index.ios.js --bundle-output rn-packager-build/bar.ios.jsbundle
Two bundles will be created under rn-packager-build.
⌘ tree -I 'node_modules' .
.
├── build.js
├── lib
│ └── sayHi.js
├── package.json
├── page
│ ├── bar
│ │ └── index.ios.js
│ └── foo
│ └── index.ios.js
└── rn-packager-build
├── bar.ios.jsbundle
└── foo.ios.jsbundle
However, there are so many codes shared by the two bundles that we decide to create another common bundle for sharing among them.
NOTE: To run the example successfully, you should copy the react-native directory to MyApp/node_modules rather than making a symlink to it.
NOTE: In react-native 0.18.1, probably you also have to run the following command. See #5191
rm node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc
So we instead run:
node build.js
build.js
var bundle = require('../../') Promise.resolve() .then(function () { var del = require('del') return del('build') }) .then(function () { var fs = require('fs') fs.mkdirSync('build') }) .then(function () { var path = require('path') return bundle( { dev: true, transformer: require.resolve('react-native/packager/transformer'), verbose: false, platform: 'ios', }, { projectRoots: [__dirname], blacklistRE: require('react-native/packager/blacklist')('ios'), }, { entries: ['page/foo/index.ios.js', 'page/bar/index.ios.js'], output: function (entry) { var name = 'common' if (entry) { name = path.basename(path.dirname(entry)) } return path.join('build', name + '.ios.jsbundle') }, } ) }) .catch(function (err) { console.log(err.stack) })
Now we get three bundles in build.
⌘ tree -I 'node_modules' .
.
├── build
│ ├── bar.ios.jsbundle
│ ├── common.ios.jsbundle
│ └── foo.ios.jsbundle
├── build.js
├── lib
│ └── sayHi.js
├── package.json
├── page
│ ├── bar
│ │ └── index.ios.js
│ └── foo
│ └── index.ios.js
└── rn-packager-build
├── bar.ios.jsbundle
└── foo.ios.jsbundle
All codes from RN and lib are packed into common.ios.jsbundle,
while others are left into page-specific bundles.
We can check the diff:
⌘ diff build/common.ios.jsbundle rn-packager-build/foo.ios.jsbundle
1245a1246,1265
> __d('awesome/page/foo/index.ios.js',function(global, require, module, exports) { var React=require('react-native/Libraries/react-native/react-native.js');var
>
> TabBarIOS=React.TabBarIOS;var NavigatorIOS=React.NavigatorIOS;
>
> require('awesome/lib/sayHi.js');
>
> var Foo=React.createClass({displayName:'Foo',
> render:function(){
> return (
> React.createElement(TabBarIOS,null,
> React.createElement(TabBarIOS.Item,{title:'React Native',selected:true},
> React.createElement(NavigatorIOS,{initialRoute:{title:'React Native'}}))));}});
>
>
>
>
>
>
> React.AppRegistry.registerComponent('foo',function(){return Foo;});
> });
58665c58685,58686
< __SSTOKENSTRING = "@generated SignedSource<<922f0da78fe19b36d9729f2c85b14e92>>";
---
> ;require("awesome/page/foo/index.ios.js");
> __SSTOKENSTRING = "@generated SignedSource<<0c2eb72ce14334d6a657b129439401e3>>";
build/foo.ios.jsbundle:
__d('awesome/page/foo/index.ios.js',function(global, require, module, exports) { var React=require('react-native/Libraries/react-native/react-native.js');var TabBarIOS=React.TabBarIOS;var NavigatorIOS=React.NavigatorIOS; require('awesome/lib/sayHi.js'); var Foo=React.createClass({displayName:'Foo', render:function(){ return ( React.createElement(TabBarIOS,null, React.createElement(TabBarIOS.Item,{title:'React Native',selected:true}, React.createElement(NavigatorIOS,{initialRoute:{title:'React Native'}}))));}}); React.AppRegistry.registerComponent('foo',function(){return Foo;}); }); ;require("awesome/page/foo/index.ios.js"); __SSTOKENSTRING = "@generated SignedSource<<8958bda140758263bb5ab4dde164c41e>>";
- Tests.
- Handle assets.
- Command line tool.