Migrate demo from Webpack to Vite

[kingyue737]

Motivation

Vue CLI has not been actively maintained for over three years. As Vite is now the officially recommended tooling for Vue 3 projects, migrating the demo to Vite provides a more relevant and modern example for most Vue 3 users. This change also improves the developer experience for contributors.

Vue ECharts currently uses Rollup and esbuild as the build tool, which is also the underlying bundler for Vite. Migrating to Vite significantly reduces the number of development dependencies (the pnpm-lock.yaml is >4000 lines shorter). Further optimizations will be made in upcoming PRs by updating and deduplicating dependencies.

Major Changes

• Replaced babel-loader with vite-plugin-legacy

  Code transformation now happens only in production builds, improving dev performance.

• Replaced postcss-loader and postcss-nested with postcss-preset-env

  The browserslist config is now the single source of truth for both JavaScript transpilation/polyfills and CSS compatibility. Let the browserslistrc decide whether we need postcss-nested (currently we do).

• Removed raw-loader

  This functionality is built into Vite.

• Replaced fork-ts-checker-webpack-plugin with vue-tsc

  Not typecheck during HMR. I think IDE has done it for us, and typecheck before build is sufficient. Furthermore, the demo is almost a JS project.

• Moved the demo folder out of the src directory

  Note: The Vercel deployment path may need to be updated accordingly (demo/dist).

[vercel]

@kingyue737 is attempting to deploy a commit to the EFE Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vue-echarts	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 24, 2025 3:18pm

[kingyue737]

Hey @vercel, the build output is in demo/dist instead of demo. Can you modify it for me?

[Justineo]

Do we still need plugin-legacy and browserslist? I think we can just support green browsers.

[kingyue737]

Do we still need plugin-legacy?

Our demo doesn't use any bleeding-edge runtime features, and most modern browsers do not need polyfill. We can remove Babel.

I think we can just support green browsers.

What do green browsers refer to? The default build target of Vite is ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']. Should we use the default target or esnext/es2024/es2023?

Do we still need browserslist?

If green browsers mean, for example, > 1% of the audience worldwide or last 3 versions, etc., browerslist is still useful.

[Justineo]

Hey @vercel, the build output is in demo/dist instead of demo. Can you modify it for me?

Can you try adding a vercel.json and set the outputDirectory?

[Justineo]

Thank you! BTW I believe you can create new branches within this repo itself instead of using a fork, so that Vercel won’t require deploy approvals from external fork.