1. 程式人生 > >React Native bundle 打包、拆包工具之moles-packer

React Native bundle 打包、拆包工具之moles-packer

oles-packer 是由攜程框架團隊研發的,與攜程moles框架配套使用的React Native 打包和拆包工具,同時支援原生的 React Native 專案。

安裝

從npm倉庫中安裝

npm install -g moles-packer

獲取幫助資訊

moles-packer --help

使用

在React Native專案根目錄下執行命令

moles-packer

--input /path/to/project

--entry index.ios.js

--output /path/to/build

--bundle bu.bundle

--common true

引數說明:

input:專案目錄(預設為當前目錄)

entry:入口檔名稱(預設為 index.js)

output:輸出目錄(預設為 ./build 目錄)

bundle:預設輸出檔名稱與入口檔案同名,也可指定檔名

common:是否打common包(預設為false)

Demo執行

以iOS為例

1、git clone [email protected]:ctrip-moles/moles-packer.git

2、cd moles-packer/demo/AwesomeProject

3、npm install

4、moles-packer

--input ./ --entry index.ios.js

--output ./build

--bundle bu.jsbundle

--common true

執行完上述命令後,會看到在根目錄下生成一個build資料夾,且裡面有bu.jsbundle和common.jsbundle兩個檔案

5、將build目錄新增到專案中

6、執行react-native run-ios

已完成功能

1、支援react、react-native打成common.jsbundle

2、支援除react、react-native以外的業務程式碼打成bu.jsbundle

待完成功能

1、common bundle的生成可配置

2、業務模組拆成多個bundle模組

3、iOS支援load和merge拆包模組提供

4、Android支援load和merge拆包模組提供



文/CtripMoles(簡書作者)
原文連結:http://www.jianshu.com/p/6e4fc17de66d
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。

相關推薦

React Native bundle 打包工具moles-packer

oles-packer 是由攜程框架團隊研發的,與攜程moles框架配套使用的React Native 打包和拆包工具,同時支援原生的 React Native 專案。 安裝 從npm倉庫中安裝 npm install -g moles-packer 獲取幫助資訊 m

python的函式——進階(打包不定長引數預設引數)

整體: 1. 函式的返回值的打包與拆包 2. 為函式的引數設定預設值 3. 函式引數的打包與拆包 ----函式返回值的打包 def 函式名(引數列表): 函式體執行內容 return 返回值1,返回值2,返回值3,... 此時呼叫函式時,變數 = 函式名(傳參),變數

3netty粘(二)

list ride int 簡化 iter getclass null message som 上篇博客留了個尾巴“而且LineBasedFrameDecoder據說還有一種不要求攜帶結束符的解碼方式”,今天就從源碼來看看是怎麽回事。 一、基本原理 如果沒有netty,

tcp粘

傳輸 packet ima .cn bsp log src blog 一次 粘包、拆包發生原因:發生TCP粘包或拆包有很多原因,現列出常見的幾點,可能不全面,歡迎補充,1、要發送的數據大於TCP發送緩沖區剩余空間大小,將會發生拆包。2、待發送數據大於MSS(最大報文長度),

react-native android打包

ima lan fault inf ble 當前 div release size 步驟 1.生成密鑰 2.修改android/app/build.gradle 文件 3.修改android/gradle.properties 4.cd android &&am

React-native APK打包

blog 工具 nat 調用 class gen android 完成後 代碼 安卓相關工具配置到環境變量,這樣可以將安卓相關工具可以直接在cmd命令中調用 1 檢查gradle版本 查看裏面對應的編譯工具版本號,如果提示版本不對你,那麽直接去更新a

監控io性能freeps命令及netstat命令工具tcpdump,tshark

20180507一、監控io性能iostat -x 關註%utiliotop 查看哪一個進程在進行讀寫 二、free命令(查看內存使用)-m -h-gbuff 緩沖(cpu處理完的數據 > 內存 (buff)> 磁盤)cache 緩存(磁盤 >內存(cache) >cpu處理數據)公

3.Netty的粘(二)

