[WIP] build: 构建产物调整, 使用 Bundless 的方式输出, 支持 tree shaking [BREAK CHANGE]

.eslintrc.js

@@ -43,7 +43,12 @@ module.exports = {
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 80,
+ arrowParens: 'always',
  proseWrap: 'never',
+ htmlWhitespaceSensitivity: 'css',
+ embeddedLanguageFormatting: 'auto',
+ singleAttributePerLine: false,
+ bracketSpacing: true,
  overrides: [
  { files: '.eslintrc', options: { parser: 'json' } },
  { files: '.prettierrc', options: { parser: 'json' } },
@@ -57,7 +62,7 @@ module.exports = {
  ],
  'import/no-duplicates': [2, { considerQueryString: true }],
  'import/no-deprecated': 1,
- 'import/no-cycle': 1,
+ 'import/no-cycle': 2,
  'import/order': [
  2,
  {

.fatherrc.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'father';
+import path from 'path';
+
+export default (name: string) => {
+ const alias = {
+ '@antv/s2-shared': path.resolve(process.cwd(), './src/shared'),
+ };
+
+ return defineConfig({
+ sourcemap: true,
+ alias,
+ define: {
+ 'process.env.NODE_ENV': JSON.stringify('production'),
+ },
+ esm: {
+ output: 'esm',
+ },
+ cjs: {
+ output: 'lib',
+ },
+ umd: {
+ alias: {
+ '@antv/s2': path.resolve(__dirname, 'packages/s2-core'),
+ },
+ name,
+ output: 'dist',
+ externals: {
+ '@antv/s2': 'S2',
+ antd: 'antd',
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ vue: 'Vue',
+ 'ant-design-vue': 'AntDesignVue',
+ },
+ },
+ });
+};

.github/workflows/auto-release.yml

@@ -54,6 +54,9 @@ jobs:
  - name: Install dependencies
  run: pnpm bootstrap:ci
 
+ - name: Build doctor
+ run: pnpm build:doctor
+
  - name: Build
  run: pnpm build
 

.github/workflows/compressed-size.yml

@@ -31,5 +31,5 @@ jobs:
  with:
  repo-token: "${{ secrets.GITHUB_TOKEN }}"
  pattern: "./packages/{s2-core,s2-react,s2-vue}/dist/**/*.{js,css}"
- build-script: "build:umd"
+ build-script: "build"
  clean-script: "clean"

.github/workflows/lint.yml

@@ -39,6 +39,9 @@ jobs:
  - name: Lint scripts, type, style and docs
  run: pnpm lint
 
+ - name: Build doctor
+ run: pnpm build:doctor
+
  - name: Build
  run: pnpm build
 

.gitignore

@@ -25,4 +25,7 @@ packages/s2-*/temp/
 packages/s2-*/coverage/
 packages/s2-*/stats.html
 
+# pre bundle
+packages/s2-*/src/shared
+
 .swc

README.en-US.md

@@ -30,7 +30,7 @@ A practical visualization library for tabular analysis.
 
 <p>
  <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
- <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+ <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/s2.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
  </a>
  <a href="https://github.com/antvis/S2/discussions" target="_blank">
  <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>

README.md

@@ -29,7 +29,7 @@
 
 <p>
  <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
- <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+ <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/s2.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
  </a>
  <a href="https://github.com/antvis/S2/discussions" target="_blank">
  <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>

build.config.base.mjs

@@ -0,0 +1,134 @@
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+export const getBaseConfig = () => {
+ const entry = './src/index.ts';
+
+ const OUT_DIR_NAME_MAP = {
+ es: 'esm',
+ cjs: 'lib',
+ umd: 'dist',
+ };
+
+ const format = process.env.FORMAT;
+ const isAnalysisMode = process.env.ANALYSIS;
+ const isDevMode = process.env.PLAYGROUND;
+ const outDir = OUT_DIR_NAME_MAP[format];
+ const isUMD = format === 'umd';
+ const isESM = format === 'es';
+
+ const define = {
+ 'process.env.NODE_ENV': JSON.stringify(
+ isDevMode ? 'development' : 'production',
+ ),
+ };
+
+ const output = {
+ dir: outDir,
+ entryFileNames: `[name]${isUMD ? '.min' : ''}.js`,
+ assetFileNames: `[name]${isUMD ? '.min' : ''}.[ext]`,
+ globals: {
+ vue: 'Vue',
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ '@antv/s2': 'S2',
+ '@antv/s2-react': 'S2React',
+ lodash: '_',
+ },
+ };
+
+ const resolve = {
+ mainFields: ['src', 'module', 'main'],
+ alias: [
+ {
+ find: 'lodash',
+ replacement: 'lodash-es',
+ },
+ ],
+ };
+
+ if (isDevMode) {
+ // 防止开发模式下直接加载 s2-core 中的主题 less
+ resolve.alias.push({
+ find: /^(.*)\/theme\/(.*)\.less$/,
+ replacement: '$1/theme/$2.less?inline',
+ });
+ }
+
+ const getViteConfig = (
+ { port, libName, plugins } = { port: 3001, plugins: [] },
+ ) => {
+ return {
+ server: {
+ port,
+ hmr: true,
+ },
+
+ resolve,
+
+ define: {
+ 'process.env.NODE_ENV': JSON.stringify(
+ isDevMode ? 'development' : 'production',
+ ),
+ },
+
+ plugins: [
+ peerDepsExternal(),
+ !isDevMode && viteCommonjs(),
+ isAnalysisMode &&
+ visualizer({
+ open: true,
+ gzipSize: true,
+ brotliSize: true,
+ }),
+ ...plugins,
+ ].filter(Boolean),
+
+ css: {
+ preprocessorOptions: {
+ less: {
+ javascriptEnabled: true,
+ },
+ },
+ modules: {
+ /**
+ * 样式小驼峰转化
+ * css: goods-list => tsx: goodsList
+ */
+ localsConvention: 'camelCase',
+ },
+ },
+
+ build: {
+ target: 'es2015',
+ minify: isUMD ? 'esbuild' : false,
+ sourcemap: true,
+ lib: {
+ name: libName,
+ entry,
+ formats: [format],
+ },
+ outDir,
+ rollupOptions: {
+ output,
+ },
+ },
+ };
+ };
+
+ return {
+ entry,
+ getViteConfig,
+ define,
+ format,
+ resolve,
+ isAnalysisMode,
+ outDir,
+ output,
+ OUT_DIR_NAME_MAP,
+ isDevMode,
+ isUMD,
+ isESM,
+ };
+};

package.json

@@ -21,6 +21,7 @@
  "url": "https://github.com/antvis/S2.git"
  },
  "license": "MIT",
+ "files": [],
  "scripts": {
  "preinstall": "npx only-allow pnpm",
  "bootstrap": "pnpm install",
@@ -55,6 +56,7 @@
  "build:umd": "pnpm -r --filter './packages/*' --stream build:umd",
  "build:size-limit": "pnpm -r --filter './packages/*' --stream build:size-limit",
  "build:size-limit-json": "pnpm -r --filter './packages/*' --stream build:size-limit-json",
+ "build:doctor": "father doctor",
  "release": "pnpm -r --filter !@antv/s2-shared --filter !@antv/s2-site --filter !@antv/s2-react-components --workspace-concurrency=1 exec npx --no-install semantic-release",
  "release:preview": "pnpm release --dry-run --no-ci",
  "release:bump-version": "node ./scripts/bump-version.js",
@@ -149,6 +151,7 @@
  "eslint-plugin-react": "^7.34.2",
  "eslint-plugin-react-hooks": "^4.6.2",
  "eslint-plugin-vue": "^9.17.0",
+ "father": "^4.4.4",
  "gh-pages": "^3.2.3",
  "glob": "^10.3.10",
  "husky": "^8.0.3",

packages/s2-core/.fatherrc.ts

@@ -0,0 +1,3 @@
+import fatherConfig from '../../.fatherrc';
+
+export default fatherConfig('S2');

packages/s2-core/README.md

@@ -29,7 +29,7 @@
 
 <p>
  <a href="https://www.npmjs.com/package/@antv/s2" target="_blank">
- <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/index.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
+ <img src="https://img.badgesize.io/https:/unpkg.com/@antv/s2@next/dist/s2.min.js?label=gzip%20size&compression=gzip" alt="npm bundle size" />
  </a>
  <a href="https://github.com/antvis/S2/discussions" target="_blank">
  <img src="https://img.shields.io/badge/discussions-on%20github-blue" alt="GitHub discussions"/>
@@ -73,9 +73,9 @@ S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数
 ## 📦 安装
 
 ```bash
-$ pnpm add @antv/s2
-# yarn add @antv/s2
-# npm install @antv/s2 --save
+$ pnpm add @antv/s2@next
+# yarn add @antv/s2@next
+# npm install @antv/s2@next --save
 ```
 
 ## 🔨 使用

packages/s2-core/package.json

@@ -27,7 +27,7 @@
  "dist/*"
  ],
  "main": "lib/index.js",
- "unpkg": "dist/index.min.js",
+ "unpkg": "dist/s2.min.js",
  "module": "esm/index.js",
  "types": "esm/index.d.ts",
  "directories": {
@@ -41,7 +41,7 @@
  "README.md"
  ],
  "scripts": {
- "build": "npm-run-all clean --parallel build:umd build:cjs build:esm build:dts",
+ "build": "father build",
  "build:analysis": "cross-env FORMAT=esm ANALYSIS=true rollup -c rollup.config.mjs",
  "build:cjs": "cross-env FORMAT=cjs rollup -c rollup.config.mjs",
  "build:dts": "run-s dts:*",
@@ -90,12 +90,12 @@
  },
  "size-limit": [
  {
- "path": "./dist/index.min.js",
+ "path": "./dist/s2.min.js",
  "import": "{ createComponent }",
- "limit": "200 kB"
+ "limit": "230 kB"
  },
  {
- "path": "./dist/style.min.css",
+ "path": "./dist/s2.min.css",
  "limit": "5 kB"
  }
  ],