Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/callstack/haul
Haul is a command line tool for developing React Native apps, powered by Webpack
https://github.com/callstack/haul
cli react-native webpack
Last synced: 25 days ago
JSON representation
Haul is a command line tool for developing React Native apps, powered by Webpack
- Host: GitHub
- URL: https://github.com/callstack/haul
- Owner: callstack
- License: mit
- Created: 2017-03-20T20:23:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-09T23:54:54.000Z (over 2 years ago)
- Last Synced: 2024-05-01T11:44:08.813Z (6 months ago)
- Topics: cli, react-native, webpack
- Language: TypeScript
- Homepage:
- Size: 5.43 MB
- Stars: 3,637
- Watchers: 43
- Forks: 214
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-native - haul ★2711 - command line tool for developing React Native apps (Utilities / Other Platforms)
- awesome-list - haul
- awesome-list - haul
README
A command line tool for developing React Native apps
---
[![Build Status][build-badge]][build]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Code of Conduct][coc-badge]][coc]
[![Chat][chat-badge]][chat]
[![tweet][tweet-badge]][tweet]
---
## Notice
We're actively working on a Haul successor, which would provide long awaited features like Hot Module Replacement + React Refresh and better feature-parity with Metro. The version `1.0.0` is already released!
If you're investigating using Haul, we highly recommend giving a [Re.pack](https://github.com/callstack/repack) a go.
If you're already using Haul, we recommend migrating to [Re.pack](https://github.com/callstack/repack) for better developer experience and feature set. The migration process is fairly straighforward, since you now have full access to `webpack.config.js`.
---
Haul is a drop-in replacement for `react-native` CLI built on open tools like Webpack. It can act as a development server or bundle your React Native app for production.
`@haul-bundler/cli` and other packages under `@haul-bundler` scope are a overhaul of `haul` package __and support only React Native 0.59.0 and above__. If you need to support older versions, please check [`legacy` branch](https://github.com/callstack/haul/tree/legacy).
`@haul-bundler/cli` and other packages __requires Node 10 to be installed__. If you're running older version, please upgrade to Node 10 LTS or newer.
## Features
- Replaces React Native packager to bundle your app
- Access to full webpack ecosystem, using additional loaders and plugins is simple
- Doesn't need watchman, symlinks work nicely
- Helpful and easy to understand error messages
## Packages
| Name | Version | Description | Required |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| `@haul-bundler/cli` | [![cli version][version-cli]][package-cli] | CLI and commands implementation. | Yes |
| `@haul-bundler/core` | [![core version][version-core]][package-core] | Core logic and functionality. | Yes (installed with `cli`) |
| `@haul-bundler/core-legacy` | [![core-legacy version][version-core-legacy]][package-core-legacy] | Legacy logic from `haul` package | Yes (installed with `cli`) |
| `@haul-bundler/babel-preset-react-native` | [![babel-preset-react-native version][version-babel-preset-react-native]][package-babel-preset-react-native] | Babel preset tweaked for RN 0.59+, which can decrease the bundle size by using only the necessary transforms. | Yes (installed by `init` command) |
| `@haul-bundler/basic-bundle-webpack-plugin` | [![basic-bundle-webpack-plugin version][version-basic-bundle-webpack-plugin]][package-basic-bundle-webpack-plugin] | Webpack plugin with tweaks for plain JS bundle. | Yes (installed with `cli`) |
| `@haul-bundler/ram-bundle-webpack-plugin` | [![ram-bundle-webpack-plugin version][version-ram-bundle-webpack-plugin]][package-ram-bundle-webpack-plugin] | Webpack plugin for RAM bundle support. | Yes (installed with `cli`) |
| `@haul-bundler/preset-0.59` | [![preset-0.59 version][version-preset-0.59]][package-preset-0.59] | Preset with configuration tweaked for RN 0.59. | Yes (installed by `init` command when using RN 0.59) |
| `@haul-bundler/preset-0.60` | [![preset-0.60 version][version-preset-0.60]][package-preset-0.60] | Preset with configuration tweaked for RN 0.60. | Yes (installed by `init` command when using RN 0.60) |
| `@haul-bundler/explore` | [![explore version][version-explore]][package-explore] | Explore and analyse generated bundle | No (optional) |
## Getting started
Start by adding Haul as a dependency to your React Native project (use `react-native init MyProject` to create one if you don't have a project):
```bash
yarn add --dev @haul-bundler/cli
# Traditionalist? No problem:
npm install --save-dev @haul-bundler/cli
```
To configure your project to use haul, run the following:
```bash
yarn haul init
# npm >= 5.2.0 :
npx haul init
# npm < 5.2.0 :
npm install -g npx
npx haul init
```
This will automatically add the configuration needed to make Haul work with your app, e.g. add `haul.config.js` to your project, which you can customize to add more functionality.
Next, you're ready to start the development server:
```bash
yarn haul start
# Or:
npx haul start
```
Finally, reload your app to update the bundle or run your app just like you normally would:
```bash
react-native run-ios
```
## Documentation
Check out the docs to learn more about available commands and tips on customizing the webpack configuration.
1. [CLI Commands](docs/CLI%20Commands.md)
2. [Configuration](docs/Configuration.md)
3. [Recipes](docs/Recipes.md)
4. [Migration guide](docs/Migration.md)
## Limitations
Haul uses a completely different architecture from React Native packager, which means there are some things which don't work quite the same.
* Delta Bundles (RN 0.52+) have minimal support
* Existing `react-native` commands
* No support for Hot Module Replacement
The following features are **unlikely to be supported** in the future:
- Haste module system: use something like [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver) instead
- Transpile files under `node_modules`: transpile your modules before publishing, or configure webpack not to ignore them
## Made with ❤️ at Callstack
Haul is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [[email protected]](mailto:[email protected]) if you need any help with these or just want to say hi!
Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥
[build-badge]: https://img.shields.io/circleci/project/github/callstack/haul/master.svg?style=flat-square
[build]: https://circleci.com/gh/callstack/haul
[license-badge]: https://img.shields.io/npm/l/@haul-bundler/cli.svg?style=flat-square
[license]: https://github.com/callstack/haul/blob/master/LICENSE
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/callstack/haul/blob/master/CODE_OF_CONDUCT.md
[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square&colorB=758ED3
[chat]: https://discord.gg/zwR2Cdh
[tweet-badge]: https://img.shields.io/badge/tweet-%23haul-blue.svg?style=flat-square&colorB=1DA1F2&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAAXNSR0IArs4c6QAAAaRJREFUOBGtlM8rBGEYx3cWtRHJRaKcuMtBSitxkCQ3LtzkP9iUUu5ODspRHLhRLtq0FxeicEBC2cOivcge%2FMgan3fNM8bbzL4zm6c%2BPT%2Fe7%2FO8887svrFYBWbbtgWzsAt3sAcpqJFxxF1QV8oJFqFPFst5dLWQAT87oTgPB7DtziFRT1EA4yZolsFkhwjGYFRO8Op0KD8HVe7unoB6PRTBZG8IctAmG1xrHcfkQ2B55sfI%2ByGMXSBqV71xZ8CWdxBxN6ThFuECDEAL%2Bc9HIzDYumVZ966GZnX0SzCZvEqTbkaGywkyFE6hKAsBPhFQ18uPUqh2ggJ%2BUor%2F4M%2F%2FzOC8g6YzR1i%2F8g4vvSI%2ByD7FFNjexQrjHd8%2BnjABI3AU4Wl16TuF1qANGll81jsi5qu%2Bw6XIsCn4ijhU5FmCJpkV6BGNw410hfSf6JKBQ%2FUFxHGYBnWnmOwDwYQ%2BwzdHqO75HtiAMJfaC7ph32FSRJCENUhDHsLaJkL%2FX4wMF4%2BwA5bgAcrZE4sr0Cu9Jq9fxyrvBHWbNkMD5CEHWTjjT2m6r5D92jfmbbKJEWuMMAAAAABJRU5ErkJggg%3D%3D
[tweet]: https://twitter.com/intent/tweet?text=Check%20out%20Haul!%20https://github.com/callstack/haul%20%F0%9F%91%8D
[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-paper&utm_term=readme-with-love
[version-cli]: https://img.shields.io/npm/v/@haul-bundler/cli.svg?style=flat-square
[package-cli]: https://www.npmjs.com/package/@haul-bundler/cli
[version-core]: https://img.shields.io/npm/v/@haul-bundler/core.svg?style=flat-square
[package-core]: https://www.npmjs.com/package/@haul-bundler/core
[version-core-legacy]: https://img.shields.io/npm/v/@haul-bundler/core-legacy.svg?style=flat-square
[package-core-legacy]: https://www.npmjs.com/package/@haul-bundler/core-legacy
[version-babel-preset-react-native]: https://img.shields.io/npm/v/@haul-bundler/babel-preset-react-native.svg?style=flat-square
[package-babel-preset-react-native]: https://www.npmjs.com/package/@haul-bundler/babel-preset-react-native
[version-basic-bundle-webpack-plugin]: https://img.shields.io/npm/v/@haul-bundler/basic-bundle-webpack-plugin.svg?style=flat-square
[package-basic-bundle-webpack-plugin]: https://www.npmjs.com/package/@haul-bundler/basic-bundle-webpack-plugin
[version-ram-bundle-webpack-plugin]: https://img.shields.io/npm/v/@haul-bundler/ram-bundle-webpack-plugin.svg?style=flat-square
[package-ram-bundle-webpack-plugin]: https://www.npmjs.com/package/@haul-bundler/ram-bundle-webpack-plugin
[version-preset-0.59]: https://img.shields.io/npm/v/@haul-bundler/preset-0.59.svg?style=flat-square
[package-preset-0.59]: https://www.npmjs.com/package/@haul-bundler/preset-0.59
[version-preset-0.60]: https://img.shields.io/npm/v/@haul-bundler/preset-0.60.svg?style=flat-square
[package-preset-0.60]: https://www.npmjs.com/package/@haul-bundler/preset-0.60
[version-explore]: https://img.shields.io/npm/v/@haul-bundler/explore.svg?style=flat-square
[package-explore]: https://www.npmjs.com/package/@haul-bundler/explore