国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

搭建一個(gè)多頁面的無依賴的工程化項(xiàng)目

go4it / 2656人閱讀

摘要：也就是說，我們需要做一個(gè)非單頁應(yīng)用的工程化項(xiàng)目。現(xiàn)在這個(gè)項(xiàng)目的靜態(tài)資源是以文件哈希值來控制的。這個(gè)該怎么解決呢感謝，我們可以通過如下的配置來實(shí)現(xiàn)意思就是如果圖片是在中引用的則不加哈希值，在文件中引入的則加上。

最近金拱門比較火，我們先戳開它的官網(wǎng)看看。

看完后，如果你老板要是讓你做這么一個(gè)網(wǎng)站，一定要seo，一定要兼容IE，你會(huì)怎么去做呢？

用vue/react吧，單頁應(yīng)用滿足不了seo，而且IE兼容性不好。上node中間層做服務(wù)端渲染又把事情搞麻煩了。只能用JQuery干，但是又該怎么做工程化呢？好像也不是很容易。因?yàn)槟壳按蠹业墓こ袒桨付嗍且徽讍雾搼?yīng)用全家桶，如vue-cli的webpack模板。

而前端到如今這個(gè)階段，再讓大家接手一個(gè)沒有工程化的項(xiàng)目，肯定內(nèi)心非常抵觸了。試想這么一個(gè)項(xiàng)目，手動(dòng)link資源，不能寫less/sass，不能寫ES6，不能依賴管理，不能編譯打包...，哦天，想都不敢想。可是工程化這事在實(shí)際業(yè)務(wù)中卻沒有大家想象中的那么順利。比如剛剛金拱門的官網(wǎng)，頁面很多，要求滿足SEO，IE兼容。而且遇到這些項(xiàng)目，往往還會(huì)有這些問題：

由于頁面是后端渲染，需要部署后端程序（php,java之類），各種環(huán)境配置相當(dāng)麻煩。

前端的html代碼依托于服務(wù)端，導(dǎo)致前端做工程化時(shí)，很難對接前后端項(xiàng)目。

也就是說，我們需要做一個(gè)非單頁應(yīng)用的工程化項(xiàng)目。這個(gè)項(xiàng)目在線上時(shí)是前后端耦合的，但是在開發(fā)時(shí)，我們又不想前后端耦合。再整理一下，我們需要解決的問題有：

前后端分離，前端開發(fā)不能依賴于后端環(huán)境。

前端工程化。諸如靜態(tài)資源的打包編譯、依賴的管理、組件化等等。

明確了要解決的問題后，我們就可以開始了。我們可以用webpack搭建一個(gè)項(xiàng)目，幫我們做一些打包、編譯、文件處理這些工程化工作。webpack從零配置比較繁瑣，我們可以選擇修改一個(gè)輪子，比如把vue-cli的webpack模板改造一下，刪了沒必要的vue-loader，給它增加一下多頁面入口就好了。

修改輪子 第一步：理解 vuejs-templates/webpack 
npm install -g vue-cli

vue init webpack my-project

既然要改人家的模板，先得理解人家都做了什么。這里就不帶大家讀代碼了，根據(jù)package.json的命令一個(gè)個(gè)文件的代碼看過去就知道了，很直接很暴力。

第二步：刪

既然我們不需要用vue，那么對于vue文件處理的相關(guān)邏輯我們就不需要了。根據(jù)剛剛對這個(gè)模板的了解，我們知道vue-loader跟vue-style-loader是不需要的。所以刪除對應(yīng)的代碼跟package.json里面的包就好了。

多提一點(diǎn)的是，vue-style-loader雖然不需要，style-loader還是需要的，所以需要用后者替換前者。

第三步：加

做減法容易，做加法就沒這么輕松了。根據(jù)我們剛剛的需求，我們應(yīng)該給它加個(gè)多頁面入口。網(wǎng)上有非常多的webpack多入口配置教程。然而他們不一定就能滿足我們的需求。他們普遍存在如下問題：

入口文件需要自己配置。在一個(gè)頁面較多的項(xiàng)目中，入口文件應(yīng)當(dāng)從約定的目錄中自動(dòng)讀取，也更符合約定優(yōu)于配置。

多入口是針對js的。由于業(yè)界普遍是在用單頁應(yīng)用，頁面由js生成，故多頁面只要多個(gè)js入口就好，不需要直接寫html。而我的需求不是，我希望的多入口是針對html文件而言的。

不過當(dāng)我們解決了上述兩個(gè)問題后，我們還會(huì)有一個(gè)新的問題。我們不同的html文件，其實(shí)又是有公共的部分的。比如都有 header，footer。也就是說，我們需要給這些html文件增加一個(gè)模板。我們可以通過webpack的loader來實(shí)現(xiàn)，但是沒有現(xiàn)成的loader可以比較好的解決。那怎么辦呢？可以參考我另外一篇文章。編寫自己的Webpack Loader。

靜態(tài)資源的版本控制

