使用CodePush熱更新ReactNative JS程式碼

糾結了半天，不知要不要用ReactNative來開發新專案，

例如本地儲存，例如webView 裡面js 與native 的互動，例如地圖，糾結。。。

通過檢視文件，一一得到答案，還是很想用ReactNative做這個專案。

最吸引我的就是傳說中的熱更新。但是，，具體是怎麼樣才能熱更新啊，

看了大部分翻譯文件，沒說這回事啊。。。

貌似只是在開發時候，用直接連本地伺服器，可以直接reload，

難道上線後，也是直接連伺服器來拿js ？不會吧？？？

那app 不能聯機的時候呢？

後來看了文件，原來是打包時候可以打成一個bundle包，

我擦咧，那怎麼更新釐米的包？沒看到，那不是跟原生一樣，要通過這個app store進行更新？

要不就是我自己來，在AppDelegate裡面判斷，是否需要更新，是就下載新的bundle包，下完畢，再load這個bundle給使用者使用。

嗯，好吧，也就這優點？

剛好看了文章說他們的經驗：

http://bbs.react-china.org/t/react-native/3169

最近1個月完成了一個RN的專案，這裡記錄一下，以備後面的總結
專案內容
1. 登入
2. 根據剪貼簿的內容查詢資料
3. 顯示查詢後的資料，並對這個資料進行一些處理

平臺支援
iOS和Android
iOS已經上架2版

開發方式和架構內容
1. 使用Git作為版本管理
2. 使用Atom作為開發工具，XCode輔助，沒有用Android Studio
3. 使用

CodePush69作為js package的升級工具
4. 使用Redux作為React的資料框架
5. 使用Stackoverflow和React的issue list作為主要的知識查詢
6. 開發了一些自己使用的Android的外掛，因為Android不支援Onresume事件，所以自己寫了外掛，後面會open出來
7. 主要使用ios做開發，然後Android適配
8. 使用了自定義字型作為圖示，進入了ttf檔案
9. 使用eslint做js的靜態檢查

總結
1. ios還是比較穩定並且功能也比較全
2. Android的坑是有不少，比如：不支援Shadow，還有對absolute的佈局支援的也不夠好
3. Android的事件支援的不好，很多事件還沒有支援
4. Android的效能好像也不是很好，但是，也能湊合用
5. Android的原生控制元件封裝的不好
6. 如果希望程式碼複用高，最好讓iOS和Android儘量保持樣式的一致
7.

這篇文章對我在Mac上除錯Android有很大幫助69

使用到的第三方庫
1. Redux
2. Redux-react
3. ImmutableJS
4. moment
5. React-native 0.14.1
6. react-native-android-statusbar
7. react-native-clipboard ，因為owner很久不維護，我做了一些修改，後面會open出來
8. react-native-code-push
9. react-native-device
10. react-native-icons
11. react-native-keyboard-spacer
12. react-native-navbar"
13. react-native-simpledialog-android
14. redux-thunk

我擦咧，我只看到一句，就跟一見鍾情似的：3. 使用CodePush69作為js package的升級工具

我就查資料去了，沒有，，沒人有教程給我，，，擦咧

好吧，老老實實看官方英文文件，祈求能用，不要浪費一天時間。

下面是我的安裝經驗：忙亂，因為每一步都有點心驚，怕出錯，不知如何修復。

CodePush v1.40 安裝使用

1，開vpn，在專案根目錄輸入：

npm install react-native-code-push -/-save //去掉-/-中的/

引數 —-save 在安裝的同時，把資訊寫入package.json 檔案的專案路徑

如果npm 執行不了，因為網路原因，請使用cnpm 來代替

2，安裝完畢，檢查

a. package.json 文件加入了

"dependencies": {

"react-native": "^0.16.0",

"react-native-code-push": "^1.4.2-beta"

}

b. node_modules 下有 react-native-code-push 資料夾，裡面有 CodePush.xcodeproj 這個檔案，因為後面要加入到當前的專案中去

3，用Xcode 開啟專案，點開Libraries 目錄，

開啟專案根目錄下的 /node_modules/react-native-code-push ，把檔案 CodePush.xcodeproj 拉入上面的Libraries 目錄下作為依賴專案

開啟 Xcode的專案－》target －》Build Phase －》 Link Binary With Libraries

把剛才拖進去的子專案CodePush.xcodeproj 點開，找到Products 目錄，把紅色的libCodePush.a拉進去

