webpack-mvc 传统多页面组件化开发详解

2023-08-23 19:47:04 155

最近有一个项目，还是使用的传统MVC模式开发，完全基于jQuery，使用了基于java模板引擎velocity，页面中嵌入了大量java语法，使得前后端分离不彻底，工程打包上线苦不堪言，为实现后端为服务化，前端也得彻底从后端中分离出来。

方案:webpack4+ejs

webpack

打包所有的资源
打包所以的脚本
打包所以的图片
打包所以的样式
打包所以的表

ejs

高效的JavaScript模板引擎，代替velocity

webpack配置

基本插件

@babel/core，@babel/preset-env，babel-loader

es6语法转译

css-loader，style-loader

编译打包css

node-sass，sass-loader

解析sass

postcss-loader，autoprefixer

自动给样式增加浏览器前缀

mini-css-extract-plugin

将css从js中抽离出来为单独文件

optimize-css-assets-webpack-plugin

压缩css

uglifyjs-webpack-plugin

压缩js

ejs-loader

解析ejs模板文件

html-webpack-plugin

生成html文件

rimraf

删除文件、文件夹

watch

监听文件变化

上面是一些要用的插件，具体用法不累述。

入口文件

入口文件长这样(可单一入口，也可多入口)：

//多入口
entry:{
pageA:'./src/pageA/index.js',
pageB:'./src/pageB/index.js',
'pageC/login':'./src/pageC/login/login.js'
}

出口文件：

output:{
filename:'[name].js',
path:path.resolve(__dirname,'../dist'),
}

filename值中的[name]对应入文件的key值，/分割文件夹。

最后就会在dist文件夹下生产文件：

dist/pageA/index.js
dist/pageB/index.js
dist/pageC/login/login.js

既然是多页面开发，就要有多个入口，每个页面都要有自己对应的js入口，这样我们只需要遍历html文件，然后找到对应的js，处理成entry对象即可

constpath=require('path')
constglob=require('glob')

constpages=(entries=>{
letentry={},htmlArr=[]
//格式化生成入口
entries.forEach((file)=>{
//...../webpack-mvc/src/page/pageA/index.html
constfileSplit=file.split('/')
constlength=fileSplit.length

//页面入口pageA/index.html
constfilePath=fileSplit.slice(length-2,length).join('/')

//根据html路径找到对应的js路径，js可以和html放在同一文件夹，也可单独放在一个文件夹内，只要能找到
constjsPath=path.resolve(__dirname,`../src/page/${filePath.split('.')[0]}.js`)

//_main.ejs页面主题框架，html组件化
pageHtml=path.resolve(__dirname,'../src/_main.ejs')

if(!fs.existsSync(jsPath)){
return;
}
entry['js/'+filePath.split('.')[0]]=jsPath//加js/即表示将打包后的js单独放在一个文件夹内
})
returnentry
})(glob(path.resolve(__dirname,'../src/page/*/*.html'),{sync:true}))

上面只是本例的目录结构，根据不同的目录结构，更改路径即可，目的就是得到‘js打包生成路径':‘入口js'映射关系。

html（ejs）组件化

页面框架

1、主体框架src/_main.ejs








<%=htmlWebpackPlugin.options.title%>




<%=require('@/common/components/header/header.ejs')()%>

<%=htmlWebpackPlugin.options.content%>

<%=require('@/common/components/footer/footer.ejs')()%>

2、公共页面

header、footer每个页面都包含，所以放入主体框架页面内

3、页面各自部分

各个页面只需要写自己页面的html内容即可，并且还可以引入公共组件ejs

//pageA/index.html

pageAindex


//pageA/login.html

<%=require('@/common/components/form.ejs')()%>
pageAlogin

网上查了很多资料，没找到可以实现上面步骤的方法，基本都是要在每个页面的js里去写一些ejs语法，做不到我想要的只关注此页面本身的内容。

替换_main.ejs，生成临时模板

我的解决方法是通过node读取页面html文件，然后替换_main.ejs中的content部分，生成一个临时ejs模板文件，然后通过插件html-webpack-plugin生成最终页面html文件

