Multi-pages Tpl files and Webpack entries automatic generates solution
Our cms is build up as a multiple pages application.
For the frontend our project using webpack multi entries&multi outputs.eg.
For the backend we using egg.js view rendering.eg.
It’s almost a perfect and a stable structure but you know,we do have some problems.
- Everytime we make a new page,we need to make a new tpl files.
- Everytime we make a new page,we need to push a new entry into the entryConfig.
- we need to manipulate the tpl file every time we make some changes to clear the cache of the js libray.
So here we gonna resolve the problems metioned above.
The first thing is to seperate the business tpl files from base tpl files.why?As we wanna the business tpl files to be generated automatically,we don’t wanna push these files to the git storage.All we need to care are the base tpl files.
Our base tpl files including:
1.base.tpl (for importing the base js library)
2.header.tpl and left_menu.tpl (for the basic layout)
4.user_data.tpl (it’s gonna be replaced by cookies sooner or later)
5.template.tpl (template for generating other business tpl files),here’s the structure of it
We put all the ** base tpl files** in the templates fold in the root directory.
Why dont’ we put’em under the like app/baseView files and import it in a relative path? like below
check here you’ll get the answer,cause Nunjuck can even not support relative path
here we use HtmlWebpackPlugin to generate the file,basing on the template.tpl we create files according to the key of entryConfig So here we got all our business files.
What if in some business files we need to import some extra js library?
we define a extraScriptMap here,like the code show below,app_user need import firebasejs,so we can concat it by the getScripts function.
besides the business file we also need to insert the base tpl files into the app/view folder.
using glob we can find out all the files under templates folder.
As same as the buiness part , we push it into a HtmlWebpackPlugin and finally they are all insert into the app/view folder.
Till here , we solve the problem 1. For the problem 3 we just need to add a version or timestamp params after the script path.
- entryConfig should be generate automatically,as same as the solution of tpl files,we just use glob to fetch’em out.
- userData tpl for carrying use data is not reasonable,will replace it with cookies.
- header tpl and left menu should not be refresh every single time,for user we wanna see something instantly,so I’m thinking using puppeteer for ssr caching.
- 版权声明：本博客所有文章均采用 BY-NC-SA 许可协议，转载请注明出处！