4，點選 Link Binary With Libraries 下面的加號，查詢 libz ，選中iOS 9.1 下面的 libz.tbd

5，選擇上面的標題為 Build Setings 查詢Header Search Path，雙擊值，彈出列表介面，

點選加號，輸入 $(SRCROOT)/../node_modules/react-native-code-push

選擇後面的 recursive 選項

6，開啟 AppDelegate.m ,

新增 #import “CodePush.h”

找到：

// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

jsCodeLocation = [CodePush bundleURL];

7，接下來是安裝 code-push 伺服器端

先看官網：https://github.com/Microsoft/code-push

看了半天，tmd要我安裝 gulp，下載git原始碼，再編譯，，，嚇傻了我，，，這不是我想要的生活

再用cnam search code-push 出來一個網頁，第二行是 code-push-cli ，

好吧，安裝 react-native-cli 有經驗，嗯嗯，這個也類似吧。

還是仔細看了淘寶映象的網頁英文介紹，https://npm.taobao.org/package/code-push-cli#account-creation，原來是出自官網的cli資料夾裡，https://github.com/Microsoft/code-push/tree/master/cli，

還好沒有去編譯，臣妾不熟啊，

確定下面是有code-push 伺服器配置appName的事情，

才斗膽安裝了這個，看下面的結果

MacdeiMac:~ mac$ cnpm install -g code-push-cli

WARN engine [email protected]: wanted: {"node":"0.x"} (current: {"node":"5.1.0","npm":"2.14.12"})

/Users/mac/.nvm/versions/node/v5.1.0/bin/code-push -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/code-push-cli/script/cli.js

[email protected] /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/code-push-cli

├── [email protected]