functioncreateTemplate(file,jsPath,entry){
letobj={
title:'',
template:'',
filename:'',
chunks:[jsPath]
}
//_main.ejs页面主题框架，html组件化
letmainHtml=path.resolve(__dirname,'../src/_main.ejs')
letfileSplit=file.split('/')
//html生成路径
letfilename=fileSplit.slice(fileSplit.length-2).join('/').split('.')[0];

letstrContent=fs.readFileSync(file,'utf-8')
letstrMain=fs.readFileSync(mainHtml,'utf-8')
lettemplate=fileSplit.slice(fileSplit.length-2).join('_').split('.')[0];
strMain=strMain.replace(/<%=htmlWebpackPlugin.options.content%>/,strContent)
fs.writeFileSync(path.resolve(__dirname,`../src/template/template_${template}.ejs`),strMain)

obj.template=path.resolve(__dirname,`../src/template/template_${template}.ejs`)
obj.filename=filename
returnobj
}

有了上面方法的思路，我们可以在各自页面中做更多的操作

页面title

//pageA/index.html

<%=title页面A%>

pageAindex

页面直接引入js，只压缩不打包

//pageA/index.html

<%=title页面A%>


pageAindex

这里引入js的路径是最终文件压缩生成的位置（dist目录下），因为开发模式和生产环境路径有所不同，所以等下在代码中要区别不同环境去替换不同的路径。

页面引入ejs组件

//pageA/index.html

<%=title页面A%>


<%=require('@/common/components/form.ejs')()%>
pageAindex

page.config.js

constfs=require('fs')
constpath=require('path')
constglob=require('glob')

if(process.env.NODE_ENV==='development'){
constrimraf=require('rimraf')
rimraf.sync(path.resolve(__dirname,'../src/template/*'),fs,functioncb(){
console.log('template目录已清空')
})
}

constpages=(entries=>{
letentry={},htmlArr=[]
//格式化生成入口
entries.forEach((file)=>{
//...../webpack-mvc/src/page/pageA/index.html
letfileSplit=file.split('/')
letlength=fileSplit.length

//页面入口page/pageA/index.html
letfilePath=fileSplit.slice(length-3,length).join('/')

//根据html路径找到对应的js路径，js可以和html放在同一文件夹，也可单独放在一个文件夹内，只要能找到
letjsFile=path.resolve(__dirname,`../src/${filePath.split('.')[0]}.js`)
if(!fs.existsSync(jsFile)){
return;
}
letjsPath='js/'+filePath.split('.')[0]
entry['js/'+filePath.split('.')[0]]=jsFile
htmlArr.push(createTemplate(file,jsPath,entry))
})
return{entry,htmlArr}
})(glob(path.resolve(__dirname,'../src/page/*/*.html'),{sync:true}))

functionscriptLinkEntry(entry,file){
//file:/js/common/js/util.js
letfileNew='./src/'+file.split('/').slice(2).join('/')
letfileSplit=fileNew.split('/')
entry['js/common/'+fileSplit.slice(fileSplit.length-1).join('/').replace('.js','')]=fileNew
}

