当前位置: 首页 > Web前端 > HTML5

告别webpackreact构建多个页面的痛苦

时间:2023-04-04 23:32:21 HTML5

Webpack4构建React多页面应用程序。在往下看之前请确保nodejs>8.X有一个很酷的目录结构。├──dist#编译结果├──build#配置文件├──cli#Sh脚本存储├──src#├──assets#存放图片,图标,...├──public#UI组件├──services#项目开发中一些常用的方法主要存放请求相关├──statics#静态文件├──template#模板文件├──utils#其实我觉得项目开发中一些常用的方法可以和services放在一起,但个人习惯还是分开的。└──views#pages├──.eslintrc#Eslintconfig├──.babelrc#babelconfig├──.gitignore#└──package.json#开始滚动代码如何创建一个多页面应用,首先你需要有一个单页应用修改,这里我就不再敲单页的应用案例了~git上有demo,接下来的多页也是基于上述的单页修改开始开箱即用的大项目。上面的multi-page是一个多页应用的demo。喜欢的话就给个star吧,我这里就不多说了~只是想告诉大家一些改单数的思路和注意事项===大家都知道入口改成多了,但是怎么改实现这一目标?demo中的/build/pageEntry.js文件是专门用来处理多入口多页面的。我们使用glob节点模型来获取入口文件。page页面配置的配置也是一样)记得加上webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js分别对应以下代码到此为止,基本完成了一个简单的多页面应用,但是现在这样的代码已经不能满足我们的日常开发了,因为这样的话,我们每次开发的时候,都要在src/views/下新建一个文件夹,然后一个一个的新建文件。相信他们会骂死我的~好~为了不让队友骂,那我就想着怎么让他们一键生成,用shelljs模块来简化模板的创建。请移动到demo中cli文件夹下的createHtml.sh。首先,我们先在src/template下建立一个通用模板,然后随便写个脚本执行命令,把模板复制到对应的文件夹下。本项目使用npmruncli-create创建开发界面。~现在队友别骂我了~哈哈哈用了几天,队友又开始吐槽了~需求太多~页面太多,所以每次启动项目,所有界面都会启动,不过我每次只调试某个页面,不用启动那么多~干什么干什么干什么~好吧~那就干吧,你还能干什么?请移动到demo中build文件夹下的selectPage.js文件。好吧~不知道说什么~大家自己看吧现在基本上大部分的多页面应用主要是在原生应用中嵌入H5页面,所以这里涉及到原生和H5的通信以及H5的调试移动端页面。原生与H5的通信您可以在移动端查看JSBridgeH5页面的调试。我在项目中引用了eruda.js(生产环境使用时不要忘记禁用!)最后一点就是移动端适配demo中使用了vw,但是实际开发中可以直接写px;pxtovw也准备好了,大家可以google一下vw的移动端适配~总结~再把demo链接放一遍,喜欢的话可以给个star,非常感谢,继续会继续优化。启动后可以选择打开某个界面,不需要手动输入文件地址~哈哈哈~期待的话给个star吧