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


Posted in Javascript onMay 07, 2019

最近有一个项目,还是使用的传统 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 对象即可

const path = require('path')
const glob = require('glob')

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

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

  // 根据html路径找到对应的js路径,js可以和html放在同一文件夹,也可单独放在一个文件夹内,只要能找到 
  const jsPath = 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单独放在一个文件夹内
 })
 return entry
})(glob(path.resolve(__dirname, '../src/page/*/*.html'), {sync: true}))

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

html(ejs) 组件化

页面框架

1、主体框架 src/_main.ejs

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
 <div class="main-head">
  <%= require('@/common/components/header/header.ejs')() %>
 </div>

 <div class="main-content">
  <%= htmlWebpackPlugin.options.content %>
 </div>

 <div class="main-foot">
  <%= require('@/common/components/footer/footer.ejs')() %>
 </div>
</body>

</html>

2、公共页面

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

3、页面各自部分

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

// pageA/index.html
<div>
 <h1>pageA index</h1>
</div>

// pageA/login.html
<div>
 <%= require('@/common/components/form.ejs')() %>
 <h1>pageA login</h1>
</div>

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

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

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

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

 let strContent = fs.readFileSync(file, 'utf-8')
 let strMain = fs.readFileSync(mainHtml, 'utf-8')
 let template = 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
 return obj
}

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

页面 title

// pageA/index.html

<%=title 页面A %>
<div>
 <h1>pageA index</h1>
</div>

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

// pageA/index.html

<%=title 页面A %>

<div>
 <h1>pageA index</h1>
</div>

<script src="js/common/util.js"></script>
<script src="js/common/server.api.js"></script>

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

页面引入ejs组件

// pageA/index.html

<%=title 页面A %>

<div>
 <%= require('@/common/components/form.ejs')() %>
 <h1>pageA index</h1>
</div>

<script src="js/common/util.js"></script>
<script src="js/common/server.api.js"></script>

page.config.js

const fs = require('fs')
const path = require('path')
const glob = require('glob')

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

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

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

  // 根据html路径找到对应的js路径,js可以和html放在同一文件夹,也可单独放在一个文件夹内,只要能找到
  let jsFile = path.resolve(__dirname, `../src/${filePath.split('.')[0]}.js`)
  if (!fs.existsSync(jsFile)) {
   return;
  }
  let jsPath = '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}))

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

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

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

 let strContent = fs.readFileSync(file, 'utf-8')
 let strMain = fs.readFileSync(mainHtml, 'utf-8')
 let template = fileSplit.slice(fileSplit.length - 2).join('_').split('.')[0]

 // 提取页面title
 let titleMatch = strContent.match(/<%=title(.*)%>/)
 let title = ''
 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
 return obj
}

module.exports = pages;

热刷新

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

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

watch.watchTree(path.resolve(__dirname, '../src/page'), (f, curr, prev) => {
 if (typeof f == 'object' && prev === null && curr === null) {
  // Finished walking the tree
 } else if (prev === null) {
  // f is a new file
  createTemplate(f)
 } else if (curr.link === 0) {
  // f was removed
 } else {
  createTemplate(f)
 }
})

function createTemplate(file) {
 if (file.indexOf('.html') === -1) {
  return
 }
 console.log('file', file)
 let mainHtml = path.resolve(__dirname, '../src/_main.ejs')
 let strContent = fs.readFileSync(file, 'utf-8')
 let strMain = fs.readFileSync(mainHtml, 'utf-8')
 let template = 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入口压缩,更改了这些只能再重新 npm run dev

国际化

const languageProperty = require('../properties/language.properties.js')

function getLanText(val) {
 let lan = 'zh' // $.cookie('lan')
 let str = languageProperty[val] && languageProperty[val][lan] || val
 let defaultOpt = languageProperty[val] && languageProperty[val]['default']
 let opts = defaultOpt && $.extend(true, [], defaultOpt)
 opts ? opts.unshift('') : false
 let args = opts && arguments.length === 1 ? opts : arguments
 if (args.length > 1) {
  let params = Array.property.slice.call(args, 1)
  return str.replace(/{(\d+)}/g, function(curr, index) {
   return params[index]
  })
 } else {
  return str
 }
}

function translateAll() {
 let num = $('html').find('[lang]').length
 let count = 0
 if (num === 0) {
  $('body').show()
 }
 $('html').find('[lang]').each(function() {
  count += 1;
  let lang = $(this).attr('lang')
  if (lang === '') {
   return;
  }
  let nodeName = $(this)[0].nodeName
  let text = 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 可直接 npm run dev, npm run build 运行, 顺便求个Star ?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
vue.js实例todoList项目
Jul 07 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 #Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 #Javascript
vue接入腾讯防水墙代码
May 07 #Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 #Javascript
详解vue中使用protobuf踩坑记
May 07 #Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 #Javascript
微信小程序扫描二维码获取信息实例详解
May 07 #Javascript
You might like
谈谈PHP语法(3)
2006/10/09 PHP
php 购物车实例(申精)
2009/05/11 PHP
php下连接mssql2005的代码
2011/01/17 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php函数与传递参数实例分析
2014/11/15 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
Python编写打字训练小程序
2019/09/26 Python
python psutil监控进程实例
2019/12/17 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Python try except else使用详解
2021/01/12 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
文明班级申报材料
2014/12/24 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js