I developed “rt-link-loader”. This is small helper procedure for webpack. I wanted to get css loader not to syntax check at compile time. I am going to process css on server side. My css file is not valid on compile time. I tried some webpack loaders, but nothing to resolve my requirements. I decided to write loader for me. I thought that I understand webpack’s compile process well too.
Initially I wanted a code not to check syntax css contents, but I would like to get CSSStyleSheet object for my javascript code. It did not take times to have the procedure to produce to get stylesheet object. Then I wrote test code for the loader. I refer a webpack loader project. I used jest library for the test according to the loader project. It was first time to use the jest. I understand that the jest scan project directory and get a pattern sources to test. It did not take some times for me to understand. It tooks about 6 hours to setup webpack loader test configuration. To configure webpack in jest, the jest use jsdom and memfs npm package. Both package are powerful for testing but I have to read some code to test my loader. The memfs package create virtural file system on memory, you do not have to prepare the file on your storage. It may be nice but all settings have to be with javascript string. The test code would be independent from operating system but It may be not understandable well for some developers.
After I read some code and documents, I could have test code for runtime-link-loader project. When I tested the project, I realized jsdom did not initialize CSSStyleSheet href property. When I compile my project with this loader, the browser will be filled CSSStyleSheet ref. I worked around to set CSSStyleSheet ref in test code. I do not know that the workaround is correct test way. Anyway I had the “rt-link-loader”.
Through this development, I could understands following technologies.
- webpack loader processing
- jest test procedure
- jsdom
- memfs
You can see this project on github.
rt-link-loader is available from npm repository.