工作中的遇到的一些小知识 5

smooth scroll

使用window.scroll API ,从MDN的文档来看,各浏览器的支持情况还不错。

或者自己通过setTimeout加上ease function实现难度也不大。

React在老版本浏览器或Webview下的支持问题

[JavaScript Environment Requirements

React 16依赖于ES6中的Map和Set特性。如果需要React运行在老版本的不支持ES6的浏览器或Webview下,需要babel-polyfillcore-js的支持。

类似于下面这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
import 'core-js/es6/map';
import 'core-js/es6/set';
// or
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

需要格外注意的是,不论是import core-js还是import babel-polyfill,都一定要写在第一次import React from 'react'的前面。否则是起不到polyfill React中ES6特性的效果的。

一些老版本Android的坑

  • 在伪元素如:before:after使用动画会导致crash,caniuse的known issues上只是说在safari v6版本和以下会有不支持的情况。
  • 不支持不带前缀的transform
  • 不支持在<line>上的stroke-width属性上使用rem
  • 不支持Element.matches方法

ffmpeg

wiki: https://en.wikipedia.org/wiki/FFmpeg
官网: https://www.ffmpeg.org/

主要包含三个命令行指令:

  • ffmpeg,多媒体转码
  • ffplay,基于SDL和ffmpeg的极简播放器
  • ffprobe,多媒体分析

ffmpeg部分支持参数:

  • -i指定输入文件
  • -t处理时间
  • -ss起始时间
  • -b:a-b:v指定音频、视频的输出码率。
  • -rfps 帧率
  • -s 1920x1080设置帧大小
  • -c:a-c:v设置音频、视频编码器
  • -ac声道数
  • -ar音频采样率

更多

React Router使用History路由时,不识别带‘.’的路径

webpack-dev-server的配置里,增加disableDotRule

1
2
3
4
5
...
historyApiFallback: {
disableDotRule: true
}
...

注,这样做会使xxx.html的形式也重定向到默认的index.html,在多入口的项目下会有问题。

React Hooks和React Hot Loader默认配置相冲突

设置RHL的pureSFC配置为true,详见讨论

1
setConfig({ pureSFC: true })

一个简单的rollup配置样例

最近有一个开发前端录音库(严格来说是改进)的需求,目标是发布到npm管理平台上,在打包库上rollup的发挥要优于webpack。刚好想用用试试,就用了rollup作为打包工具。因为场景比webpack更简单,配置上也比webpack好配很多,基本看看官方文档就可以上手了。

不过,文档里用的babel版本还是6.x,使用新版本babel后,配置文件rollup.config.js.babelrc有些改动,这里列在下面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from "rollup-plugin-terser";
export default {
input: 'src/index.js',
output: {
file: 'index.js',
format: 'es'
},
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**'
}),
terser()
]
};
// .babelrc
{
presets: [
[
'@babel/env',
{
loose: true,
modules: false
}
]
],
plugins: [
['@babel/proposal-object-rest-spread', { loose: true }]
]
}

–END–