Web 开发技术分析，前端开发学习历程。
283 篇文章react-360-web 顾名思义，就是在 web 端 运行的 react-360 的 SDK. 就像文档里面描述的; react-360-web 是 React 360 的环境运行时，它可以完成应用在 Web 端的渲染；它通过 Canvas 以及 WebVR API 来实现在 头显设备和浏览器的运行。 接下来直接看 React360.js // 用于定位 react vr 打包后的 bundle 地址 import bundleFromLocation from './js/bundleFromLocation'; import createRootView from './js/createRootView'; // 用于坐标的变换 import Location from './js/Compositor/Location'; // 一些常用的数学类库封装 import 详情 »
不就前写了一篇 webpack 4 升级迁移 这里简单说下 React 项目的一些配置； 首先我们新建项目 react-web ，然后进入项目初始化 package.json ； cd react-web && npm init 接下来我们安装 webpack ，这里需要注意一点，是命令行已经单独提取出来了，我们不仅需要安装 webpack 还需要安装 webpack-cli 。 npm i webpack webpack-cli --save-dev 接下来我们开始安装和 react 相关的依赖包； npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 接下来我们初始化 babel 的配置文件。 touch .babelrc 然后把下面内容粘贴进去； { "presets": ["@babel/preset-env& 详情 »
最近做 Node 上传服务，NGINX 代理，因此本地测试没问题，但是发到线上 代理抛出异常； 其实这个也很简单，重新配置下 Nginx 的上传限制: server { ... listen 80; server_name localhost; client_max_body_size 20M; ... } 详情 »
React-360 源码阅读【3】 上一篇简单说了下 scripts 目录究竟用来做什么，今天我们开始进入到正题，我们看下Libraries 下究竟做了什么； 其实和 react-native 下的目录一致，罗列我们可用的组件和模块文件；比如: Pano Camera Sound ... 我们看下入口文件 react-360.js const React360 = { // React Native overrides get View() { return require('View'); }, get Image() { return require('Image'); }, get Text() { return require('Text'); }, // VR Components and modules get AmbientLight() { return require('AmbientLight'); }, get Box() { return require('Box'); }, get LiveEnvCamera( 详情 »
接着前文 《React-360 源码阅读【1】》，下面主要分析构建这一部分业绩是 /scripts 目录下的内容； 结构 - build-packages.js - bump-versions.js - bundle.js - install-deps.js install-reps.js 在说这片代码之前，我们需要先去 packages/react-360-cli/src/getPackager.js 了解下如何判断是否支持 yarn。 const child_process = require('child_process'); let packager = null; function getPackager() { if (packager !== null) { return packager; } try { child_process.execSync( /^win/.test(process.platform) ? 'yarn 详情 »
终于开始准备连载这一系列，React-360 前身就是 React-VR。大概在 2.0.0 的时候还是使用 React-vr 来命名，但是随后重新开始了命名；因此安装的一些包的名称也有变化了。 比如我们在初始化的项目时候，需要安装 $ npm install -g react-360-cli 小插曲 为什么更名？ 2017 年 Facebook 发布了 JavaScript 框架 react-vr ，它是基于 JS 来实现用于在浏览器创建 VR 内容的框架。但是在同时， oculus 开始基于 C++ 开始编写 API ，因此为了避免两者出现一些困扰，我们重新命名了框架 react-360, 专注于创建 沉浸式的 VR 内容，同时支持 PC, 手机以及 VR 设备； 阅读之前 在具体阅读之前，建议了解下下面内容; React(https: 详情 »
近期开始陆续把 https 证书往 EC2 上开始部署；由于 Chrome 67 版本对 https 的要求更高了，加上近期会实验 http2，所以不得不开始把 HTTPS 启用了；之前写过为什么没有启用 SSL 的原因，很大程度上是因为 vanthink.cn 的七牛图床没有开启 HTTPS 导致这边的前端静态资源一直没能够使用到 https ，但是随着近期图床的迁移，应该会在两三周内完成域名的全部迁移； 证书用的是 腾讯云 的免费的证书。按照官方教程来的，但是结果还是出错了。始终访问不到。如果你启动的时候 nginx 没有抛出错误的话，你可以优先去看 AWS 控制台的安全组: 一定要开启对应的端口； 第二个排查就是，你需要去看 nginx 的错误日志; 一般在 /usr/log/nginx/error.log 报了什么错误; 这个问题其实还是比较好解决的， 详见这里 server { listen 详情 »
好久不看 webpack 已经从 3到4了，其实很早到今年2月份就开始发布 webpack 4 的 beta 版本； 每一次 webpack 的升级都还是建议阅读下 《webpack 4: released today! - Sean T. Larkin》。你需要明白，为什么 webpack又要迭代一个新的里程碑，以及带了什么新的特性； 这里简单总结下: Faster！！！ Webpack 在 bundle bundle 的时间会缩短至少 60 个点，最高可以到 98%; (我们似乎可以节省一些时间去这些事情) Mode 增加了新的属性，来支持 development 和 production 的区别，从而达到更好的优化效果； CommonsChunkPlugin 不将启用；取而代之的新的 API optimization.splitChunks; WebAssembly 的支持，现在默认支持 import export 详情 »
大概这是之前看 The Cost Of JavaScript In 2018 中提到的以参考索引，其实里面很多点挺重要的，当然推荐大家阅读下全文 A Pinterest Progressive Web App Performance Case Study; 后面其实说几点自己印象非常深刻的点； 为什么做这次性能改造 其实很多时候做性能改造，都会面临这样的质疑，它不是对现有版本的任何功能性的迭代，而是从多个方面去提升一些所谓数据指标。因此很多 产品(🐩) 都会去质疑这一件事情，但是 Pinterest 这次改造给出了更为直接的数据，性能的优化与用户数据方面的正相关： 其中相比老版本，用户的停留时间和核心参与度都有非常大的提升；其中和广告相关的数据，也有非常显著的增加；不难理解，当用户用更短的时间触达到页面， 合理的设置 chunks 如果我们是做基于 vue 项目或者 React 的项目，我们可以参考下 Pinterest 的 JS Bundles; js vendor 包含一些第三方的库比如(React, Redux, React-Router) 等; 详情 »
最近用 Cocos Creator (cc) 开发微信小游戏。由于 微信小游戏存在 主域和子域的隔离； 主域，你的主要游戏场景，和一些交互按钮等内容； 子域，主要用于获取用户数据和排行榜的显示； 微信这样分开也是为了更好地保护用户数据，防止数据泄露。因此一定要合理的设计自己的主域和子域； 凡是设计从微信里获取数据的比如用户头像，游戏成绩等；一定需要在子域的canvas 完成绘制； 实际在完成排行榜的功能时候遇到了一点兼容性的问题，Android 的部分机型(自己这边全部复现)和 iOS 设备上存在画布模糊的问题: ios 的截图如下: 搜索了一下，发现没有多少人提出这样的问题，但是看别的游戏也存在同样的问题； 不过，灵机一动！！！ 如果前端接触 canvas 的话，才开始都会遇到一个问题，就是再 PC 上看着挺好的，但是在移移动端就模糊了，因为这里存在一个 设备上物理像素和设备独立像素(device-independent pixels (dips))的比例 因此你的 canvas 设置的像素要比实际多出一些比如会有: canvas.width = window.innerWidth * window. 详情 »
