The main problem that existed was about 500 items thrown on the window object. This allows you to access them any place you need. It also makes the window the navigation tool for modules and components. The project becomes more coupled, and you don’t know who is using them.
Files are structured using the module architecture but without using
angular.module. Files are divided into folder by name like HomePage. The HomePage folder contains its controller, style, and view.
The first thing that came to mind was refactoring the whole app to use webpack, modules, babel, and es6. After researching, it is possible to do this without any refactoring of the codebase. But, there are many problems to solve before I start adding webpack to the project.
<img src="https://www.pexels.com/photo/technology-computer-desktop-source-code-113850/" alt="https://www.pexels.com/photo/technology-computer-desktop-source-code-113850/" /> https://www.pexels.com/photo/technology-computer-desktop-source-code-113850/
Before I started moving to using webpack, I needed to upgrade the Node version that webpack v3 works with. But, Grunt is using deprecated things — so when I updated the Node version, nothing worked! So I started to fix the errors one by one to make sure upgrading was possible.
First, an error accrued on old
node-sass. It’s not supported anymore for this version of Node. To fix this, I upgraded
grunt-sass from ‘0.18.1’ to ‘2.0.0’, then upgraded
node-sass to be ‘4.7.2’.
Secondly, trying to upgrade grunt from ‘0.4.5’ to ‘1.0.0’ didn’t work, because the grunt plugins need firstname.lastname@example.org as peer dependency. So I stuck with 0.4.5 version.
I had to fix errors with express Node server, because the bodyParser constructor is deprecated and needs to changed. I changed from
grunt-expressbecause it is deprecated on the node-inspector new version.
I added webpack to the project using
npm install webpack--save-dev. Then I added the `webpack.config.json` file.
When I started this step, I got stuck because the project structure has no entry point. The whole project depends on one source which is the window. Webpack needs an entry point to start with and an output point to end with.
To solve this, I created an entry point. I set all the needed files on it and named it the same name on GruntJS config to concatenate it as the old Build did. But this was going to take a long time, because about 550 items were included in index.html.
To solve this problem, I used a RegExp
/”(.*?)"/ig and replaced the values by
require(src)to get the sources from the src attribute and convert it to
require(src). I pasted it to the
entry.js on the same order as the old index.html.
After this, the result was a significant JS file containing all scripts. But nothing worked! After investigating what was happening, it seemed that webpack was working by default as modules. If there are exports or export default on the same file, nothing will be exported to the outside even if you include it using require js.
Before searching for a way to solve this, I start adding module.exports to all files needing to be exported — before clearly understanding how webpack works! After two days of working, I found that there is something called loaders which solve the problem.
By adding this to
webpack.config.js, all the files were now available as the old behavior!
And everything was now working.
After I made the project works with Grunt, I needed to make sure both webpack and Grunt worked together. So I made tests to make sure I didn’t miss anything.
To make this happen, I create a new file called
inject-HTML.files.json. This file contains all source files to use with
usemenPrepare on Grunt and webpack to create the entries as multiple items as arrays taken from the inject-HTML files JSON.
Finally, using the npm packages is a game changer. The goal was to make the codebase easy for other developers. Also, we proved that it’s possible to upgrade your system wisely even if your code base is terrible.
Rewriting the whole app is a disaster, because you are potentially wasting years of hard work. Instead, try to make your codebase more readable, maintainable, and modular. When the old code needs refactoring, you can do it step by step.
Don’t get stuck with your old codebase and say you can’t do anything to it. Try to make changes by yourself — live with new things, new updates, and new technologies that will make you happy.
This is my first time writing for people! If you liked this article, please share it with other people around you.
I am writing at blog.yaabed.com. If you enjoyed this article please make sure to share it with other people. And don’t forget to hit the follow button for more articles like this, also follow me on twitter.
I recommend also try to upgrade to new webpack version 4
From Grunt and Bower to Webpack, Babel and Yarn — Migrating a legacy front-end build system The build system that I had inherited for the International Cancer Genome Consortium’s Data Portal was fairly modern…medium.com