🎉 S2 2.0 版本开始内测啦 !!! #1933

lijinke666 · 2022-11-22T02:50:57Z

lijinke666
Nov 22, 2022
Maintainer

了解 2.0 版本新特性 - S2 2.0 表格看数新纪元和 roadmap

🏠 官网地址变化

原官网 https://s2.antv.vision 和 https://antv-s2.gitee.io 不再维护和使用，请使用最新的文档，确保您看到的不是过时的文档。

原 v1 官网迁移至 https://s2-v1.antv.antgroup.com.
原 https://s2.antv.antgroup.com 将作为 v2 默认官网。

🏷️ npm dist-tag 变化

什么是 dist-tag ?

S2 2.0 版本目前处于内测阶段, 部分 API 可能会根据合理性随时改动。

npm 的 dist-tag 对应关系如下：

@antv/s2@next 对应 2.x 版本
@antv/s2@latest 对应 1.x 版本

📅 正式版本发布时间

目前 next 会持续内测一段时间，https://s2.antv.antgroup.com 会作为相应的文档网站。

在此期间，会持续根据用户的反馈进行 Bug fix 和代码调整，在 @antv/s2@next 版本稳定后，会发布正式版本, latest 将默认指向 2.x 版本，去除 next 标识。

🗓️ v1 版本维护期

目前 v1 版本会继续维护，针对 BUG 发布 Patch 版本修复，但不再接收新的 Feature Request 和 Feature Pull Request，欢迎 Bug Fix Pull Request, 截止日期为 2024 年年底。

📦 安装

Package	Version	Size	Download
@antv/s2
@antv/s2-react
@antv/s2-vue

# 基础版本
yarn add @antv/s2@next --save

# React 版本
yarn add @antv/s2-react@next antd @ant-design/icons --save

# Vue3 版本
yarn add @antv/s2-vue@next [email protected] --save

`@antv/s2-react` 支持 React 18 和 Ant Design 5.0

@antv/s2-react 的 2.x 版本适配了 React 18, 并兼容 React 16 和 17, 分析组件升级到了 [email protected].

Ant Design 多版本共存

对于项目使用的是 [email protected], 或者所依赖的其他库依赖 [email protected], 由于种种历史原因无法升级到 [email protected] 的情况，可以通过多版本共存的方式来临时过渡。

// $ npm install --save antd-v5@npm:antd@5
{
  "antd": "4.x",
  "antd-v5": "npm:antd@5"
}

通过 Webpack 内置插件 NormalModuleReplacementPlugin 或者 自定义 Webpack 插件 的方式指定 @antv/s2-react 使用 antd-v5, 无需做任何修改，项目中其他依赖将继续使用 [email protected].

:::warning{title="注意"}
其他打包工具（如 Vite) 或者基于 Webpack 封装的库或框架（如 father, umi) 同理，请自行搜索，这里不再赘述。
需要注意的是：这种方式为临时过渡解决方案，从长远来看，Ant Design v4 版本已于 2023 年年底停止维护，建议尽快升级至 [email protected].
:::

自定义 Webpack 插件参考：

class AntdV5AliasPlugin {
  apply(compiler) {
    compiler.hooks.normalModuleFactory.tap("AntdV5AliasPlugin", (nmf) => {
      nmf.hooks.beforeResolve.tapAsync("AntdV5AliasPlugin", (resolveData, callback) => {
        if (resolveData.contextInfo?.issuer?.includes('node_modules/@antv/s2-react')) {
          // 匹配："antd" 和 "antd/es/locale/xxx"
          if (/antd(\/*)?/.test(resolveData.request)) {
            // 替换为："antd-v5" 和 "antd-v5/es/locale/xxx"
            resolveData.request = resolveData.request.replace(/antd(\/*)?/,'antd-v5$1')
          }
        }

        callback();
      });
    });
  }
}