上述問題解決后，我們的工作并未完成。現(xiàn)在這個(gè)項(xiàng)目的靜態(tài)資源是以文件哈希值來控制的。可惜有的項(xiàng)目的靜態(tài)資源是要后端來更新時(shí)間戳控制的。雖然這不是個(gè)好方案，但有些工程卻依舊是這樣。沒辦法，為了適應(yīng)他們，我們必須得去掉哈希值。可是這樣的話，當(dāng)我們想更新css內(nèi)引用的圖片時(shí)又沒轍了，因?yàn)閏ss內(nèi)鏈的圖片后端沒法控制版本。

這個(gè)該怎么解決呢？感謝webpack，我們可以通過如下的配置來實(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è)簡單的項(xiàng)目架構(gòu)。它能幫助我們實(shí)現(xiàn)文件的打包、編譯，html的模板控制等功能。最終能build出一份html+靜態(tài)資源的web頁面直接發(fā)布cdn。當(dāng)然也可以把它們直接扔給后端。

不過這個(gè)架子還不是非常的完善，應(yīng)用場景也有限，比較適用于一些交互較少、頁面較多、看重seo或者傳統(tǒng)后端套頁面的網(wǎng)站。另外，作為工程化中非常重要的組件化與測試，由于沒有任何框架的引入，這點(diǎn)也需要使用者自己再去摸索。

另外，如果還是想用vue，react或angular，又不想搞他們的服務(wù)端渲染，可以嘗試下變相的服務(wù)端渲染系統(tǒng)。

最后，如果這個(gè)架子對您有用，歡迎戳開github。

--閱讀原文 --轉(zhuǎn)載請先經(jīng)過本人授權(quán)-丁香園F2E @相學(xué)長。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89360.html

相關(guān)文章

  • 2017-10-29 前端日報(bào)

    摘要：作者眾成翻譯只寫的禪眾成翻譯如何使更高效如何用構(gòu)建前端架構(gòu)小米直達(dá)服務(wù)介紹與開發(fā)實(shí)戰(zhàn)搭建一個(gè)多頁面的無依賴的工程化項(xiàng)目掘金計(jì)算機(jī)網(wǎng)絡(luò)概念和結(jié)構(gòu)掘金英文 2017-10-29 前端日報(bào) 精選 【譯】圖與例解讀Async/AwaitVue + TypeScript 新項(xiàng)目起手式 React-Router動(dòng)態(tài)路由設(shè)計(jì)最佳實(shí)踐Vue2 原理淺談使用合適的設(shè)計(jì)模式一步步優(yōu)化前端代碼The 14 ...

    hzx 評論0 收藏0

  • Node中間層實(shí)踐（一）——基于NodeJS的全棧式開發(fā)

    摘要：總結(jié)我覺得，以后基于的全棧式開發(fā)的模式將會(huì)越來越流行，這也會(huì)引領(lǐng)前端步入工程化時(shí)代。歡迎繼續(xù)關(guān)注本博的更新中間層實(shí)踐一基于的全棧式開發(fā)中間層實(shí)踐二搭建項(xiàng)目框架中間層實(shí)踐三配置中間層實(shí)踐四模板引擎中間層實(shí)踐五中間層的邏輯處理 版權(quán)聲明：更多文章請?jiān)L問我的個(gè)人站Keyon Y，轉(zhuǎn)載請注明出處。 前言 近期公司有個(gè)新項(xiàng)目，由于后端人手不足，我果斷的提議用node中間層的方案，得到了老大的支持...

    warkiz 評論0 收藏0

  • [原]解密Airbnb 自助BI神器：Superset 顛覆 Tableau

    摘要：概述我非常認(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...

    Keagan 評論0 收藏0

  • 做了一次框架技術(shù)分享（請選擇原諒我啊）

    摘要：畢竟實(shí)現(xiàn)一個(gè)業(yè)務(wù)需求，是一種技術(shù)，而通過寫作，分享，討論等，能得到的就是一種技能了。我決定采用目前市場上的三大框架之一來進(jìn)行項(xiàng)目演示，剛剛結(jié)束分享，這里把我分享的過程給大家分享一下。所以如題，請選擇原諒我啊。 why？ 身為技術(shù)人員有沒有必要在自己學(xué)習(xí)與開發(fā)的過程中做技術(shù)分享（很尷尬，技術(shù)明明才差不多一年），這幾乎是一件很明顯的事情了，寫文章，開博客，搞分享會(huì)，幾乎任何一種線上線下交流...

    PiscesYE 評論0 收藏0

  • Maven多模塊項(xiàng)目搭建+整合SSM框架

    摘要：繼承作用就是避免配置重復(fù)，對于子項(xiàng)目來說應(yīng)該關(guān)心父項(xiàng)目是怎么樣配置的。聚合字面理解就是聚在一起合作完成工作，就是將子模塊聚集起來完成相應(yīng)的項(xiàng)目需求父工程的搭建項(xiàng)目結(jié)構(gòu)在父工程中，主要負(fù)責(zé)完成依賴的版本管理，并不是實(shí)際的依賴。 從大二開始就一直關(guān)注segmentFault,在問題專區(qū)幫忙回答一些自己知曉的問題；在寫這篇文章之前我一直會(huì)在朋友圈發(fā)一些自己遇到的問題以及解決辦法，這是第一次寫...

    liaosilzu2007 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<