feat(vite): 支持在viet >= 5 版本中使用

Author: duenyang

.gitignore

@@ -26,3 +26,5 @@ lib
 es
 esm
 cjs
+plugins/*.js
+plugins/*.js.map

README-zh_CN.md

@@ -56,6 +56,8 @@ import 'tdesign-web-components/lib/style/index.css'
 document.querySelector('#app').innerHTML = `<t-button>Hello TDesign</t-button>`
 ```
 
+更多使用方式请点击 👉🏻 [快速开始](./site/docs/getting-started.md)
+
 npm package 中提供了多种构建产物，可以阅读 [这里](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) 了解不同目录下产物的差别。
 
 # 快速体验

README.md

@@ -54,6 +54,8 @@ import 'tdesign-web-components/lib/style/index.css'
 document.querySelector('#app').innerHTML = `<t-button>Hello TDesign</t-button>`
 ```
 
+More ways to use please click 👉🏻 [getting-started](./site/docs/getting-started.md)
+
 The package of tdesign-web-components provides kinds of bundles, read [the documentation](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) for the detail of differences between bundles.
 
 # Quick Start

plugins/vite-plugin-less-compiler.ts

@@ -0,0 +1,56 @@
+import fs from 'fs';
+import less from 'less';
+import MagicString from 'magic-string';
+
+const lessToCss = async (id: string, lessOptions: Less.Options): Promise<string> => {
+  const source = fs.readFileSync(id, 'utf-8');
+  const output = await (less as any).render(source, {
+    ...lessOptions,
+    filename: id,
+  });
+  return (output as Less.RenderOutput).css || '';
+};
+
+export default function lessCompilerPlugin(
+  options: {
+    include?: RegExp;
+    exclude?: RegExp;
+    lessOptions?: Less.Options;
+  } = {},
+) {
+  const { include = /tdesign-web-components.*\.js/, exclude, lessOptions = {} } = options;
+
+  return {
+    name: 'vite-plugin-less-compiler',
+    async transform(code, id) {
+      if (exclude && exclude.test(id)) {
+        return null;
+      }
+
+      if (!include.test(id)) {
+        return null;
+      }
+
+      const magicString = new MagicString(code);
+      const ast = this.parse(code);
+
+      for (const node of ast.body) {
+        const { type = '', source = {}, specifiers } = node;
+        if (type !== 'ImportDeclaration' || !source.value.match(/^.*\.less$/)) {
+          continue;
+        }
+        if (!specifiers && specifiers?.[0]?.type !== 'ImportDefaultSpecifier') {
+          continue;
+        }
+        const [{ local = {} }] = specifiers;
+        // 这里只能使用 for loop
+        // eslint-disable-next-line no-await-in-loop
+        const css = await lessToCss(source.value, lessOptions);
+        magicString.overwrite(node.start, node.end, `const ${local.name} = \`${css}\``);
+      }
+      return {
+        code: magicString.toString(),
+      };
+    },
+  };
+}

script/rollup.config.js

@@ -20,12 +20,15 @@ import pkg from '../package.json';
 const name = 'TDesign Web Components';
 const externalDeps = Object.keys(pkg.dependencies || {});
 const externalPeerDeps = Object.keys(pkg.peerDependencies || {});
+const buildPlugins = ['vite-plugin-less-compiler'];
+
 const banner = `/**
  * ${name} v${pkg.version}
  * (c) ${new Date().getFullYear()} ${pkg.author}
  * @license ${pkg.license}
  */
 `;
+
 const input = 'src/index-lib.ts';
 const inputList = [
   'src/**/*.ts',
@@ -218,4 +221,26 @@ const umdMinConfig = {
   },
 };
 
-export default [cssConfig, umdCssConfig, libConfig, cjsConfig, umdConfig, umdMinConfig, esmConfig];
+const pluginConfig = buildPlugins.map((plugin) => ({
+  input: `plugin/${plugin}.ts`,
+  external: ['less', 'fs'],
+  plugins: [
+    nodeResolve(),
+    commonjs(),
+    esbuild({
+      include: /\.[jt]s$/,
+      target: 'esnext',
+      minify: false,
+      loader: 'ts',
+      tsconfig: resolve(__dirname, '../tsconfig.build.json'),
+    }),
+  ],
+  output: {
+    banner,
+    format: 'esm',
+    sourcemap: false,
+    file: `plugin/${plugin}.js`,
+  },
+}));
+
+export default [cssConfig, umdCssConfig, libConfig, cjsConfig, umdConfig, umdMinConfig, esmConfig, ...pluginConfig];

site/docs/getting-started.md

@@ -45,6 +45,19 @@ export default defineConfig({
 })
 ```
 
+> 注意：在`vite >= 5.x` 版本中，需要使用下面的vite插件，其它版本可跳过
+
+```js
+import lessCompilerPlugin from 'tdesign-web-components/plugins/vite-plugin-less-compiler';
+
+// vite.config.ts
+export default defineConfig({
+  plugins: [lessCompilerPlugin({
+    lessOptions: {} // less 相关参数
+  })]
+})
+```
+
 如果使用webpack打包工具，需要在`babel`中设置`jsx`的解析逻辑：
 
 ```javascript