webpack-mvc傳統(tǒng)多頁面組件化開發(fā)詳解

最近有一個項目，還是使用的傳統(tǒng) MVC 模式開發(fā)，完全基于jQuery，使用了基于java模板引擎velocity，頁面中嵌入了大量java語法，使得前后端分離不徹底，工程打包上線苦不堪言，為實現后端為服務化，前端也得徹底從后端中分離出來。

創(chuàng)新互聯專注于企業(yè)營銷型網站、網站重做改版、沂水網站定制設計、自適應品牌網站建設、H5場景定制、商城建設、集團公司官網建設、外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為沂水等各大城市提供網站開發(fā)制作服務。

方案: 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

監(jiān)聽文件變化

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

入口文件

入口文件長這樣(可單一入口，也可多入口)：

// 多入口
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

既然是多頁面開發(fā)，就要有多個入口，每個頁面都要有自己對應的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





 
 
 
 <%= 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

 pageA index


// pageA/login.html

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

網上查了很多資料，沒找到可以實現上面步驟的方法，基本都是要在每個頁面的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 %>

 pageA index

頁面直接引入js，只壓縮不打包

// pageA/index.html

<%=title 頁面A %>


 pageA index

這里引入js的路徑是最終文件壓縮生成的位置（dist目錄下），因為開發(fā)模式和生產環(huán)境路徑有所不同，所以等下在代碼中要區(qū)別不同環(huán)境去替換不同的路徑。

頁面引入ejs組件

// pageA/index.html

<%=title 頁面A %>


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

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>/g)
 if (scriptLink) {
  scriptLink.forEach(item => {
   // src: /js/common/js/util.js
   let src = item.match(/src=["|'](.*)["|']/)[1];
   scriptLinkEntry(entry, src)
   let scriptlinNew = src
   // 生產環(huán)境根據頁面路徑找到js的相對路徑，開發(fā)環(huán)境 /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(.*)%>/, '')
 }

 // 提取頁面與主體框架中引入的靜態(tài)js文件，將其放入入口文件中經行壓縮，并適應開發(fā)與生產路徑
 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;

熱刷新

此時熱刷新只能監(jiān)聽到js和css的改變，因為模板是動態(tài)生成的，更改頁面內容時模板并沒有改變，所以無法觸發(fā)devServer的熱刷新，手動刷新也不會有變化，因為臨時模板文件沒有改變，借用插件 watch 來監(jiān)聽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]
 // 提取頁面與主體框架中引入的靜態(tài)js文件，將其放入入口文件中經行壓縮，并適應開發(fā)與生產路徑
 // 這里不再處理 title 和 靜態(tài)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和靜態(tài)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里調用一次就可以了。

結語

至此，傳統(tǒng)多頁面組件化開發(fā)流程基本完成，可以完全脫離后臺愉快的開發(fā)前端了，拋棄eclipse，擁抱vsCode。

此文只構建了基本的框架，中間還有很多優(yōu)化點，打包速度，公共代碼等等都沒有去細究，等頁面、代碼量增加，這也是必須去研究的，路漫漫其修遠兮。

Guthub 可直接 npm run dev, npm run build 運行，順便求個Star 😄

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。

本文標題：webpack-mvc傳統(tǒng)多頁面組件化開發(fā)詳解
當前URL：http://weahome.cn/article/poopsh.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

webpack-mvc傳統(tǒng)多頁面組件化開發(fā)詳解

pageA index

pageA login

pageA index

pageA index

pageA index

其他資訊

網站制作

企業(yè)服務

網站建設

服務器托管