基于quarkc的组件发布到npm

[a847244052]

是否有考虑过维护一个所有基于quarkc的组件讨论共享社区，最大程度复用已经造过的轮子，也能增加曝光率。

[a847244052]

也就是说把优秀案例这里做大做强

[xsf0105]

@a847244052 挺不错的建议～已收到反馈

[AliceCooper214]

搞个awesome-quark吧，想找几个案例学习一下。

[sanqi-med]

@AliceCooper214 README里面有优秀案例参考

[xsf0105]

@AliceCooper214 https://github.com/hellof2e/quark-core#%E4%BC%98%E7%A7%80%E6%A1%88%E4%BE%8B

[yoyo837]

可行 分享我的配置

/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
import { defineConfig } from 'rollup';
import fs from 'fs';
import path from 'path';
import url from 'url';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { babel } from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';
import filesize from 'rollup-plugin-filesize';
import { visualizer } from 'rollup-plugin-visualizer';
import alias from '@rollup/plugin-alias';
import replace from '@rollup/plugin-replace';
import postcss from '@ydmap/rollup-plugin-postcss';
import UnoCSS from 'unocss/vite';
// @ydmap/web-tools 不是 esm 模块
// eslint-disable-next-line import/extensions
import getBabelConfig from '@ydmap/web-tools/lib/babel-config.js';

const isAnaLyze = process.env.ANALYZE === '1';

const __filename = url.fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const extensions = ['.js', '.ts', '.tsx'];
const packageSrcRoot = path.join(__dirname, './src');
const componentNames = [
  ...fs
    // 获取所有文件夹及文件
    .readdirSync(packageSrcRoot, { withFileTypes: true })
    // 筛选出所有文件夹
    .filter(p => p.isDirectory() && p.name !== 'utils')
    // 数据预处理
    .map(p => ({
      path: `${p.name}/index`,
      name: p.name,
    })),
  { path: 'index', name: 'index' },
];

const getPlugins = format => {
  const arr = [
    // unocss/vite 目前兼容 rollup
    UnoCSS({
      mode: 'shadow-dom',
    }),
    replace({
      preventAssignment: true,
      values: {
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      },
    }),
    alias({
      entries: [{ find: 'tslib', replacement: 'tslib/tslib.es6.js' }],
    }),
    // cssVariable({
    //   variableMap,
    //   prefix: 'quark-',
    // }),
    // It will also automatically use local PostCSS config files.
    postcss({
      extract: false,
      inject: false,
      extensions: ['.css', '.scss', 'less'],
      // cssnano 压缩
      minimize: true,
    }),
    typescript(),
    commonjs(),
    resolve({
      extensions,
      // modulesOnly: true, // 为true 表示不对第三方库进行打包
    }),
    babel(
      format === 'umd'
        ? {
            exclude: 'node_modules/**',
            babelHelpers: 'bundled',
            extensions,
            ...getBabelConfig({
              ts: true,
              esmodule: true,
              corejs: 3,
              babelHelpers: 'bundled',
            }),
          }
        : {
            exclude: 'node_modules/**',
            babelHelpers: 'runtime',
            extensions,
            ...getBabelConfig({
              ts: true,
              esmodule: true,
              corejs: 3,
            }),
          }
    ),
  ];
  if (format === 'es') {
    arr.push(filesize());
  }
  arr.push(terser());
  if (isAnaLyze && format === 'umd') {
    arr.push(
      visualizer({
        open: true,
      })
    );
  }
  return arr;
};

export default defineConfig([
  {
    input: componentNames.reduce((result, p) => {
      result[p.path] = `${packageSrcRoot}/${p.name}`;
      return result;
    }, {}),
    output: {
      dir: 'lib',
      chunkFileNames: '[name].js',
      format: 'es',
    },
    treeshake: false,
    plugins: getPlugins('es'),
  },
  {
    input: './src/index.ts',
    output: {
      file: './umd/index.min.js',
      format: 'umd',
      name: 'YdmapAwc',
    },
    plugins: getPlugins('umd'),
  },
]);

[yoyo837]

我的配置 umd 产物包含 polyfill, lib 不包含。配置看需要调整。