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

发表于 分类于 Disqus： 本文字数： 2.4k 阅读时长 ≈ 4 分钟

smooth scroll

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

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

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

[JavaScript Environment Requirements

React 16依赖于ES6中的Map和Set特性。如果需要React运行在老版本的不支持ES6的浏览器或Webview下，需要babel-polyfill或core-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–