使用Babel插件在编译阶段自动应用高阶组件

Next.js 项目是需要单独配置的，且用的是 babel-plugin-injectcomponentcode 1.x 版本， 其他项目 使用 2.x 版本 (2.x 版本使用 glob 模式，完成支持 glob 配置语法)

背景：使用 react-i18next 对 react 项目进行国际化，每个组件都需要反复 import react-i18next 且在 组件内部使用 反复的写 const { t } = useTranslation(); 现已有多语言高阶组件，但是高阶组件需要每个组件去 import，现在 使用自定义 babel plugin 对文件进行 AST 自动实现HOC, 降低开发者心智负担

1. 如何使用

// npm i babel-plugin-injectcomponentcode -D
// babel.config.js
module.exports = {
    ...
    plugins: [
        ...
        [
            ['babel-plugin-injectcomponentcode', { 
                  importComponentFilePath: "@/components/withWrapperCom",
                  importComponentName: "withWrapperCom",
                  isImportDefault: true,
                  globIgnorePath: "src/page/Home/index.tsx", // 这里完全支持 glob 语法
                  globMatchPath: ["src/modules/**/*.tsx"],  // 这里完全支持 glob 语法
            }]
        ]
     ]
}

2. 本质上就是识别到文件路径，在编译阶段对文件进行HOC行为，降低业务开发者 反复 import

3. babel-plugin-injectcomponentcode有5个参数

   1. globIgnorePath: 需要被忽略的 path (完全适配 glob 语法规则)
   2. globMatchPath: 需要 被自动注入hoc 的 组件path (完全适配 glob 语法规则)
   3. importComponentFilePath： 需要导入的组件的地址
   4. importComponentName: import 组件的 name
   5. isImportDefault: 是否默认导出

4. 如果需要被包装的组件已经被准备HOC的组件包装过，那么此 babel 插件将不再进行高阶

效果：

### 输入

import xx from 'xx'
const Demo = () => {}
export default Demo

### 输出

import PageWrapper from '@/components/withWrapperCom'
import xx from 'xx'
const Demo = () => {}
export default withWrapperCom(Demo)

自定义高阶组件参考链接