React Native转Web实践(Webpack+react-web)

React Native 项目的 Web 化,其实没有想象中那么麻烦,只要搞懂几个关键点,迁移还是蛮顺畅的。

Webpack 的配置是第一步。别小看它,入口文件、打包目录、babel-loaderreact-native-web这些插件,一个都不能少。配置得好,编译快,调试爽。

react-web 这个库挺实用的,它帮你把原生组件变成 Web 可识别的形式。比如你原来用的 ViewText 这些组件,不用重写,直接就能跑浏览器里,挺省事。

有些原生 API,比如 DimensionsAnimated,想在 Web 上复刻效果,得自己动点脑筋。但只要思路清晰,替代方案其实还挺多的。

Gulp 的话,我一般就拿来清目录、跑打包、监听文件变动,做点自动化的事。gulpfile.js配置简单点就行,别整太复杂,维护麻烦。

package.json也别忘了改,把webpackwebpack-dev-serverbabel-core这些都装上,顺手把 scripts 也补一补,省得每次都手敲命令。

如果你项目里组件写得比较规范,逻辑也没太多平台相关的依赖,那转起来会比较轻松。建议先从小模块试水,再一步步扩展。

zip
react-web-demo.zip 预估大小:15个文件
file
index.ios.js 1KB
folder
web 文件夹
folder
output 文件夹
file
index.html 396B
file
main.js 1.64MB
file
main.js.map 1.97MB
file
react-web.js 141KB
file
react-web.js.map 1.52MB
file
bundle.js 1.69MB
file
index.js.map 5KB
file
index.js 1KB
file
bundle.js.map 2.94MB
file
webpack.config.js 2KB
file
Noname1.txt 27B
file
webpack.config.js.bak 2KB
file
gulpfile.js 1KB
file
package.json 639B
zip 文件大小:2.09MB