权限问题, and没有include文件夹。

1
2
3

sudo mkdir include
sudo chown -R `whoami`:admin /usr/local/include
brew link graphviz

最近在搞scratch-gui，遇到了这样一个warning，报警的是下面这行代码

1

monitors: PropTypes.instanceOf(OrderedMap),

检查了下，monitors 确实是一个OrderedMap实例，构造函数和原型看起来跟a完全一样。

1
2
3
4
5

var  a = new OrderedMap()
// monitors.__proto__.constructor 和 a.__proto__.constructor 都是OrderedMap。。。
Object.getPrototypeOf(monitors) == Object.getPrototypeOf(a) 
// false

那么可能是什么原因呢？
他们俩的原型不是同一个引用。
然而OrderedMap又都是从immutable import的，按理说应该是同一个OrderedMap啊，

1

import {OrderedMap} from 'immutable';

除非，monitors构造的时候使用的不是项目的当前项目全局的immutable。它有一个闭包，是用了在自己的作用域内 的OrderedMap生成的。
于是去查找 生成monitors的代码的位置，发现使用的是 scratch-vm包的方法，那继续去看npm 包scratch-vm， 结果发现， scratch-vm的package.json依赖的immutable是 3.8.1版本，而依赖于 scratch-vm的scratch-gui 也同时依赖了immutable ，只不过版本不同是 3.8.2.

那么根据npm的规则，项目依赖a和b(v1)两个包，a也依赖了b(v2)，那么b的两个版本的代码都会被下载和使用，并且a依赖的b(v2)应当只在a自己的作用域内使用的，全局使用的是b(v1)的代码，这样就能解释报警的现象了。
在次基础上如何干掉这个warning呢？只要保持主项目依赖的b包和朱项目依赖的a依赖的b包版本一致。
改 scratch-gui的package.json

1

"immutable": "3.8.1",

这是因为，重复写了两个同样的cookie。
参考掘金。
MDN

解决办法： 服务器改下配置，Vary：Origin。or 浏览器清除缓存cookie。

定位到报错代码，发现使用了const语法，这个语法是IE11之后才兼容，但是项目也都配了babel-polyfill, 按理说babel-loader编译后，代码里不应该有const这个语法了。

问题原因在于，babel-loader没有处理node_modules 里npm包，而一些包是不支持IE11以下的，使用了const语法，这个语法没有经过bable处理。

那么如何解决，在babel-loader中手动指定需要额外处理的npm包

1
2
3
4
5
6
7

test: /\.jsx?$/,
            loader: 'babel-loader',
            include: [
               
                /node_modules[\\/]react-popover/,
              
            ],

其实官方提供了非常简单的使用例子，配合suspense使用

1
2
3
4
5
6
7
8
9

const A = React.lazy(() => import( './a.js'));

...

return (
  <Suspense fallback={<Loader />}>
    <A/>
  </Suspense>
)

这样就可以实现懒加载A
如果我有很多组件需要懒加载，每个又很小只有几k，可以把他们打包到一个命名chunk中，比如async。

1
2
3
4
5
6
7
8
9
10
11

const A = React.lazy(() => import(/* webpackChunkName: "async" */ './a.js'));
const B = React.lazy(() => import(/* webpackChunkName: "async" */ './b.js'));

...

return (
  <Suspense fallback={<Loader />}>
    <A/>
    <B/>
  </Suspense>
)

如果我的组件B是需要用户点击交互之后才会加载，那么用户就会在一个loading的页面等待一段时间，但是实际上我可以在用户点击之前就主动去加载这个组件，这样用户用到的时候就可以直接看到B了

1
2
3
4
5
6
7
8
9
10
11
12
13

const A = React.lazy(() => import(/* webpackChunkName: "async" */ './a.js'));
const B = React.lazy(() => import(/* webpackChunkName: "async" */ './b.js'));

...

return (
  <Suspense fallback={<Loader />}>
    <A/>
    {BVisible ? (
       <B />
    ) : null}
  </Suspense>
)

参考：https://hackernoon.com/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

报错

1

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

解决办法：安装xcode

1

xcode-select --install

这个是因为给一个线上项目升级了16，做了一次分享，涉及到fiber和生命周期的迭代。先占位一下。主要是需要时间来把ppt整理成markdown。。。（懒惰的溜走）

背景

webpack 配置了alias，这个优点是少写很多../../../的相对路径的代码。

问题

vscode 点击import的一个js文件的路径的时候，会跳转到对应文件并显示在编辑器里，配置了alias之后，vscode找不到例如import a from ‘@/a’;里面的路径 @/a。

解决办法

在根目录增加配置文件 jsconfig.json,增加如下配置

1
2
3
4
5
6
7
8
9
10
11

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

其中 paths里，跟你的webpack的alias配置一一对应。

electron客户端生成Mac和Win平台的App图标

mac的图标是需要.icns格式的，windows平台是.ico格式，这些格式，都可以通过命令行或者软件iConvert Icons生成。