版本升级后，渲染异常

UltramanWeiLai commented 1 year ago

实现场景：

amis 2.7 版本，升级到 3.2 版本

存在的问题：

升级后，CRUD 组件的列表数据不展示了，可以通过分页看到，已经获取到了，而且很奇怪的是，预览 demo 的编辑器中复制 schema 后却是正常的。

项目依赖如下：

webpack 配置如下：

const path = require('path')
const childProcess = require('child_process')

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack')

const dist = path.resolve(__dirname, '../dist')
const entry = path.resolve(__dirname, '../src/index.tsx')
const template = path.resolve(__dirname, '../public/index.html')

const nodeModules = path.resolve(__dirname, '../node_modules')

const envConfigPath = {
  dev: path.resolve(__dirname, '../.env'), // 开发环境配置
  test: path.resolve(__dirname, '../.env.test'), // 测试环境配置
  staging: path.resolve(__dirname, '../.env.staging'), // uat环境配置
  production: path.resolve(__dirname, '../.env.production'), // 生产环境配置
}

module.exports = {
  target: 'web', // 默认是web
  entry,
  output: {
    path: dist,
    filename: 'static/js/[name].[chunkhash:8].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/
      },
      {
        test: /\.(css|scss|sass)$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /.(png|jpg|jpeg|gif|svg)$/, // 匹配图片文件
        type: "asset", // type选择asset 以前webpack4 使用file-loader url-loader 5默认支持了使用asset-module 
        parser: {
            dataUrlCondition: { maxSize: 5 * 1024 }
        },
        generator: {
            filename:'static/images/[name].[contenthash:8][ext]' // 加上[contenthash:8]
        },
      },
      {
          test: /.(woff2?|eot|ttf|otf)$/, // 匹配字体图标文件
          type: "asset", // type选择asset
          parser: {
              dataUrlCondition: { maxSize: 5 * 1024 }
          },
          generator: {
              filename:'static/fonts/[name].[contenthash:8][ext]' // 加上[contenthash:8]
          },
      },
    ]
  },

  resolve: {
    conditionNames: ['require', 'node'],
    extensions: ['.js', '.tsx', '.ts'],
    modules: [nodeModules], // 查找第三方模块只在本项目的node_modules中查找
    alias: {
      '@': path.join(__dirname, '../src'),
    }
  },
  plugins: [
    new Dotenv({
      path: envConfigPath[process.env.MODU],
      defaults: envConfigPath.dev,
    }),
    new HtmlWebpackPlugin({
        template,
    }),
    new webpack.DefinePlugin({
        'process.env.BASE_ENV': JSON.stringify(process.env.BASE_ENV), // 环境变量注入
    })
  ],
}

const path = require('path');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 抽离css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // 压缩css
const TerserPlugin = require('terser-webpack-plugin') // 压缩js

module.exports = merge(baseConfig, {
    mode: 'production',
    output: {
        publicPath: '/',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MonacoWebpackPlugin(),
        // 复制文件插件
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, '../public'), // 复制public下文件
                    to: path.resolve(__dirname, '../dist'), // 复制到dist目录中
                    filter: source => { //过滤
                        return !source.includes('index.html') // 忽略index.html
                    }
                },
            ],
        }),
        // 抽离css插件
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].[contenthash:8].css' // 加上[contenthash:8]
        }),
        new CssMinimizerPlugin(),
        new TerserPlugin({
            // parallel: true, // 开启多线程压缩
            terserOptions: {
                compress: {
                    pure_funcs: ["console.log"] // 删除console.log
                }
            },
        }),

    ],
    optimization: {
        splitChunks: { // 分隔代码
          cacheGroups: {
            vendors: { // 提取node_modules代码
              test: /node_modules/, // 只匹配node_modules里面的模块
              name: 'vendors', // 提取文件命名为vendors,js后缀和chunkhash会自动加
              minChunks: 1, // 只要使用一次就提取出来
              chunks: 'initial', // 只提取初始化就能获取到的模块,不管异步的
              minSize: 0, // 提取代码体积大于0就提取出来
              priority: 1, // 提取优先级为1
            },
            commons: { // 提取页面公共代码
              name: 'commons', // 提取文件命名为commons
              minChunks: 2, // 只要使用两次就提取出来
              chunks: 'initial', // 只提取初始化就能获取到的模块,不管异步的
              minSize: 0, // 提取代码体积大于0就提取出来
            }
          }
        }
    }
})

