我写的几个 craco 插件介绍

自己写的几个 craco 插件，记录一下用法，用途
更新于: 2022-03-25 07:22:36

插件列表

插件名称用途
craco-plugin-alias对应于 webpack 自身的 alias，自带了 '@': path.join(dirname, 'src')
craco-plugin-banner在HTML头上以注释方式添加一些 build_time 等信息
craco-plugin-bundle-analyzer当ENV中存在 BUNDLE_ANALYZER=true 时生效
craco-plugin-debug可以打印出 craco 当前的配置信息
craco-plugin-dll-refs当 webpack-dll-cli 应用时，对应 js 部分的 reference 的引入
craco-plugin-dll-refs-sass当 webpack-dll-cli 应用时，对应 css 部分的 reference 的引入
craco-plugin-environment
// 添加自定义的环境变量，可以在项目中直接调用 APP_VARS.BUILD_DATETIME
{
  plugin: cracoPluginEnvironment,
  options: {
    vars: {
      BUILD_DATETIME: nx.Date.format(null),
      BUILD_VERSION: pkg.version,
    },
  },
},
craco-plugin-offline利用 offline 插件，完成 serviceWorker 的集成
craco-plugin-spa-base自己常用 spa 应用的配置，有 @ + View 的配置; 需要 npm i classnames 支持
craco-plugin-speed-measure可以统计打包消耗时长(webpack4下使用，webpack5目前有bug)
craco-plugin-styled-components关于 styled-components 的一些开发优化，方便 debug; babel/namespace等功能的配置
craco-plugin-styled-extension对于 styled-components 的一些功能扩展，如 rgba/lighten/darken函数的扩展

一键安装

npm i -D @jswork/craco-plugin-alias
npm i -D @jswork/craco-plugin-banner
npm i -D @jswork/craco-plugin-bundle-analyzer
npm i -D @jswork/craco-plugin-debug
npm i -D @jswork/craco-plugin-dll-refs
npm i -D @jswork/craco-plugin-dll-refs-sass
npm i -D @jswork/craco-plugin-environment
npm i -D @jswork/craco-plugin-offline
npm i -D @jswork/craco-plugin-spa-base
npm i -D @jswork/craco-plugin-speed-measure
npm i -D @jswork/craco-plugin-styled-components

对绝对路径 @ 的支持

import ReactDOM from 'react-dom';
import '@/shared/nx';
import '@/assets/styles/index.scss';
import reportWebVitals from './reportWebVitals';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

styled的使用

  • 不用引用 styled
  • 可以使用 rgba 函数，像 sass 一样的感觉
  • 在Chrome的Element面板，有 LoginContainer 相关class，方便定位组件
# styled
npm install styled-components
npm install @types/styled-components --save-dev
# extension
npm i @jswork/color-rgba @jswork/color-lighten @jswork/color-darken
export const LoginFooter = styled.footer`
  font-size: 14px;
  color: ${rgba('#fff', 0.8)};
  position: absolute;
  bottom: 24px;
  width: 100%;
  text-align: center;
`;

关于  craco-plugin-dll-refs 使用过程与 HMR 冲突的解决方案

冲突原因: new webpack.DllReferencePlugin 使用的时候，会造成 HMR 无法正常更新。

更精确的原因，暂时还没有定位到。

# 组合1: HRM + disabled dll-refs
# 特点: 启动慢，但支持HMR，开发体验更好<默认为true,所以这个也不用写>
FAST_REFRESH = true
# craco.config.js<options: 默认可以不写>
{ plugin: dllRefs, options: {inject: false} }

## 组合2: refresh + enable dll-refs
# 特点: 启动快，但不支持HMR，对于表单应用体验有点差，但问题较少，占内存较大
FAST_REFRESH = false
# craco.config.js
{ plugin: dllRefs, options: { inject: true } }

craco-plugin-speed-measure 与 PUBLIC_URL 的问题

这个插件，使用的时候会造成， "%PUBLIC_URL% 未编译成正常的配置;
所以，这个插件，正常时间应该是关闭状态，只有需要分析打包性能的时候才会打开使用

在 styled 实现 foreach 的效果

import styled from 'styled-components';

export const STATUS_COLORS = [
  { label: 'Relative', status: 'relative', color: ['#03DCA4', '#D6D6D6'] },
  { label: 'Neutral', status: 'neutral', color: ['#F9F9F9', '#D6D6D6'] },
  { label: 'Positive', status: 'positive', color: ['#FF8886', '#D6D6D6'] },
  { label: 'Important', status: 'important', color: ['#FFCE00', '#FFFFFF'] },
  { label: 'Domain', status: 'domain', color: ['#1890FF3D', '#1890FF3D'] },
];

const Container = styled.div`
  ${STATUS_COLORS.map(
    (item) =>
      `&[data-status='${item.status}'] { > i { background: ${item.color[0]}; border-color: ${item.color[1]}; }`
  )}
`;

export default (props) => {
  return <Container>Legend</Container>;
};

参考