GithubHelp home page GithubHelp logo

mfoonirlee / metro-bundler-cli Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tsyeyuanfeng/metro-bundler-cli

0.0 2.0 0.0 556 KB

A command line tool of metro bundler

License: MIT License

JavaScript 63.13% Java 0.25% Kotlin 0.18% HTML 36.26% Batchfile 0.08% Shell 0.10%

metro-bundler-cli's Introduction

metro-bundler-cli

metro-bundler-cli is a command line tool to bundle react native project. This project is created mainly for bundle splitting. There is another similar project rn-packger, but it uses module name as module id, which is not stable enough and not unique enough across projects. Moreover, bundles generated using rn-packager under DEV mode are not able to run. So I made this tool to provide better bundle experience.

FEATURE

  • More stable and more unique module id
    Official metro-bundler uses incremental number as module id, which has some defects when splitting bundle. You can refer to this issue [Discuss]Problems about unstable numeric module ID. for more details. rn-packger made some improvements over module id creator. It uses module name which will downgrade to a relative path included project name when no module name is provided as module id, but project name is also unstable enough, for developers may rename a repo when cloning it to local. Two different projects may also have the same name, which is likely to case module conflicts. metro-bundler-cli uses hash of local path and module content as module id, which is more stable and more unique. Project name won't affect module id. Even two modules of two different projects have the some path, they will have different id as they have different content. By the way, stable module id is just an alternative and is not default. You must set use-stable-id flag to be true when you want to use stable id.

  • Support bundle splitting
    You can split your bundle into base bundle and business bundle with 'metro-bundler-cli'. React native base bundle is stable and it's size is much bigger than business bundle usually. Splitting bundle into base bundle and business bundle is benefit of reducing business bundle downloading time and accelerating business bundle loading time.

INSTALLATION

Install with npm globally:

npm install --global metro-bundler-cli

or as a dependency for your project:

npm install --save metro-bundler-cli

USAGE

metro-bundler-cli extends the officail bundle command line tool rather than change it, so you can bundle as usual with metro-bundler-cli.

metro-bundler bundle  \
--entry-file index.js  \
--bundle-output dist/business.jsbundle  \
--assets-dest dist \
--platform ios  \
--dev false

metro-bundler-cli exposes three more options.

  • use-stable-id: If true, use stable module id;
  • manifest-output: Manifest file path, if set, modules' information will be output to it;
  • exclude: Manifest file path, if set, modules in this file will be excluded from bundle.

Generate base bundle

metro-bundler bundle \
--entry-file base.js  \
--bundle-output dist/base.jsbundle  \
--assets-dest dist \
--manifest-output dist/base.manifest.json  \
--platform ios  \
--dev false  \
--use-stable-id true

Generate business bundle

metro-bundler bundle  \
--entry-file index.js  \
--bundle-output dist/business.jsbundle  \
--manifest-output dist/business.manifest.json  \
--assets-dest dist \
--exclude dist/base.manifest.json   \
--platform ios  \
--dev false  \
--use-stable-id true

metro-bundler-cli's People

Contributors

mfoonirlee avatar tsyeyuanfeng avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.