├── [email protected] ([email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

└── [email protected] ([email protected], [email protected])

試試看版本，貌似最新的哦

MacdeiMac:~ mac$ code-push -v

1.3.0-beta

8，根據英文指引，註冊Code-Push帳號

終端輸入 code-push register

彈出網頁 https://codepush.azurewebsites.net/auth/register?hostname=MacdeiMac.local

看最後，貌似是我本機的機器名字，看終端

MacdeiMac:~ mac$

我輸入了gitHub的帳號，一開始我以為我沒有，進去後發覺有哦，

原來是[email protected] ，好吧，剛好也是為這個建立的，就用這個吧，反正後面可以log out

允許了許可權之後，幫我註冊了一個帳號，得到了token

MacdeiMac:~ mac$ code-push register

A browser is being launched to authenticate your account. Follow the instructions it displays to complete your registration.

Enter your access token: 這個要保密哦

eyxxxxxxxJ9

Successfully logged-in. Your session token was written to /Users/mac/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

9，使用code-push 伺服器

登陸 code-push login

登出 code-push logout

列出登陸的token

code-push access-key ls

刪除某個access-key

code-push access-key rm <accessKey>

其他功能暫時不想去試試，

MacdeiMac:~ mac$ code-push access-key ls

┌───────────────────────────────────────┬───────────────┬─────────────────┬─────────────┐

│ Key │ Time Created │ Created From │ Description │

├───────────────────────────────────────┼───────────────┼─────────────────┼─────────────┤

│ xmYxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxVBl │ 6 minutes ago │ MacdeiMac.local │ Login │

└───────────────────────────────────────┴───────────────┴─────────────────┴─────────────┘

10，接下來是弄我們的app了，終於等到了

增加一個app進行管理

MacdeiMac:~ mac$ code-push app ls

┌──────┬─────────────┐

│ Name │ Deployments │

└──────┴─────────────┘

MacdeiMac:~ mac$ code-push app add SwitchCheck

Successfully added the "SwitchCheck" app, along with the following default deployments:

到了這裡一直不出來，不知何事

強行ctrl c 出來，再看看列表

MacdeiMac:~ mac$ code-push app ls

[Error] connect ETIMEDOUT 23.101.203.117:443

好的，出問題了，估計網路問題，用vpn 繼續

MacdeiMac:~ mac$ code-push app ls

┌─────────────┬─────────────────────┐

│ Name │ Deployments │

├─────────────┼─────────────────────┤

│ SwitchCheck │ Production, Staging │

└─────────────┴─────────────────────┘

弄好了麼？不知道，沒底，看英文內容All new apps automatically come with two deployments (Staging and Production) so that you can begin distributing updates to multiple channels without needing to do anything extra (see deployment instructions below).

貌似ok

有命令：更名 code-push app rename 舊名字新名字

刪除 code-push app rm 舊名字

11，部署管理

上面的部署型別 Production Staging，還可以自己加例如dev alpha beta等，

用語法 code-push deployment add app名字部署名字

還可以重新命名部署名字： code-push deployment rename app名字舊部署名字新部署名字

刪除部署名字 code-push deployment rm app名字部署名字

列表部署名字 code-push deployment ls app名字

MacdeiMac:~ mac$ code-push deployment ls SwitchCheck

┌────────────┬───────────────────────────────────────┬──────────────────┐

│ Name │ Deployment Key │ Package Metadata │

├────────────┼───────────────────────────────────────┼──────────────────┤

│ Production │ edxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxBl │ │

│ Staging │ INxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxVBl │ │

└────────────┴───────────────────────────────────────┴──────────────────┘

到了這裡，應該回應在Xcode裡info.plist裡新增的CodePushDeploymentKey 的值，拷貝 Staging 的 key值 INcoNHeF7fVcSs4ZJNupzGJzYh49EyLxu0VBl到那裡去，

再確保 Bundle Version String， short 這一行的值是 1.0.0 而不是 1.0

Android 的我沒有嘗試，內容如下：

Android Setup

In order to integrate CodePush into your Android project, perform the following steps:

Plugin Installation (Android)

In your android/settings.gradle file, make the following additions:
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir =newFile(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
In your android/app/build.gradle file, add the :react-native-code-push project as a compile-time dependency:
...
dependencies {
...
compile project(':react-native-code-push')
}

Plugin Configuration (Android)

After installing the plugin and syncing your Android Studio project with Gradle, you need to configure your app to consult CodePush for the location of your JS bundle, since it will "take control" of managing the current and all future versions. To do this, perform the following steps:

Update the MainActivity.java file to use CodePush via the following changes:
...
// 1. Import the plugin class
import com.microsoft.codepush.react.CodePush;
// 2. Optional: extend FragmentActivity if you intend to show a dialog prompting users about updates.
// If you do this, make sure to also add "import android.support.v4.app.FragmentActivity" below #1.
publicclass MainActivityextendsFragmentActivityimplementsDefaultHardwareBackBtnHandler {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
...
// 3. Initialize CodePush with your deployment key and an instance of your MainActivity.
CodePush codePush = new CodePush("d73bf5d8-4fbd-4e55-a837-accd328a21ba", this);
...
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
...
// 4. DELETE THIS LINE --> .setBundleAssetName("index.android.bundle")
// 5. Let CodePush determine which location to load the most updated bundle from.
// If there is no updated bundle from CodePush, the location will be the assets
// folder with the name of the bundle passed in, e.g. index.android.bundle
.setJSBundleFile(codePush.getBundleUrl("index.android.bundle"))
// 6. Expose the CodePush module to JavaScript.
.addPackage(codePush.getReactPackage())
...
}
}
Ensure that the android.defaultConfig.versionName property in your android/app/build.gradle file is set to a semver compliant value (i.e. "1.0.0" not "1.0")
android {
...
defaultConfig {
...
versionName "1.0.0"
...
}
...
}

12，xcode裡使用外掛

12.1 ，實現更新策略，

a，多久多頻繁去check 更新，例如app 啟動時，還是在setting 頁面點選更新，或定時去更新

b，當一個更新出現，如何向用戶展現

在javascript 檔案里加入

var CodePush = require(“react-native-code-push”);

componentDidMount函式里加入 CodePush.sync(updateDialog: { title: "An update is available!" } });

如果有更新，將會被悄悄下載，在使用者或系統重啟app後，就會安裝為新的

儘量不要表現得太invasive 強制性的更新

如果你想詢問使用者是否更新，或更好的體驗，請使用sync 函式的提取資訊，去更改預設的更新行為

12.2，只更新 js 檔案，不更新圖片等資源

a，到專案根目錄，我自己新建一個資料夾，不是必須的，只是為了好打理，終端輸入：

MacdeiMac:6-SwitchCheck mac$ mkdir bundles

MacdeiMac:6-SwitchCheck mac$ react-native bundle --parameter ios --entry-file index.ios.js --bundle-output ./bundles/SwitchCheck010000.js

bundle: Created ReactPackager

bundle: start

bundle: finish

bundle: Writing bundle output to: ./bundles/SwitchCheck010000.js

bundle: Done writing bundle output

bundle: Closing client

Assets destination folder is not set, skipping...

只更新js 檔案，不需要通過Xcode 和 gradlew assemble 。用codePush 就夠了

code-push release SwitchCheck ./bundles/SwitchCheck010000.js 1.0.0

這裡用的是一個js檔案就行了，下面帶有圖片等，則要用下面的語句，差別在於release 整個資料夾

12.3，更新 js 檔案，和react-native打包的圖片（不包括網路圖片和images.xcassets），請使用下面的方法

同上面差不多，但你需要加上圖片目錄，-/-assets-dest ./bundles

確保資料夾 bundles 裡面沒有任何檔案

react-native bundle --parameter ios --entry-file index.ios.js --bundle-output ./bundles/SwitchCheck010000.js --assets-dest ./bundles

bundle: Created ReactPackager

bundle: start

bundle: finish

bundle: Writing bundle output to: ./bundles/SwitchCheck010000.js

bundle: Done writing bundle output

bundle: Closing client

剛開始沒有圖片，所以只看到一個js檔案，可能初創專案，沒有圖片

好了，用codePush命令

code-push release SwitchCheck ./bundles 1.0.0

那個code－push－cli工具會幫你打包送上去的

看上去似乎就是打包，然後release，文件上說無論release多少次，終端使用者只會更新到他需要的檔案，很智慧是不是？

13，目前為止還沒有指定要push的專案資料夾，心裡疑惑

看到釋出版本命令是

cide-push release appName package引數 appStoreVersion引數 [-/-deploymentName 部署名字] [-/-description 描述] [-/-mandatory true/false]

mandatory 的意思是強制的，－／－要去掉斜槓，因為編輯器自動把兩個短橫線變成了一個長橫線，

不要執行，因為還沒有package引數和 appStoreVersion引數，看下面，就跟專案資料夾有關了

13.1 解釋 package引數

cd命令去到專案根目錄下，根據ios 和 android不同，使用不同的命令，看上面，

React Native (Android)	react-native bundle --platform android --entry-file <entryFile> --bundle-output <bundleOutput>	Value of the --bundle-output option
React Native (iOS)	react-native bundle --platform ios --entry-file <entryFile> --bundle-output <bundleOutput>	Value of the --bundle-output option

13.2，解釋appStoreVersion引數

沒看懂，，不過貌似要求1.0.0 這個格式，後來就在這裡出問題了，導致我半夜12:19分還在查詢這個問題，請看上傳了之後的解決問題的描述，所以，英文不熟，害死人啊

This specifies the semver compliant store/binary version of the application you are releasing the update for. Only users running this exact version will receive the update. This is important if your JavaScript/etc. takes a dependency on a new capabilitiy of the native side of your app (e.g. a Cordova plugin), and therefore, requires the user to update to the latest version from the app store before being able to get it.

The following table outlines the value that CodePush expects you to provide for each respective app type:

Platform

Source of app store version

Cordova

The

使用CodePush熱更新ReactNative JS程式碼

使用CodePush熱更新ReactNative JS程式碼

CodePush 熱更新ReactNative之CodePush CLI操作

ReactNative系列之十八codepush熱更新

CodePush熱更新組件詳細接入教程

CodePush熱更新切換本地與微軟服務

Ios熱更新，實時程式碼更新，動態更新，動態庫framework

iOS 熱更新，實時程式碼更新，動態更新，動態庫framework

CodePush熱更新雲服務在Cordova專案中的應用實踐

codepush熱更新

ReactNative基於CodePush實現熱更新整合詳解

Node.Js的熱更新服務——supervisor

React Native熱更新（CodePush使用）

ionic4.0 詳細熱更新自動模式以及手動模式--秒殺網上一切熱更新因為網上沒有手動更新的詳細程式碼測試無誤上線釋出了的東西.

Unity 伺服器踩坑 Node.js 與 Express 資源熱更新與檔案傳輸（三）

nodeJs 程式碼熱更新

前端面試--js程式碼片段（基礎中的基礎，持續更新中）

(一)、JS 程式碼轉換-Babel (持續學習更新ing……)

cocos2d-js熱更新

利用CodePush對react-native專案熱更新(以android為例)

skynet 熱更新 lua 程式碼

使用CodePush熱更新ReactNative JS程式碼

相關推薦