functionreplaceScript(content,entry){
letscriptLink=content.match(/<\/script>/g)
if(scriptLink){
scriptLink.forEach(item=>{
//src:/js/common/js/util.js
letsrc=item.match(/src=["|'](.*)["|']/)[1];
scriptLinkEntry(entry,src)
letscriptlinNew=src
//生产环境根据页面路径找到js的相对路径，开发环境/js/指向dist目录下js文件夹
if(process.env.NODE_ENV==='production'){
letsrcSplit=src.split('/')
srcSplit.splice(3,1)//['','js','common','util.js']
scriptLinkNew=`..${srcSplit.join('/')}`//../js/common/util.js
}
content=content.replace(src,scriptLinkNew)
})
}
returncontent;
}

functioncreateTemplate(file,jsPath,entry){
letobj={
title:'',
template:'',
filename:'',
chunks:[jsPath]
}
//_main.ejs页面主题框架，html组件化
letmainHtml=path.resolve(__dirname,'../src/_main.ejs')
letfileSplit=file.split('/')
//html生成路径
letfilename=fileSplit.slice(fileSplit.length-2).join('/').split('.')[0];

letstrContent=fs.readFileSync(file,'utf-8')
letstrMain=fs.readFileSync(mainHtml,'utf-8')
lettemplate=fileSplit.slice(fileSplit.length-2).join('_').split('.')[0]

//提取页面title
lettitleMatch=strContent.match(/<%=title(.*)%>/)
lettitle=''
if(titleMatch){
title=titleMatch[1]
strContent=strContent.replace(/<%=title(.*)%>/,'')
}

//提取页面与主体框架中引入的静态js文件，将其放入入口文件中经行压缩，并适应开发与生产路径
strMain=replaceScript(strMain,entry)
strContent=replaceScript(strContent,entry)

strMain=strMain.replace(/<%=htmlWebpackPlugin.options.content%>/,strContent)
fs.writeFileSync(path.resolve(__dirname,`../src/template/template_${template}.ejs`),strMain)

obj.title=title
obj.template=path.resolve(__dirname,`../src/template/template_${template}.ejs`)
obj.filename=filename
returnobj
}

module.exports=pages;

热刷新

此时热刷新只能监听到js和css的改变，因为模板是动态生成的，更改页面内容时模板并没有改变，所以无法触发devServer的热刷新，手动刷新也不会有变化，因为临时模板文件没有改变，借用插件watch来监听html文件变化，然后重写模板文件可解决问题。

constfs=require('fs')
constpath=require('path')
constwatch=require('watch')
const{replaceScript}=require('./page.config.js')

watch.watchTree(path.resolve(__dirname,'../src/page'),(f,curr,prev)=>{
if(typeoff=='object'&&prev===null&&curr===null){
//Finishedwalkingthetree
}elseif(prev===null){
//fisanewfile
createTemplate(f)
}elseif(curr.link===0){
//fwasremoved
}else{
createTemplate(f)
}
})

functioncreateTemplate(file){
if(file.indexOf('.html')===-1){
return
}
console.log('file',file)
letmainHtml=path.resolve(__dirname,'../src/_main.ejs')
letstrContent=fs.readFileSync(file,'utf-8')
letstrMain=fs.readFileSync(mainHtml,'utf-8')
lettemplate=file.split('\\').slice(file.split('\\').length-2).join('_').split('.')[0]
//提取页面与主体框架中引入的静态js文件，将其放入入口文件中经行压缩，并适应开发与生产路径
//这里不再处理title和静态js入口压缩
strMain=replaceScript(strMain,{},true)
strContent=replaceScript(strContent,{},true)
strContent=strContent.replace(/<%=(.*)%>/,'')
strMain=strMain.replace(/<%=htmlWebpackPlugin.options.content%>/,strContent)
fs.writeFileSync(path.resolve(__dirname,`../src/template/template_${template}.ejs`),strMain)
}

这里不再处理title和静态js入口压缩，更改了这些只能再重新npmrundev

国际化

constlanguageProperty=require('../properties/language.properties.js')

functiongetLanText(val){
letlan='zh'//$.cookie('lan')
letstr=languageProperty[val]&&languageProperty[val][lan]||val
letdefaultOpt=languageProperty[val]&&languageProperty[val]['default']
letopts=defaultOpt&&$.extend(true,[],defaultOpt)
opts?opts.unshift(''):false
letargs=opts&&arguments.length===1?opts:arguments
if(args.length>1){
letparams=Array.property.slice.call(args,1)
returnstr.replace(/{(\d+)}/g,function(curr,index){
returnparams[index]
})
}else{
returnstr
}
}

functiontranslateAll(){
letnum=$('html').find('[lang]').length
letcount=0
if(num===0){
$('body').show()
}
$('html').find('[lang]').each(function(){
count+=1;
letlang=$(this).attr('lang')
if(lang===''){
return;
}
letnodeName=$(this)[0].nodeName
lettext=getLanText(lang)
//简单处理，复杂的可再这里更改
if(nodeName==='INPUT'){
$(this).attr('placeholder',text)
}else{
$(this).html(text)
}
if(count===num){
$('body').show()
}
})
}

module.exports={getLanText,translateAll}

在header.js里调用一次就可以了。

结语

至此，传统多页面组件化开发流程基本完成，可以完全脱离后台愉快的开发前端了，抛弃eclipse，拥抱vsCode。

此文只构建了基本的框架，中间还有很多优化点，打包速度，公共代码等等都没有去细究，等页面、代码量增加，这也是必须去研究的，路漫漫其修远兮。

Guthub可直接npmrundev,npmrunbuild运行，顺便求个Star

webpack-mvc 传统多页面组件化开发详解

pageAindex

pageAlogin

pageAindex

pageAindex

pageAindex

热门推荐

随机推荐