React Native转Web实践(Webpack+react-web)
React Native 项目的 Web 化,其实没有想象中那么麻烦,只要搞懂几个关键点,迁移还是蛮顺畅的。
Webpack 的配置是第一步。别小看它,入口文件、打包目录、babel-loader
、react-native-web
这些插件,一个都不能少。配置得好,编译快,调试爽。
react-web 这个库挺实用的,它帮你把原生组件变成 Web 可识别的形式。比如你原来用的 View
、Text
这些组件,不用重写,直接就能跑浏览器里,挺省事。
有些原生 API,比如 Dimensions
、Animated
,想在 Web 上复刻效果,得自己动点脑筋。但只要思路清晰,替代方案其实还挺多的。
Gulp 的话,我一般就拿来清目录、跑打包、监听文件变动,做点自动化的事。gulpfile.js
配置简单点就行,别整太复杂,维护麻烦。
package.json
也别忘了改,把webpack
、webpack-dev-server
、babel-core
这些都装上,顺手把 scripts
也补一补,省得每次都手敲命令。
如果你项目里组件写得比较规范,逻辑也没太多平台相关的依赖,那转起来会比较轻松。建议先从小模块试水,再一步步扩展。
react-web-demo.zip
预估大小:15个文件
index.ios.js
1KB
web
文件夹
output
文件夹
index.html
396B
main.js
1.64MB
main.js.map
1.97MB
react-web.js
141KB
react-web.js.map
1.52MB
bundle.js
1.69MB
index.js.map
5KB
2.09MB
文件大小:
评论区