zmdms-webui

基于 antd4.24.8 版本二开组件库，通过 rollup 打包。

使用国际化

1. 组件内部需要支持国际化 可通过下面的方法获取设置国际化相关逻辑

   // 引入获取语言配置的hook
   import useLocale from '../config/useLocale';
   
   const localeConfig = useLocale(); // 能获取到配置在config/i18n下的语言配置相关信息
   

2. 使用组件的系统需要通过下面的方法配置

   因为我们组件是基于antd的做的二次开发，由于antd的国际化配置是通过ConfigProvider这个context.provider。但是并没有暴露给用户获取。所以需要额外定义一个切换的context供组件获取
   import { ConfigProvider, ZtxkContext } from 'ztxk-webui'
   
   <ConfigProvider locale={locale}>
       <ZtxkContext.Provider value={ztxkConfig}>
       	<App />
       </ZtxkContext.Provider>
   </ConfigProvider>
   

需要为每个组件编写测试用例

注意事项

1. 需要覆盖下 webpack5 下的限制

   启用后，你若在 .mjs 文件或其他 .js 文件中导入模块，并且它们最近的 package.json 中包含 "type" 字段，其值为 "module"时，你应为此文件提供扩展名，否则 webpack 会提示 Module not found 的错误且编译失败。并且 webpack 不会解析 resolve.mainFiles 中定义的文件目录，你必须自己指定文件名。
   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.m?js$/,
           resolve: {
             fullySpecified: false, // disable the behaviour
           },
         },
       ],
     },
   };
   

2. 开发时 添加 less 支持 （less-loader 需要用 10.2.0 以下的版本）

   // 进入 react-scripts/config/webpack.config.js
               {
                 test: /\.(less)$/,
                 exclude: /\.module\.(less)$/,
                 use: [
                   ...getStyleLoaders(
                     {
                       importLoaders: 3,
                       sourceMap: isEnvProduction
                         ? shouldUseSourceMap
                         : isEnvDevelopment,
                       modules: {
                         mode: 'icss',
                       },
                     },
                   ),
                   {
                     loader: "less-loader",
                     options: {
                       lessOptions: {
                         javascriptEnabled: true
                       }
                     }
                   }
                 ],
                 // Don't consider CSS imports dead code even if the
                 // containing package claims to have no side effects.
                 // Remove this when webpack adds a warning or an error for this.
                 // See https://github.com/webpack/webpack/issues/6571
                 sideEffects: true,
               },
   

   可以再 APP.tsx 里面 引入 index.default.css 打包后的样式文件也可以。默认使用这个

3. 本地 link 需要注意事项

   Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
   1. You might have mismatching versions of React and the renderer (such as React DOM)
   2. You might be breaking the Rules of Hooks
   3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   
   需要切换到ui库下面，将react link到开发项目的node modules下
   
   cd zmdms-webui
   npm link ..\zmdms-webmain\node_modules\react
   

• 使用 link 后报如下错误，可能是 lock 文件中 有 file:引用本地文件导致的错误 删除对应的引用即可

 ode:events:491
   throw er; // Unhandled 'error' event
   ^

 Error: EISDIR: illegal operation on a directory, read
 Emitted 'error' event on ReadStream instance at:
 ```

4. 注释相关

/**
 * 这样的注释不会被删除
 */

 // 会被删除

 /* 会被删除 */