Photo by Roberto Nickson on Unsplash
In the company I work at, our frontend codebase consists of couple of thousands files. The framework is React 16 and the bundler used was webpack 4.
Reasons
We wanted to change the bundler to vite for two main reasons:
- DX - development experience - Faster boot time from starting the development server to seeing the project on the browser and start coding.
- DX - Faster production build time for qa envionments.
Process
So we took the opportunity in the company hosted hacketon and built a POC that worked. The POC was mapped after that to separated individual tasks.
- This to tackle each migration step more cleanly without disrupting existing features development.
- Have the developers and interested parties participate in the CRs and give their takes and experience.
Steps
This article summarize the issues that rose and how they were handled.
- Converting couple thousands Js/Ts files that contains JSX content to jsx extension
- Js Errors - Using variables before declaration
- lingui swc plugin replacement for babel macros - does not work for now on
.js
files - Third party libraries unconventional import - react-d3-tree
- Css mixin implicit import
- Unsupported js decorator used in .js files
- Need for async/await transpilation which use bluebird cancelable feature
- Third party node modules that import sub third party node modules needs to prebundle explicitly
- Unconventional node modules import - "../../../node_modules/date-fns"
- Code that use
global
,process
and other node environment variables needs polyfill or mock - Code that use
require
instead ofimport
- webpack only syntax for hmr needs to be converted to vite syntax
- Webpack multiple import statement needs to be converted to vite supported syntax
- Webpack raw loader needs to be converted to vite raw loading
- Converting
index.html
dynamic generation instead to work also with vite - Mock process.cwd for react-markdown vfile
Top comments (0)