常用npm包

postcss-pxtorem ：px自动换算为rem

如果px写成PX、Px等，不会转rem

react-media-hook2：屏幕适配

import React from 'react';
import useMedia from 'react-media-hook2';

const Layout: React.FC = ({ children }) => {
  const [matches] = useMedia({ query: '(min-width: 1920px)' });
  return <div className={matches ? 'pc' : 'mobile'}>{children}</div>;
};

export default Layout;

classnames

<div className={ClassNames("theme-bg",{[`${this.state.theme}-img`]:true})}/>

参考-classnames的使用
参考-github

rimraf 删除文件和文件夹

rimraf快速删除文件和文件夹

lottie：需要使用动态json图时引用

lottie包的链接

import Lottie from 'react-lottie';

const defaultOptions = {
  loop: true,
  autoplay: false,
  animationData: '',
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid slice',
  },
};

const Icon: React.FC = () => {
  const [playId, setPlayId] = useState(0);

  return (
            <Lottie
              options={{
                ...defaultOptions,
                animationData: i.animationData,
              }}
              height={'1rem'}
              width={'1rem'}
              isStopped={playId !== i.id}
              isClickToPauseDisabled
            />
  );
};

export default Icon;

vConsole：开发移动端时可用，查看console

vConsole包

html2canvas：dom节点转换为canvas

canvas2image：canvas转换为图片

live-server：查看build构建出来的页面

live-server包

stylelint

 "devDependencies": {
	"stylelint": "9.10.1",
	"stylelint-config-css-modules": "^1.4.0",
	"stylelint-config-prettier": "^5.0.0",
	"stylelint-config-rational-order": "^0.1.0",
	"stylelint-config-standard": "^18.3.0",
	"stylelint-declaration-block-no-ignored-properties": "^1.1.0",
	"stylelint-order": "^2.2.1",
}