github-actions[bot] commented 1 year ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

UltramanWeiLai commented 1 year ago

mathYang1224 commented 1 year ago

{ "type": "crud", "id": "u:c68600e5ecbe", "syncLocation": false, "api": { "method": "post", "url": "", "messages": { }, "adaptor": "if (payload.data && payload.data !== null) {\r\n payload.data.total = payload.data.totalCount\r\n}\r\n\r\nreturn payload\r\n" }, "columns": [ { "name": "id", "label": "ID", "type": "text", "id": "u:22d5ced8f575" }, { "name": "name", "label": "表单名称", "type": "text", "id": "u:17926079d14d", "placeholder": "-" }, { "type": "operation", "label": "操作", "buttons": [ { "label": "编辑", "type": "button", "level": "link", "id": "u:5bbcaea4ee3b", "onEvent": { "click": { "actions": [ { "args": { "params": { }, "url": "form-manage/form/designer/${id}" }, "actionType": "url" } ], "weight": 0 } } } ], "id": "u:8547b542eae0" } ], "bulkActions": [ ], "itemActions": [ ], "perPageAvailable": [ 10 ], "messages": { }, "filter": { "title": "", "body": [ { "type": "input-text", "name": "name", "label": "表单名称", "id": "u:a4940db043a1", "clearable": true } ], "id": "u:5737dfc7877b", "submitText": "确定", "actions": [ ] }, "pageField": "currPage", "perPageField": "pageSize", "features": [ "update", "create" ], "headerToolbar": [ { "label": "新增", "type": "button", "actionType": "dialog", "level": "primary", "dialog": { "title": "新增", "body": [ { "type": "form", "api": { "method": "post", "url": "", "dataType": "form-data", "responseData": null, "requestAdaptor": "", "data": null, "replaceData": false }, "body": [ { "type": "input-text", "name": "name", "label": "表单名称", "id": "u:1f75b67285db" }, { "type": "input-text", "label": "创建人", "name": "createUser", "id": "u:f9fd9288308d", "value": "黄杰", "hidden": true }, { "type": "input-text", "label": "内容", "name": "content", "id": "u:c4254658b90a", "hidden": true, "value": "{}" } ], "id": "u:7aa7231c5c3a" } ], "type": "dialog", "id": "u:83d1ba6c1d52" }, "id": "u:00da200532c9", "onEvent": { "click": { "actions": [ ], "weight": 0 } } }, "bulkActions" ] }

mathYang1224 commented 1 year ago

以上配置项表单渲染不出来

mathYang1224 commented 1 year ago

级联下拉不出来,一闪而逝

mathYang1224 commented 1 year ago

2betop commented 1 year ago

实现场景：

amis 2.7 版本，升级到 3.2 版本

存在的问题：

升级后，CRUD 组件的列表数据不展示了，可以通过分页看到，已经获取到了，而且很奇怪的是，预览 demo 的编辑器中复制 schema 后却是正常的。

项目依赖如下：

webpack 配置如下：

const path = require('path')
const childProcess = require('child_process')

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack')

const dist = path.resolve(__dirname, '../dist')
const entry = path.resolve(__dirname, '../src/index.tsx')
const template = path.resolve(__dirname, '../public/index.html')

const nodeModules = path.resolve(__dirname, '../node_modules')

