适配 react web

• 参考。建议以参考英文为主，中文用来加深理解。因为他更新英文比较及时。
  • 英文 https://github.com/taobaofed/react-web
  • 中文 https://github.com/taobaofed/react-web/blob/master/README-zh.md
• 安装
  • 全局安装react-web命令程序 npm install react-web-cli -g
  • 在工程的上一层目录执行 react-web init <ProjectName>
  • 提示已经存在目录，输入 yes ，继续安装执行
  • 进入工程目录，安装 react-dom,npm install react-dom --save
  • 进入工程目录，安装 react-web,npm install react-web --save
  • 本地图片的加载处理。安装file-loader : npm install --save file-loader
  • 在 web/webpack.config.js 文件里面，加入
    • {
test:/.(eot|otf|svg|ttf|woff|woff2|png|jpg|gif)w*/,
loader:'file'
}
  • 
    
• 运行
  • npm start
  • react-web start
  • 此时会去打包，打包生成在 web/output 下面，如果没有生成该目录，终端上肯定会显示一些错误，解决这些错误之后才可以
  • web/output 下生成成功之后，就可以在浏览器里面输入 localhost:3000 进行访问了。
• 适配
  • 图片尺寸。因为web pack 不能打包 xxx@3x.png的图片。处理方案
    • 1. 做一个 图片批量生成工具，遍历工作目录下的 @3x 图片，如果有，就给他生成 普通的图片，名字也记录下来，一打包完毕，就给他删除掉。缺点是图片模糊。
    • 2. 代码里面做修改，所有 require 的路径，在 require 之前，都调用一个转换函数，如果是 web ，转换成带有 @3x 的图片。缺点是尺寸会被放大。比原生版本大3倍。
    • 3. ios,android,web 全部统一用一种资源，不要用 @3x 的图片，如果 @3x 图片尺寸是 120*120 ，我们代码引用的图片也用 120*120，但是名字不带 @3x ，代码里面指定 Image 组件的宽高为 40*40

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!