official_dulin
official_dulin
# 问题 在`angular 6`项目中使用`graphql-tools`的`mockServer`方法时报: `Uncaught ReferenceError: process is not defined`错误 下图在浏览器控制台打印出了错误的函数调用堆栈，错误发生在`graphql`模块中  ## 环境及依赖版本 `ng-cli`:  `package.json` - `dependencies` ```json "dependencies": { "@angular/animations": "^6.0.3", "@angular/common": "^6.0.3", "@angular/compiler": "^6.0.3", "@angular/core": "^6.0.3",...
https://github.com/mrdulin/react-router-v4/tree/master/src/demo-2
设备模拟：iPhone6 缩放92%，会发现图片和图片之间有一条白线  作为对比，设置缩放为100%，如下图：  起初以为是`inline-block`元素的间隙问题，后来以为是图片高度切图不是偶数的问题，结果都不是。 下面是两个图片的原始尺寸：   后来发现不仅仅是在iPhone6 缩放92%情况下会出现该问题，具体原因还在调查中
**问题**：移动设备调试时，页面白屏，这个见的多了，很有可能又是兼容性问题，程序报错导致应用crash。 **测试环境**： * iPhone 6P - ios 8.1.2 - Safari * `"react": "^16.2.0"` * Mac OSX **查找原因**： 1. 用USB连接手机和Mac 2. `iPhone`设置 - Safari - 高级 - 开启web inspector 3. 在iPhone...
__问题：某个使用`preact-cli`的项目在开发和测试环境部署时，部署失败的一个案例。__ 部分错误日志如下图：  部署时，执行一系列脚本，包括`npm install`，这次部署失败的原因是“卡住”长达几十分钟，最后不得不手动终止。 可以发现日志最后一行: ```bash node lib/install.js ``` 好，顺藤摸瓜，去`node_modules`中找到`simplehttp2server`这个依赖包，最后找到了上面的`install.js`脚本最后执行的是这个代码，如下图：  这个脚本要发送一个http请求，去`github`上下载这个依赖包需要的二进制文件。`github releases`中的文件真实存放地址是amazon的云服务器，如下图:  公司部署服务器尽管能连外网，有自己的npm服务器，但不能翻墙，所以结论就是卡在这个下载二进制文件的http请求上。 现实情况是： 1. 不可能去改公司部署脚本，部署服务器也不能翻墙 2. 也不可能每次都把本地的`node_modules`拷贝到部署服务器上。 3. `simplehttp2server`是`preact-cli`的一个依赖包，此外，`preact-cli`还依赖很多依赖包，包括`webpack`, `webpack plugin`等。 总结：所以，尽管使用一些`xx-cli`脚手架工具很方便，但是可控性会变差，一些配置可能满足不了开发和业务需要，这些脚手架工具可能并不会提供覆盖或者自定义配置的方法，修改其源码几乎不现实，反而导致开发成本提升以及出现异常的可能性。
**问题**：有时候要定义一个变量，这个变量是动态生成的，例如，根据`url`，`UA`，`http response header`上的某些参数生成，这个变量会跨模块的多次使用，有人想直接定义在浏览器的`window`全局对象上，直接`window.xxx`用。 这种做法很危险，而且需要手动维护模块的依赖关系。下面用一个典型的例子说明，需求是有一个`isWap`变量，表示当前是什么平台，在各个模块都可能会使用。 * 在`window`对象上定义变量： 入口文件，`index.js` ```js import Home from "./containers/Home"; const coin = () => Math.random() < 0.5; window.isWap = coin(); new Home().render(); ``` `index.js`做的事情是：引入`Home`视图类，在`window`对象上定义`isWap`变量并赋值，然后实例化`Home`视图类，调用视图类实例的`render`方法。 `Home`视图类，`containers/Home/index.js`: ```js import...
问题：使用`react v16.2.0`和`react-tap-event-plugin v3.0+`(最新版)时，在老旧机型页面白屏，可能是`react-tap-event-plugin/src/SyntheticEvent.js`模块中`Object.assign`导致的兼容性问题。 对于`react-tap-event-plugin v2.0.1`，`react`兼容的版本是: ```txt Compatible with React >= 15.4 && < 16.0 ``` 测试环境： ```json "react": "^15.6.1", "react-dom": "^15.6.1", ``` https://github.com/zilverline/react-tap-event-plugin/blob/v2.0.1/src/TapEventPlugin.js 这个模块依赖的一个模块是： ```js var SyntheticUIEvent = require('react-dom/lib/SyntheticUIEvent'); ```...
问题：使用`react-tap-event-plugin`，使用`onTouchTap`事件，会“触发两次”，俗称“ghost click”。 现象： 一、单页应用路由跳转时，如果在触摸事件触发的屏幕区域，A页面和B页面都有可以与用户交互的元素，比如页面A和页面B都有返回按钮，且在相同位置，点击A页面的返回->B页面，由于ghost click，会再次触发B页面返回按钮的事件，页面会再次返回B页面的上一级页面； 二、页面A有一个按钮（监听onTouchTap事件），页面B是可以跳转的列表（监听onClick事件），点击A页面的按钮，跳转到B页面，由于ghost click，会触发B页面和A页面按钮相同位置列表项的点击事件，跳转到该列表项详情页。 原因： 在移动端，`onTouchTap`事件会先触发原生的`touchstart `和`touchend`事件，300ms后，触发原生`click`事件。待更新... 解决方案： 待更新 参考链接： https://github.com/zilverline/react-tap-event-plugin/issues/77 https://github.com/zilverline/react-tap-event-plugin#ignoring-ghost-clicks
**问题：** `Uncaught ReferenceError: React is not defined` `Home/index.js`是一个`SFC`: ```jsx const Home = () => ( Home ); export default Home; ``` 这里稍具迷惑性，虽然看起来`stateless functional component`是一个普通的箭头函数，好像没有用到`React`，不用引入`React`模块，但是别忘了，`SFC`中的"`html`标签"并不是浏览器环境中的`html`标签。而是`JSX`，`JSX`会经过`babel-preset-react`和`babel-preset-es2015`等预设集的解析转换，最后编译出来的代码是这样的: ```js exports.default = function () {...
Trello，免费+收费方式，对于个人和小型团队，免费完全够用，支持简体中文，所以就不废话介绍了，给出我的使用快照给大家作为参考。           个人推广链接：https://trello.com/official_dulin/recommend