const envConfigPath = {
  dev: path.resolve(__dirname, '../.env'), // 开发环境配置
  test: path.resolve(__dirname, '../.env.test'), // 测试环境配置
  staging: path.resolve(__dirname, '../.env.staging'), // uat环境配置
  production: path.resolve(__dirname, '../.env.production'), // 生产环境配置
}

module.exports = {
  target: 'web', // 默认是web
  entry,
  output: {
    path: dist,
    filename: 'static/js/[name].[chunkhash:8].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/
      },
      {
        test: /\.(css|scss|sass)$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /.(png|jpg|jpeg|gif|svg)$/, // 匹配图片文件
        type: "asset", // type选择asset 以前webpack4 使用file-loader url-loader 5默认支持了使用asset-module 
        parser: {
            dataUrlCondition: { maxSize: 5 * 1024 }
        },
        generator: {
            filename:'static/images/[name].[contenthash:8][ext]' // 加上[contenthash:8]
        },
      },
      {
          test: /.(woff2?|eot|ttf|otf)$/, // 匹配字体图标文件
          type: "asset", // type选择asset
          parser: {
              dataUrlCondition: { maxSize: 5 * 1024 }
          },
          generator: {
              filename:'static/fonts/[name].[contenthash:8][ext]' // 加上[contenthash:8]
          },
      },
    ]
  },

  resolve: {
    conditionNames: ['require', 'node'],
    extensions: ['.js', '.tsx', '.ts'],
    modules: [nodeModules], // 查找第三方模块只在本项目的node_modules中查找
    alias: {
      '@': path.join(__dirname, '../src'),
    }
  },
  plugins: [
    new Dotenv({
      path: envConfigPath[process.env.MODU],
      defaults: envConfigPath.dev,
    }),
    new HtmlWebpackPlugin({
        template,
    }),
    new webpack.DefinePlugin({
        'process.env.BASE_ENV': JSON.stringify(process.env.BASE_ENV), // 环境变量注入
    })
  ],
}

const path = require('path');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 抽离css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // 压缩css
const TerserPlugin = require('terser-webpack-plugin') // 压缩js

module.exports = merge(baseConfig, {
    mode: 'production',
    output: {
        publicPath: '/',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MonacoWebpackPlugin(),
        // 复制文件插件
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, '../public'), // 复制public下文件
                    to: path.resolve(__dirname, '../dist'), // 复制到dist目录中
                    filter: source => { //过滤
                        return !source.includes('index.html') // 忽略index.html
                    }
                },
            ],
        }),
        // 抽离css插件
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].[contenthash:8].css' // 加上[contenthash:8]
        }),
        new CssMinimizerPlugin(),
        new TerserPlugin({
            // parallel: true, // 开启多线程压缩
            terserOptions: {
                compress: {
                    pure_funcs: ["console.log"] // 删除console.log
                }
            },
        }),

    ],
    optimization: {
        splitChunks: { // 分隔代码
          cacheGroups: {
            vendors: { // 提取node_modules代码
              test: /node_modules/, // 只匹配node_modules里面的模块
              name: 'vendors', // 提取文件命名为vendors,js后缀和chunkhash会自动加
              minChunks: 1, // 只要使用一次就提取出来
              chunks: 'initial', // 只提取初始化就能获取到的模块,不管异步的
              minSize: 0, // 提取代码体积大于0就提取出来
              priority: 1, // 提取优先级为1
            },
            commons: { // 提取页面公共代码
              name: 'commons', // 提取文件命名为commons
              minChunks: 2, // 只要使用两次就提取出来
              chunks: 'initial', // 只提取初始化就能获取到的模块,不管异步的
              minSize: 0, // 提取代码体积大于0就提取出来
            }
          }
        }
    }
})

3.2 里面不能识别接口返回不是 items 的情况，需要额外配置 source: "${xxx}" xxx 你接口返回的数组 key，后续会修复次问题。

baidu / amis