資訊專欄INFORMATION COLUMN
摘要：也就是說(shuō)，我們需要做一個(gè)非單頁(yè)應(yīng)用的工程化項(xiàng)目?，F(xiàn)在這個(gè)項(xiàng)目的靜態(tài)資源是以文件哈希值來(lái)控制的。這個(gè)該怎么解決呢感謝，我們可以通過(guò)如下的配置來(lái)實(shí)現(xiàn)意思就是如果圖片是在中引用的則不加哈希值，在文件中引入的則加上。
最近金拱門(mén)比較火，我們先戳開(kāi)它的官網(wǎng)看看。
看完后，如果你老板要是讓你做這么一個(gè)網(wǎng)站，一定要seo，一定要兼容IE，你會(huì)怎么去做呢？
用vue/react吧，單頁(yè)應(yīng)用滿足不了seo，而且IE兼容性不好。上node中間層做服務(wù)端渲染又把事情搞麻煩了。只能用JQuery干，但是又該怎么做工程化呢？好像也不是很容易。因?yàn)槟壳按蠹业墓こ袒桨付嗍且徽讍雾?yè)應(yīng)用全家桶，如vue-cli的webpack模板。
而前端到如今這個(gè)階段，再讓大家接手一個(gè)沒(méi)有工程化的項(xiàng)目，肯定內(nèi)心非常抵觸了。試想這么一個(gè)項(xiàng)目，手動(dòng)link資源，不能寫(xiě)less/sass，不能寫(xiě)ES6，不能依賴管理，不能編譯打包...，哦天，想都不敢想?？墒枪こ袒@事在實(shí)際業(yè)務(wù)中卻沒(méi)有大家想象中的那么順利。比如剛剛金拱門(mén)的官網(wǎng)，頁(yè)面很多，要求滿足SEO，IE兼容。而且遇到這些項(xiàng)目，往往還會(huì)有這些問(wèn)題：
由于頁(yè)面是后端渲染，需要部署后端程序（php,java之類(lèi)），各種環(huán)境配置相當(dāng)麻煩。
前端的html代碼依托于服務(wù)端，導(dǎo)致前端做工程化時(shí)，很難對(duì)接前后端項(xiàng)目。
也就是說(shuō)，我們需要做一個(gè)非單頁(yè)應(yīng)用的工程化項(xiàng)目。這個(gè)項(xiàng)目在線上時(shí)是前后端耦合的，但是在開(kāi)發(fā)時(shí)，我們又不想前后端耦合。再整理一下，我們需要解決的問(wèn)題有：
前后端分離，前端開(kāi)發(fā)不能依賴于后端環(huán)境。
前端工程化。諸如靜態(tài)資源的打包編譯、依賴的管理、組件化等等。
明確了要解決的問(wèn)題后，我們就可以開(kāi)始了。我們可以用webpack搭建一個(gè)項(xiàng)目，幫我們做一些打包、編譯、文件處理這些工程化工作。webpack從零配置比較繁瑣，我們可以選擇修改一個(gè)輪子，比如把vue-cli的webpack模板改造一下，刪了沒(méi)必要的vue-loader，給它增加一下多頁(yè)面入口就好了。
修改輪子 第一步：理解 vuejs-templates/webpacknpm install -g vue-cli vue init webpack my-project
既然要改人家的模板，先得理解人家都做了什么。這里就不帶大家讀代碼了，根據(jù)package.json的命令一個(gè)個(gè)文件的代碼看過(guò)去就知道了，很直接很暴力。
第二步：刪既然我們不需要用vue，那么對(duì)于vue文件處理的相關(guān)邏輯我們就不需要了。根據(jù)剛剛對(duì)這個(gè)模板的了解，我們知道vue-loader跟vue-style-loader是不需要的。所以刪除對(duì)應(yīng)的代碼跟package.json里面的包就好了。
多提一點(diǎn)的是，vue-style-loader雖然不需要，style-loader還是需要的，所以需要用后者替換前者。
第三步：加做減法容易，做加法就沒(méi)這么輕松了。根據(jù)我們剛剛的需求，我們應(yīng)該給它加個(gè)多頁(yè)面入口。網(wǎng)上有非常多的webpack多入口配置教程。然而他們不一定就能滿足我們的需求。他們普遍存在如下問(wèn)題：
入口文件需要自己配置。在一個(gè)頁(yè)面較多的項(xiàng)目中，入口文件應(yīng)當(dāng)從約定的目錄中自動(dòng)讀取，也更符合約定優(yōu)于配置。
多入口是針對(duì)js的。由于業(yè)界普遍是在用單頁(yè)應(yīng)用，頁(yè)面由js生成，故多頁(yè)面只要多個(gè)js入口就好，不需要直接寫(xiě)html。而我的需求不是，我希望的多入口是針對(duì)html文件而言的。
不過(guò)當(dāng)我們解決了上述兩個(gè)問(wèn)題后，我們還會(huì)有一個(gè)新的問(wèn)題。我們不同的html文件，其實(shí)又是有公共的部分的。比如都有 header，footer。也就是說(shuō)，我們需要給這些html文件增加一個(gè)模板。我們可以通過(guò)webpack的loader來(lái)實(shí)現(xiàn)，但是沒(méi)有現(xiàn)成的loader可以比較好的解決。那怎么辦呢？可以參考我另外一篇文章。編寫(xiě)自己的Webpack Loader。
靜態(tài)資源的版本控制上述問(wèn)題解決后，我們的工作并未完成?，F(xiàn)在這個(gè)項(xiàng)目的靜態(tài)資源是以文件哈希值來(lái)控制的。可惜有的項(xiàng)目的靜態(tài)資源是要后端來(lái)更新時(shí)間戳控制的。雖然這不是個(gè)好方案，但有些工程卻依舊是這樣。沒(méi)辦法，為了適應(yīng)他們，我們必須得去掉哈希值?？墒沁@樣的話，當(dāng)我們想更新css內(nèi)引用的圖片時(shí)又沒(méi)轍了，因?yàn)閏ss內(nèi)鏈的圖片后端沒(méi)法控制版本。
這個(gè)該怎么解決呢？感謝webpack，我們可以通過(guò)如下的配置來(lái)實(shí)現(xiàn)：
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
oneOf: [
{
issuer: /.html$/,
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[ext]",)
}
},
{
issuer: /.(css|less)$/,
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
}
]
}
意思就是如果圖片是在html中引用的則不加哈希值，在css文件中引入的則加上。
完工這樣我們就完成了一個(gè)簡(jiǎn)單的項(xiàng)目架構(gòu)。它能幫助我們實(shí)現(xiàn)文件的打包、編譯，html的模板控制等功能。最終能build出一份html+靜態(tài)資源的web頁(yè)面直接發(fā)布cdn。當(dāng)然也可以把它們直接扔給后端。
不過(guò)這個(gè)架子還不是非常的完善，應(yīng)用場(chǎng)景也有限，比較適用于一些交互較少、頁(yè)面較多、看重seo或者傳統(tǒng)后端套頁(yè)面的網(wǎng)站。另外，作為工程化中非常重要的組件化與測(cè)試，由于沒(méi)有任何框架的引入，這點(diǎn)也需要使用者自己再去摸索。
另外，如果還是想用vue，react或angular，又不想搞他們的服務(wù)端渲染，可以嘗試下變相的服務(wù)端渲染系統(tǒng)。
最后，如果這個(gè)架子對(duì)您有用，歡迎戳開(kāi)github。
--閱讀原文 --轉(zhuǎn)載請(qǐng)先經(jīng)過(guò)本人授權(quán)-丁香園F2E @相學(xué)長(zhǎng)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89360.html
摘要：作者眾成翻譯只寫(xiě)的禪眾成翻譯如何使更高效如何用構(gòu)建前端架構(gòu)小米直達(dá)服務(wù)介紹與開(kāi)發(fā)實(shí)戰(zhàn)搭建一個(gè)多頁(yè)面的無(wú)依賴的工程化項(xiàng)目掘金計(jì)算機(jī)網(wǎng)絡(luò)概念和結(jié)構(gòu)掘金英文 2017-10-29 前端日?qǐng)?bào) 精選 【譯】圖與例解讀Async/AwaitVue + TypeScript 新項(xiàng)目起手式 React-Router動(dòng)態(tài)路由設(shè)計(jì)最佳實(shí)踐Vue2 原理淺談使用合適的設(shè)計(jì)模式一步步優(yōu)化前端代碼The 14 ...
摘要：總結(jié)我覺(jué)得，以后基于的全棧式開(kāi)發(fā)的模式將會(huì)越來(lái)越流行，這也會(huì)引領(lǐng)前端步入工程化時(shí)代。歡迎繼續(xù)關(guān)注本博的更新中間層實(shí)踐一基于的全棧式開(kāi)發(fā)中間層實(shí)踐二搭建項(xiàng)目框架中間層實(shí)踐三配置中間層實(shí)踐四模板引擎中間層實(shí)踐五中間層的邏輯處理 版權(quán)聲明：更多文章請(qǐng)?jiān)L問(wèn)我的個(gè)人站Keyon Y，轉(zhuǎn)載請(qǐng)注明出處。 前言 近期公司有個(gè)新項(xiàng)目，由于后端人手不足，我果斷的提議用node中間層的方案，得到了老大的支持...
摘要：概述我非常認(rèn)同前百度數(shù)據(jù)工程師現(xiàn)神策分析創(chuàng)始人桑老師最近談到的數(shù)據(jù)分析三重境界統(tǒng)計(jì)計(jì)數(shù)多維分析機(jī)器學(xué)習(xí)數(shù)據(jù)分析的統(tǒng)計(jì)計(jì)數(shù)和多維分析，我們通常稱之為數(shù)據(jù)探索式分析，這個(gè)步驟旨在了解數(shù)據(jù)的特性，有助于我們進(jìn)一步挖掘數(shù)據(jù)的價(jià)值。 showImg(https://camo.githubusercontent.com/f98421e503a81176b003ddd310d97e1e1214625...
摘要：畢竟實(shí)現(xiàn)一個(gè)業(yè)務(wù)需求，是一種技術(shù)，而通過(guò)寫(xiě)作，分享，討論等，能得到的就是一種技能了。我決定采用目前市場(chǎng)上的三大框架之一來(lái)進(jìn)行項(xiàng)目演示，剛剛結(jié)束分享，這里把我分享的過(guò)程給大家分享一下。所以如題，請(qǐng)選擇原諒我啊。 why？ 身為技術(shù)人員有沒(méi)有必要在自己學(xué)習(xí)與開(kāi)發(fā)的過(guò)程中做技術(shù)分享（很尷尬，技術(shù)明明才差不多一年），這幾乎是一件很明顯的事情了，寫(xiě)文章，開(kāi)博客，搞分享會(huì)，幾乎任何一種線上線下交流...
摘要：繼承作用就是避免配置重復(fù)，對(duì)于子項(xiàng)目來(lái)說(shuō)應(yīng)該關(guān)心父項(xiàng)目是怎么樣配置的。聚合字面理解就是聚在一起合作完成工作，就是將子模塊聚集起來(lái)完成相應(yīng)的項(xiàng)目需求父工程的搭建項(xiàng)目結(jié)構(gòu)在父工程中，主要負(fù)責(zé)完成依賴的版本管理，并不是實(shí)際的依賴。 從大二開(kāi)始就一直關(guān)注segmentFault,在問(wèn)題專區(qū)幫忙回答一些自己知曉的問(wèn)題；在寫(xiě)這篇文章之前我一直會(huì)在朋友圈發(fā)一些自己遇到的問(wèn)題以及解決辦法，這是第一次寫(xiě)...
閱讀 1581·2021-10-11 10:59
閱讀 2020·2021-09-09 11:36
閱讀 1537·2019-08-30 15:55
閱讀 1388·2019-08-29 11:20
閱讀 3126·2019-08-26 13:39
閱讀 1538·2019-08-26 13:37
閱讀 2054·2019-08-26 12:11
閱讀 1388·2019-08-23 14:28
