0829 今日总结

今日工作

问题，原因，解决方式，优化，巧妙实现，新知识

Vite 环境配置

今天项目配置需要增加环境配置，我们有三个环境 fat/uat/pro

习惯性使用 cross-env 配置，查看 vite 环境配置后发现，应该使用 vite 规范的方式

例如：

env

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

上面的 mode 可以在打包脚本中规定，如：

# 对于 .env.local 文件，使用
vite build --mode=local

# 对于 .env.development 文件，使用
vite build --mode=development

需要注意的是，自定义的环境变量需要添加 vite 规定的前缀 VITE_ 才能被识别并暴露出来；

当然，也可以自定义环境变量前缀：envprefix

以及，vite 自带一些环境变量：可以打印下 import.meta.env

// console.log('envs: ', import.meta.env)
{
    "BASE_URL": "/",
    "MODE": "development",
    "DEV": true,
    "PROD": false,
    "SSR": false
}

自定义环境变量期间，我遇到了这个问题：dev is always true after build

配置 NODE_ENV 后解决，参考这里例子

参考：

Webpack 插件开发

之前一段时间做了个技术性需求，分析公司通用组件，归类、优化、整理；

既然需要优化，肯定是看哪些组件使用频率高，被改动的多，就是最需要优化的；

为了统计，参考社区方案，并改动了一些代码对通用组件库做了个统计；

其中，最难的一环不是 webpack 插件开发，而是 webpack 插件调试；

Snipaste_2023-08-29_21-55-08

打包时不能用命令 webpack，而是显式地用 node node_modules/webpack/bin/webpack.js，以下是我的配置：

json

{
  "scripts": {
    "start": "node --inspect scripts/start.js",
    "build": "node --inspect scripts/build.js",
  },
}

Snipaste_2023-08-29_21-58-50

好文推荐

有感好文

Vite2+React+TypeScript：搭建企业级轻量框架实践-腾讯云开发者社区-腾讯云
css 同时设置min-width、width、max-width时是如何展示的_PQ℡的博客-CSDN博客几个宽度的关系；
Implementing React Custom Hooks: A Complete Guide | Syncfusion Blogs 自定义 react-hooks 教程；

react hook 如何包裹一个组件：

场景，打开一个自定义弹框：

jsx

// forwardRef 方案
const XXXDialog = forward((props, myRef) => {
  useImperativeHandle(() => {
    open: openModal
  })
  return <Modal ref={myRef} open={openModal} />
})

// 使用: 伪代码
XXXDialogRef.open()


// hook 方案
const Modal = () => { /** 逻辑代码 */}
const { YYYDialog, openModal } = useComponent(Modal)

// 使用：伪代码
openModal()

当我意识到这个技术话题的时候，组里的老大已经在研究很久了，已经在用着了，回头拎出来讨论讨论；

0829 今日总结 ​

今日工作 ​

Vite 环境配置 ​

Webpack 插件开发 ​

好文推荐 ​

0829 今日总结

今日工作

Vite 环境配置

Webpack 插件开发

好文推荐