react-native-web将RN项目转为web app

Posted 2023-05-16

参考技术A 对于webpack的基础知识，可先参考： https://www.jianshu.com/p/229ada907eaa

https://github.com/zrfzhouruifeng163/RNWebAppDemo.git

使用vscode 打开项目，然后依次执行命令：

最终浏览器会打开一个页面，如下：

表示成功。

根目录建立web文件夹，web下建立webpack.config.js, .babelrc 和public目录，
public目录下建立index.html。

然后执行命令： npm install.
建议不要对其中的版本做修改，以免运行不正常。

注意src="main.bundle.js",要与webpack.config.js中output属性的名字一样，表示该index引用的是那个生成的文件。

web版本的入口文件

其中的App：

如何将react-native-web应用程序部署到heroku？

我正在尝试在我的大学项目中使用react-native-web。

我已经按照步骤here成功创建了一个开发版本的react-native-web应用程序。我想将我的应用程序部署到Heroku上，在搜索了很多问题之后，我仍然无法在Heroku上运行我的应用程序。它在启动后60秒后总是崩溃。

2018-02-24T19:19:44.376383+00:00 heroku[web.1]: Starting process with command `./node_modules/.bin/webpack-dev-server --inline --port 28330`
2018-02-24T19:19:49.667640+00:00 app[web.1]: Project is running at [1m[34mhttp://localhost:28330/[39m[22m
2018-02-24T19:19:49.668544+00:00 app[web.1]: webpack output is served from [1m[34m/[39m[22m
2018-02-24T19:20:02.082843+00:00 app[web.1]: Hash: [1m070ba25084e72482b7f3[39m[22m
2018-02-24T19:20:02.082868+00:00 app[web.1]: Version: webpack [1m3.11.0[39m[22m
2018-02-24T19:20:02.082871+00:00 app[web.1]: Time: [1m11923[39m[22mms
2018-02-24T19:20:02.082873+00:00 app[web.1]:     [1mAsset[39m[22m     [1mSize[39m[22m  [1mChunks[39m[22m  [1m[39m[22m           [1m[39m[22m       [1mChunk Names[39m[22m
2018-02-24T19:20:02.082874+00:00 app[web.1]: [1m[33mbundle.js[39m[22m  [1m[33m2.35 MB[39m[22m       [1m0[39m[22m  [1m[32m[emitted][39m[22m  [1m[33m[big][39m[22m  main
2018-02-24T19:20:02.082877+00:00 app[web.1]:    [2] [1m./node_modules/react/index.js[39m[22m 190 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082878+00:00 app[web.1]:   [65] [1m./node_modules/react-native-web/dist/index.js[39m[22m 12.9 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082880+00:00 app[web.1]:  [122] [1mmulti (webpack)-dev-server/client?http://localhost:28330 ./index.web.js[39m[22m 40 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082882+00:00 app[web.1]:  [123] [1m(webpack)-dev-server/client?http://localhost:28330[39m[22m 7.91 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082884+00:00 app[web.1]:  [124] [1m./node_modules/url/url.js[39m[22m 23.3 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082885+00:00 app[web.1]:  [131] [1m./node_modules/strip-ansi/index.js[39m[22m 161 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082887+00:00 app[web.1]:  [133] [1m./node_modules/loglevel/lib/loglevel.js[39m[22m 7.86 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082889+00:00 app[web.1]:  [134] [1m(webpack)-dev-server/client/socket.js[39m[22m 1.08 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082890+00:00 app[web.1]:  [136] [1m(webpack)-dev-server/client/overlay.js[39m[22m 3.67 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082892+00:00 app[web.1]:  [141] [1m(webpack)/hot nonrecursive ^./log$[39m[22m 170 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082893+00:00 app[web.1]:  [143] [1m(webpack)/hot/emitter.js[39m[22m 77 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082895+00:00 app[web.1]:  [145] [1m./index.web.js[39m[22m 380 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082897+00:00 app[web.1]:  [243] [1m./node_modules/react-native-web/dist/exports/Vibration/index.js[39m[22m 796 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082899+00:00 app[web.1]:  [283] [1m./node_modules/react-native-web/dist/exports/VirtualizedList/index.js[39m[22m 327 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082901+00:00 app[web.1]:  [285] [1m./App.js[39m[22m 2.53 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082903+00:00 app[web.1]:     + 271 hidden modules
2018-02-24T19:20:02.082911+00:00 app[web.1]: webpack: Compiled successfully.
2018-02-24T19:20:21.276101+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-02-24T19:20:21.276101+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-02-24T19:20:21.364850+00:00 heroku[web.1]: Process exited with status 137
2018-02-24T19:20:44.673361+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-02-24T19:20:44.673652+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-02-24T19:20:44.812657+00:00 heroku[web.1]: Process exited with status 137
2018-02-24T19:20:44.892098+00:00 heroku[web.1]: State changed from starting to crashed

有没有人可以告诉我将react-native-web部署到Heroku的步骤？

谢谢。

答案

您正在尝试在生产环境中运行webpack-dev-server，这是不推荐的。

你需要：

1. 在npm / yarn中设置生产webpack构建脚本，以便构建浏览器端代码（通常输出到'build'或'dist'目录）。应该有关于Heroku（see here）的说明，因此它知道在服务器检出主分支后在服务器上运行哪个脚本来构建它。
2. 设置通过“开始”脚本加载的最小服务器脚本。试试ExpressJs吧。请注意，Heroku创建一个PORT环境变量（process.env.PORT），其中包含用于HTTP服务器的已分配HTTP端口（将其传递给express.listen）。 Heroku have a minimal Express server example to look at。