length coder 解碼器 generate trac main med con ++ Netty提供的TCP數據拆包、粘包解決方案 1.前言 關於TCP的數據拆包、粘包的介紹,我在上一篇文章裏面已經有過介紹。 想要了解一下的,請點擊這裏 Chick Here! 今天

C#.網路程式設計 Tcp基礎(二) TCP組的原理

一、TCP粘包,拆包及解決方法    轉https://blog.csdn.net/scythe666/article/details/51996268 以下是轉發的部分內容          我們都知道TCP屬於傳

React Native Android打包出現的問題

一、./gradlew installRelease 出現 * What went wrong: Execution failed for task ':app:bundleReleaseJsAndAssets'. > 'command 'node'' finished wit

TCP粘與通訊協議

在TCP程式設計中,通常Sever端與Client通訊時的訊息都有著固定的訊息格式,稱之為協議(protocol),例如FTP協議、Telnet協議等,有的公司也會自己開發協議。 那麼協議到底是幹什麼的呢?說白了,協議了就是定義了資料通訊的格式。主要是為了解決

iOS原生OC向React Native傳送訊息事件通知

RCTEventEmitter 此篇僅獻給剛剛入門的同志們。 大家在使用React Native的時候,都會比較關心原生和React Native的互動問題。React Native給原生髮送訊息,在中文官網上講得也比較明白,按照上面的例子,相信大家都可以實現出來。但是在原生給React Native傳送

React Native 結合ScrollableTabRefreshControl和FlatList實現新聞分類列表

正好剛開始學RN,熟悉一下控制元件和基本使用。 涉及的知識點: 1、fetch網路請求,get 拼接引數,解析json。 2、ScrollableTabView、ScrollableTabBar 分類佈局。 3、FlatList 資料列表。 4、Navigation

2.Netty的粘(一)

Netty粘包、拆包 1.什麼是拆包、粘包 (1)拆包、粘包介紹 TCP是個“流”協議,所謂流,就是沒有界限的一串資料。大家可以想想河裡的流水,是連成一片的,其間並沒有分界線。TCP底層並不瞭解上層業務資料的具體含義,它會根據TCP緩衝區的實際情況進行包的劃分,所以在業務上認為,一個完整的包可能會被TCP拆

React Native中positionflexbox佈局

向春哥致敬!原文地址: http://www.52learn.wang/archives/1231 1.flex flex鍵的型別是數值,取值為0或者大於0的整數,預設值為0。當它的值為1時且子元件只有自己時,子元件將自動縮放以適應父元件剩下的所有空白空間

react native Navigator 隱藏自定義

直奔主題:在使用React Native Navigator的時候,很多同學跟我一樣,上來就用,但是用了發現一個問題,那就是如下圖: 看到此處 登入的文字,為毛android上就要跑偏了,當然畢竟使系統的問題,但是對於我們要求必須在中間的怎麼辦,我還想在n

React-Native 編譯打包遇到的坑

費盡千辛萬苦終於把RN的東西整合到自己的專案裡去,打算打包上線,但是在使用gradle打包的過程中,碰到各種奇葩問題,明明自己的操作都是按著官網操作(React-Native專案打包),但是還是出現問題

推薦一些socket工具,TCPUDP除錯工具

 還記得我在很久很久以前和大家推薦的Fiddler和Charles debugger麼?他們都是HTTP的神器級除錯工具,非常非常的好用。好工具能讓你事半功倍,基本上,我是屬於徹頭徹尾的工具控。   假如有一天,你寫“傳統”的PHP有些累了,想玩玩socket了,搞搞p

React Native 程式碼智慧提醒WebStorm開發工具

       在做React Native開發時,最常用的開發工具有 webStorm ,sublime ,appcode等,很多人都希望開發工具有智慧提醒功能,然而我們使用上述開發工具進行React

發生原因滑動窗口MSS/MTU限制Nagle算法

情況下 粘包 多次 設置 無法 以太網幀 fin tps targe 【TCP協議】(3)---TCP粘包黏包 有關TCP協議之前寫過兩篇博客: 1、【TCP協議】(1)---TCP協議詳解 2、【TCP協議】(2)---TCP三次握手和四