whackage provides a hot-reload-friendly workflow for developing across multiple React Native packages
React Native packager, the development server that bundles your app's JavaScript sources, has a few rough
edges when it comes to developing apps and libraries that span across multiple repositories. It doesn't
handle symlinks reliably, and the
Haste module system gets easily confused by
@providesModule declarations in subdependencies.
Whackage is an npm link replacement that works with React Native. It synchronizes changes in your local workspace to your project's node_modules without using symlinks, and automatically generates a packager blacklist for linked modules to avoid Haste naming collisions.
We wrote whackage to scratch our own itch when working on Victory Native. It's a blunt instrument, but it works well. Hope you find it useful!
# install whackage globally
npm i -g whackage
# rest of the steps happen in your project root directory
cd ~/your-project-directory
# create new whackage.json
whack init
# create a link to a package you want to make changes to
whack link ../path/to/other/package
# start react native packager and the whackage server (equivalent to npm start)
whack run startMore detailed instructions of each step below:
- node
>=4 - npm
>=3 - OSX/Linux. Windows currently not supported, but PRs welcome.
rsync(most likely pre-installed on your system)
Install whackage globally:
npm i -g whackageYou'll now have access to the whack command on your command line. To get started, generate an empty
whackage.json in your project's root directory:
whack initYou can then link local copies of React Native libraries to your project with whack link <path>, e.g.:
whack link ../victory-core-native
whack link ../victory-chart-native
You'll now have a whackage.json file that looks as follows:
{
"include": "/**/*.js",
"exclude": ["/node_modules/*", ".babelrc", ".git"],
"dependencies": {
"victory-chart-native": "../victory-chart-native",
"victory-core-native": "../victory-core-native"
}
}The dependencies map specifies which modules to synchronize, and paths to directories where to
look for the sources.
By default whackage watches changes to .js files, and ignores your sources' node_modules and git metadata. We also skip copying Babel configurations, because the React Native packager does not support per-module configurations, and project-specific presets often causes the Babel transpilation step to fail.
You can configure the include and exclude glob patterns as needed.
Start the packager server with whack run <command>, where command is the npm script you normally use
to start your development server.
If you usually start the server with npm start, the corresponding whackage command is:
whack run start(Alternatively, if your start task is npm run server:dev, you'd use whack run server:dev!)
When started, the whackage server will overwrite the specified dependencies in your node_modules
with the sources you linked with whack link, and start a file watcher that synchronizes changes made
in the source directories into your node_modules as they happen.
It will also specify a CLI config
which adds the node_modules within linked source directories to the Haste blacklist to avoid @providesModules
naming collisions.
When you whack link a package, whackage automatically installs and flattens transitive dependencies into your project. If you change the dependencies of your linked packages, you'll need to run whack install to add them to your project:
whack install victory-chart-nativeOr sync all transitive dependencies or all linked packages:
whack installWhen you're done making changes to your local packages, you can remove the whackage.json entry and reset the module to its original state:
whack unlink victory-chart-native
To reset your your original dependencies, but keep the whackage.json around for the next time you want to work with that package, simply nuke your node_modules:
rm -rf node_modules && npm i
Run whack --help for a list of all available commands and options.
It's wacky, it's hacky, and it rhymes with package. Also it whacks your node_modules.
Found an issue or a missing feature? Congratulations! 🎉 That is the prize you win as an early adopter! GitHub issues and pull requests are more than welcome.
This project is in a pre-release state. The API may be considered relatively stable, but changes may still occur.
Archived: This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent