mirror of https://github.com/status-im/metro.git
Updates from Wed 25 Mar
- [RFC][ReactNative] Integrate dev menu directly into RootView | Alex Kotliarskyi - flowify Libraries/ReactIOS | Marshall Roch - [WIP] Added support for italics and additional font weights | Nick Lockwood - [ReactNative] Improve View documentation | Christopher Chedeau - [react-packager] Readme | Amjad Masad - Fix for incorrect contentSize reported by RCTScrollView | Nick Lockwood - [ReactNative] Flow and doc formatting for NetInfo | Eric Vicenti - [ReactNative] Document AppStateIOS | Eric Vicenti
This commit is contained in:
parent
c086b0c343
commit
8e71fc5362
|
@ -0,0 +1,138 @@
|
|||
React Native Packager
|
||||
--------------------
|
||||
|
||||
React Native Packager is a project similar in scope to browserify or
|
||||
webpack, it provides a CommonJS-like module system, JavaScript
|
||||
compilation (ES6, Flow, JSX), bundling, and asset loading.
|
||||
|
||||
The main difference is the Packager's focus on compilation and
|
||||
bundling speed. We aim for a sub-second edit-reload
|
||||
cycles. Additionally, we don't want users -- with large code bases --
|
||||
to wait more than a few seconds after starting the packager.
|
||||
|
||||
The main deviation from the node module system is the support for our
|
||||
proprietary module format known as `@providesModule`. However, we
|
||||
discourage people to use this module format because going forward, we
|
||||
want to completely separate our infrastructure from React Native and
|
||||
provide an experience most JavaScript developers are familiar with,
|
||||
namely the node module format. We want to even go further, and let you
|
||||
choose your own packager and asset pipeline or even integrate into
|
||||
your existing infrastructure.
|
||||
|
||||
React Native users need not to understand how the packager work,
|
||||
however, this documentation might be useful for advanced users and
|
||||
people who want to fix bugs or add features to the packager (patches
|
||||
welcome!).
|
||||
|
||||
## HTTP interface
|
||||
|
||||
The main way you'd interact with the packager is via the HTTP
|
||||
interface. The following is the list of endpoints and their respective
|
||||
functions.
|
||||
|
||||
### /path/to/moduleName.bundle
|
||||
|
||||
Does the following in order:
|
||||
|
||||
* parse out `path/to/moduleName`
|
||||
* add a `.js` suffix to the path
|
||||
* looks in your project root(s) for the file
|
||||
* recursively collects all the dependencies from an in memory graph
|
||||
* runs the modules through the transformer (might just be cached)
|
||||
* concatenate the modules' content into a bundle
|
||||
* responds to the client with the bundle (and a SourceMap URL)
|
||||
|
||||
### /path/to/moduleName.map
|
||||
|
||||
* if the package has been previously generated via the `.bundle`
|
||||
endpoint then the source map will be generated from that package
|
||||
* if the package has not been previously asked for, this will go
|
||||
through the same steps outlined in the `.bundle` endpoint then
|
||||
generate the source map.
|
||||
|
||||
Note that source map generation currently assumes that the code has
|
||||
been compiled with jstransform, which preserves line and column
|
||||
numbers which allows us to generate source maps super fast.
|
||||
|
||||
### /path/to/moduleName.(map|bundle) query params
|
||||
|
||||
You can pass options for the bundle creation through the query params,
|
||||
if the option is boolean `1/0` or `true/false` is accepted.
|
||||
|
||||
Here are the current options the packager accepts:
|
||||
|
||||
* `dev` boolean, defaults to true: sets a global `__DEV__` variable
|
||||
which will effect how the React Nativeg core libraries behave.
|
||||
* `minify` boolean, defaults to false: whether to minify the bundle.
|
||||
* `runModule` boolean, defaults to true: whether to require your entry
|
||||
point module. So if you requested `moduleName`, this option will add
|
||||
a `require('moduleName')` the end of your bundle.
|
||||
* `inlineSourceMap` boolean, defaults to false: whether to inline
|
||||
source maps.
|
||||
|
||||
### /debug
|
||||
|
||||
This is a page used for debugging, it has links to two pages:
|
||||
|
||||
* Cached Packages: which shows you the packages that's been already
|
||||
generated and cached
|
||||
* Dependency Graph: is the in-memory graph of all the modules and
|
||||
their dependencies
|
||||
|
||||
## Programmatic API
|
||||
|
||||
The packager is made of two things:
|
||||
|
||||
* The core packager (which we're calling ReactPackager)
|
||||
* The scripts, devtools launcher, server run etc.
|
||||
|
||||
ReactPackager is how you mainly interact with the API.
|
||||
|
||||
```js
|
||||
var ReactPackager = require('./react-packager');
|
||||
```
|
||||
|
||||
### ReactPackager.middleware(options)
|
||||
|
||||
Returns a function that can be used in a connect-like
|
||||
middleware. Takes the following options:
|
||||
|
||||
* `projectRoots` array (required): Is the roots where your JavaScript
|
||||
file will exist
|
||||
* `blacklistRE` regexp: Is a patter to ignore certain paths from the
|
||||
packager
|
||||
* `polyfillModuleName` array: Paths to polyfills you want to be
|
||||
included at the start of the bundle
|
||||
* `cacheVersion` string: used in creating the cache file
|
||||
* `resetCache` boolean, defaults to false: whether to use the cache on
|
||||
disk
|
||||
* `transformModulePath` string: Path to the module used as a
|
||||
JavaScript transformer
|
||||
* `nonPersistent` boolean, defaults to false: Whether the server
|
||||
should be used as a persistent deamon to watch files and update
|
||||
itself
|
||||
* `assetRoots` array: Where should the packager look for assets
|
||||
|
||||
### ReactPackager.buildPackageFromUrl(options, url)
|
||||
|
||||
Build a package from a url (see the `.bundle` endpoint). `options` is
|
||||
the same options that is passed to `ReactPackager.middleware`
|
||||
|
||||
### ReactPackager.getDependencies(options, main)
|
||||
|
||||
Given an entry point module. Recursively collect all the dependent
|
||||
modules and return it as an array. `options` is the same options that
|
||||
is passed to `ReactPackager.middleware`
|
||||
|
||||
## FAQ
|
||||
|
||||
### Can I use this in my own non-React Native project?
|
||||
|
||||
Yes. It's not really tied to React Native, however feature development
|
||||
is informed by React Native needs.
|
||||
|
||||
### Why didn't you use webpack?
|
||||
|
||||
We love webpack, however, when we tried on our codebase it was slower
|
||||
than our developers would like it to be. You find can more discussion about
|
||||
the subject [here](https://github.com/facebook/react-native/issues/5)
|
Loading…
Reference in New Issue