Babel-preset-qrn-iconfont NPM

相关教程和问题反馈及解决方案请前往新地址, 本页面不在更新

修改字体版本

插件的作用

iOS的字体更新机制

/* 
 * @providesModule QFontSet
 */
module.exports = {
    // "fontKey": "fontUrl",
    "qrn_demo": 'https://s.qunarzz.com/dev_test/Fonts/1.0.0/qrn_demo.ttf'
};

其中 fontKey(此例中为qrn_demo) 是注册到 native 的 fontFalimyName, 当时用无版本的字体时, native 会检测 qrn_demo 是否已经注册, 如果注册过就不会重新写入新的字体, 如果字体库发生变化会重新生成新的字体url(也就是fontUrl), 但是 fontKey 并没有发生变化, 所以导致新的字体并没有重新注册到 native

解决方案

在 iconfont 平台使用带有版本号的字体
使用本插件, 本插件的目的在业务无感知的情况下动态替换代码中的 fontFamily 和 fontKey 为带有版本号的形式(qrn_demo -> qrn_demo-0.0.1), 这样每次字体更改都会重新注册新的 fontFalimyName 到 native

安装本插件

在 package.json 的 dependencies 里添加这个模块 @qnpm/babel-preset-qrn-iconfont, 然后执行 qrn install

{
  // ...
  "dependencies": {
	// ...
	"babel-preset-qrn-iconfont": "0.0.1"
  }
  // ...

配置

如果项目根目录下没有`.babelrc`文件则创建, 并填写如下内容

{
	"presets": ["qrn-iconfont", "qrn", "react-native"]
}

如果项目根目录下存在`.babelrc`文件则修改

假如.babelrc文件内容为

{
	"presets": ["这是我", "瞎编的", "也有可能有plugins"]
}

在数组最前面添加, 修改后如下

{
	"presets": ["qrn-iconfont", "qrn", "react-native", "这是我", "瞎编的", "也有可能有plugins"]
}

如果项目的.babelrc的presets中存在qrn或者react-native无需重复添加只把 qrn-iconfont 放到前面就好

代码提交

.babelrc文件需要提交到代码仓库

回退策略

如果安装插件后出现编译问题, 卸载插件, 并把package.json 的 dependencies 里的 @qnpm/babel-preset-qrn-iconfont 模块删除, 并且回退对.babelrc的更改, 并且把带有版本的字体改回无版本字体

相关问题及解决方案

安装本插件后 qrn run 报错

报错信息

Loading dependency graph...(node:12857) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: `fsevents` unavailable (this watcher can only be used on Darwin)

解决办法