React Native 之 main.jsbundle生成方法

通过react-native init yooweiProject 生成的RN项目（版本基于0.57），目录结构如下

项目结构：

大家可以发现main.jsbundle 是红色的，不存在的，这个属于正常现象。

运行项目，本以为应该没有问题的，但是：

打印的日志：

2018-09-30 15:21:21.194392+0800 yooweiProject[11164:1789544] Unhandled JS Exception: Application yooweiProject has not been registered.

Hint: This error often happens when you're running the packager (local dev server) from a wrong folder. For example you have multiple apps and the packager is still running for the app you were working on before.

If this is the case, simply kill the old packager instance (e.g. close the packager terminal window) and start the packager in the correct app folder (e.g. cd into app folder and run 'npm start').

This error can also happen due to a require() error during initialization or failure to call AppRegistry.registerComponent.

突然间意识到，本地的RN服务还在刚才的那个yooweiRN项目哪里。果断结束刚才的服务（control+c）

切换到yooweiProject项目根目录

$ cd /Users/galahad/Desktop/ziliao/RN0.57/yooweiProject

$ pwd

/Users/galahad/Desktop/ziliao/RN0.57/yooweiProject

然后开启本地服务

$ react-native start

运行正常

代码如下：

但是main.jsbundle 是红色的，不存在的，虽说属于正常现象，但是我们可以尝试生成。

1、切换到yooweiProject项目根目录，并执行 npm start

$ cd /Users/galahad/Desktop/ziliao/RN0.57/yooweiProject

$ npm start

注意：如果终端已经开启过一个窗口，并且已经运行过该命令npm start（或者是模拟器上面运行RN，已经开启了本地服务），将终端再开启一个窗口，执行 npm start ，会出现下面的问题：

ERR! code ELIFECYCLE

errno 1

ERR! yooweiProject@0.0.1 start: `node node_modules/react-native/local-cli/cli.js start`

ERR! Exit status 1

npm

ERR! Failed at the yooweiProject@0.0.1 start script.

ERR! This is probably not a problem with npm. There is likely additional logging output above.

ERR! A complete log of this run can be found in:

ERR! /Users/galahad/.npm/_logs/2018-10-10T01_55_04_103Z-debug.log

解决方案就是关掉一个终端的窗口即可。

2、使用curl命令生成 main.jsbundle

由于终端窗口正在连接本地服务，没有办法执行新的命令。我们选中 “终端”图标，右击“新建窗口”完美解决

curl http://localhost:8081/index.ios.bundle -o main.jsbundle

不出意外的出现错误：

error: bundling failed: Error: The resource `/Users/galahad/Desktop/ziliao/RN0.57/yooweiProject/index.ios.js` was not found.

又是 index.ios.js 入口文件名称不同惹的祸，修改命令

curl http://localhost:8081/index.bundle -o main.jsbundle

执行正常，该项目根目录下生成了文件main.jsbundle

注意：上面的这个命令最后用下面的格式

curl http://当前电脑可用的网络ip地址，注意不要写localhost,因为可能取到的ip不是本地有效的ip地址:8081/index.bundle -o main.jsbundle

3、将生成的jsbundle文件导入到当前的项目中

4、在AppDelegate.m中选择使用main.jsbundle注释掉

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

打开注释：

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

但是这种方式进行的总是会报错：

暂时没有解决，还需尝试解决问题！

巴特西

React Native 之 main.jsbundle生成方法

最新文章

热门文章