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

資訊專欄INFORMATION COLUMN

前端模塊化和構(gòu)建工具

ad6623 / 2263人閱讀

摘要:以前一直對(duì)前端構(gòu)建工具的理解不深,經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下,第一次寫博客,有寫錯(cuò)的請(qǐng)多多見諒,該文章我也從其他博客拷了一些內(nèi)容,如果有冒犯之處,請(qǐng)指出。強(qiáng)大的設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺(tái),而不只是一個(gè)打包工具。

以前一直對(duì)前端構(gòu)建工具的理解不深,經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下,第一次寫博客,有寫錯(cuò)的請(qǐng)多多見諒,該文章我也從其他博客拷了一些內(nèi)容,如果有冒犯之處,請(qǐng)指出。

如今,網(wǎng)頁(yè)不再是自己編寫各種功能了,而是如何把各種不同功能的模塊組合起來(lái)。
以前使用script引用不但增加網(wǎng)絡(luò)請(qǐng)求,還會(huì)時(shí)頁(yè)面更加臃腫,為了解決這類問題,前端的模塊管理應(yīng)運(yùn)而生,最早提出解決方法的是AMD,其實(shí)踐方案是requireJs和curlJs.它不僅實(shí)現(xiàn)了js文件的異步加載,還管理了模塊之間的倚賴性,(類似于面向?qū)ο蟮腗odule模式)

requireJs:

main就是主模塊,省略了.js后綴,在main.js里面可以配置模塊的加載,在其頭部寫require.config

在實(shí)際應(yīng)用中,往往還需要在服務(wù)端,將所有模塊合并后,再統(tǒng)一加載,這多出了很多工作量

AMD 通過(guò)將模塊的實(shí)現(xiàn)代碼包在匿名函數(shù)(即AMD 的工廠方法,factory)中實(shí)現(xiàn)作用域的隔離,通過(guò)文件路徑作為天然的模塊ID 實(shí)現(xiàn)命名空間的控制,將模塊的工廠方法作為參數(shù)傳入全局的define(由模塊加載器事先定義),使得工廠方法的執(zhí)行時(shí)機(jī)可控,也就變相模擬出了同步的局部require,因而AMD 的模塊可以不經(jīng)轉(zhuǎn)換地直接在瀏覽器中執(zhí)行。 因此,在開發(fā)時(shí),AMD 的模塊可以直接以原文件的形式在瀏覽器中加載執(zhí)行并調(diào)試,這也成為RequireJS 方案不多的優(yōu)點(diǎn)之一。

注意:

然而基于AMD 規(guī)范的非JavaScript 資源加載有著本質(zhì)的如下缺陷。

1.加載與構(gòu)建的分離導(dǎo)致plugin 需要分別實(shí)現(xiàn)兩套邏輯。
2.在構(gòu)建產(chǎn)物,r.js構(gòu)建的結(jié)果是define(function(){...})的幾何,文件的執(zhí)行倚賴頁(yè)面上事先引入一個(gè)amd模塊加載器(如requireJs自身),所以常見的AMD項(xiàng)目線上頁(yè)面往往存在兩個(gè)Javascript文件:loader.js及bundle.js。而browserify和webpack的構(gòu)建結(jié)果 是可以執(zhí)行的js代碼,它們都支持通過(guò)配置生成符合格式的結(jié)果文件,如以u(píng)md形式暴露 庫(kù)的exports,以便其他頁(yè)面代碼調(diào)用。后者的這種形式更符合js庫(kù)的構(gòu)建
3.瀏覽器的安全策略決定了絕大多數(shù)需要讀取文本內(nèi)容進(jìn)行解析的靜態(tài)資源無(wú)法被跨域加載(即使是JavaScript 模塊本身,也要依靠define 方法包裹,類似于JSONP 原理實(shí)現(xiàn)的跨域加載)。

Browserify

其本事不是模塊管理器,只是讓CommondJs格式的模塊可以運(yùn)行在瀏覽器端,這意味著它可以使用nodeJs的npm模塊管理器。所以,實(shí)際上,它等于間接為瀏覽器提供了npm的功能

上面這個(gè)代碼使用的是CommondJs格式,無(wú)法在瀏覽器中運(yùn)行,這是需要用到browserify,將上面代碼編譯為瀏覽器腳本

注意:(1). requirejs/seajs: 是一種在線“編譯”模塊的方案,相當(dāng)于在頁(yè)面上加載一個(gè)CommonJS/AMD模塊格式解釋器。這樣瀏覽器就認(rèn)識(shí)了define, exports,module這些東西,也就實(shí)現(xiàn)了模塊化。

      (2).browserify/webpack:是一個(gè)預(yù)編譯模塊打包的方案,相比于第一種方案,這個(gè)方案更加智能。由于是預(yù)編譯的,不需要在瀏覽器中加載解釋器。你在本地直接寫JS,不管是AMD/CMD/ES6風(fēng)格的模塊化,它都能認(rèn)識(shí),并且編譯成瀏覽器認(rèn)識(shí)的JS。注意: browerify打包器本身只支持Commonjs模塊,如果要打包AMD模塊,則需要另外的plugin來(lái)實(shí)現(xiàn)AMD到CMD的轉(zhuǎn)換!!

browserify不支持異步加載,非js文件加載(img src打包路徑問題)

這里插入一下es6和CommonJs的區(qū)別:

* 運(yùn)行時(shí)加載: CommonJS 模塊就是對(duì)象;即在輸入時(shí)是先加載整個(gè)模塊,生成一個(gè)對(duì)象,然后再?gòu)倪@個(gè)對(duì)象上面讀取方法,這種加載稱為“運(yùn)行時(shí)加載”

* 
    * 

編譯時(shí)加載: ES6 模塊不是對(duì)象,而是通過(guò) export 命令顯式指定輸出的代碼,輸入時(shí)采用靜態(tài)命令的形式。即在輸入時(shí)可以指定加載某個(gè)輸出值,而不是加載整個(gè)模塊,這種加載稱為“編譯時(shí)加載”

正如我們?cè)谇懊嫣岬降膁efine 函數(shù)的作用,沒有define 函數(shù)的CommonJS 模塊是無(wú)法直接在瀏覽器中執(zhí)行的——瀏覽器環(huán)境中無(wú)法實(shí)現(xiàn)同Node.js 環(huán)境一樣同步的require 方法。同樣也因?yàn)闆]有define 與工廠方法,CommonJS 模塊書寫起來(lái)要更簡(jiǎn)單、干凈。在這個(gè)顯而易見的好處下,越來(lái)越多的前端項(xiàng)目開始采用CommonJS 規(guī)范的模塊書寫方式。

Gulp/grunt

Gulp / Grunt 是一種工具,能夠優(yōu)化前端工作流程。比如自動(dòng)刷新頁(yè)面、combo、壓縮css、js、編譯less等等。簡(jiǎn)單來(lái)說(shuō),就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情讓它幫你做了。
gulp相比grunt簡(jiǎn)便,借助unix的流操作思想,通過(guò)管道pipe來(lái)管理task任務(wù),實(shí)現(xiàn)前端的優(yōu)化,例如把Js和css融合在一起并壓縮

webpack只是在Loader里面加載的時(shí)候,幫我們默認(rèn)實(shí)現(xiàn)了操作,沒有g(shù)ulp操作得透明,gulp只是構(gòu)建工具,所以如果開發(fā)SPA單頁(yè)面應(yīng)用的時(shí)候,需要用到模塊化開發(fā),這時(shí)就需要用到模塊化的概念,如果想用CommondJs風(fēng)格,就需要借助browserify來(lái)作為轉(zhuǎn)換工作,也許你會(huì)發(fā)現(xiàn)在gulp使用時(shí)就有require("gulp")這樣的引用風(fēng)格,這是npm包管理的模塊,是CommondJs的node的風(fēng)格,是編寫gulp這些構(gòu)建工具時(shí)用的,不是我們編寫自己的前端模塊代碼的。所以使不使用模塊方案要看項(xiàng)目工程是否龐大決定,如果簡(jiǎn)單,做個(gè)多頁(yè)面應(yīng)用,不需要把js或各種資源打包處理,只需要簡(jiǎn)單的合并,壓縮,在頁(yè)面中引用就好,那就不需要Browserify,webpack。用gulp就夠了。使用es6模塊規(guī)范時(shí),通過(guò)babel轉(zhuǎn)以后形成commondJs這樣的代碼,一般還不能使用,因?yàn)闉g覽器不識(shí)別commondJs,所以需要browserify或者webpack將其打包到一個(gè)js文件中。

但是相比于npm , grunt和gulp缺點(diǎn)是相當(dāng)倚賴插件的開發(fā),如果出現(xiàn)新技術(shù)時(shí),需要相關(guān)人開發(fā)插件,如gulp-eslint,當(dāng)使用時(shí),需要在gulp-eslint文檔和eslint文檔來(lái)回切換,不得不在插件和所抽象的工具之間來(lái)回切換上下文。相比于npm這個(gè)更大的插件社區(qū),缺點(diǎn)教為明顯

構(gòu)建工具完成的目標(biāo)基本是:

fis

fis也屬于前端構(gòu)建工具,它的本質(zhì)是基于靜態(tài)資源標(biāo)記和動(dòng)態(tài)解析靜態(tài)資源表,在模版,js里面使用特殊的標(biāo)記方法引用前端資源,構(gòu)建的時(shí)候生成一張資源倚賴表,瀏覽器或者后端模版語(yǔ)言在解析的過(guò)程中通過(guò)查表得到某個(gè)靜態(tài)資源在不同環(huán)境下的引用路徑,所以不管是純前端渲染還是服務(wù)端渲染,都容易得到支持,
fis其實(shí)是一種靜態(tài)資源表的思想,在這種思想下,對(duì)于php的smarty產(chǎn)生了fis-plus,基于java的便是 jello,
后來(lái)fis3都將其納入了其中

fis3的功能和webpack類似,其優(yōu)點(diǎn)是靜態(tài)資源表

fis3設(shè)計(jì)之初是用在網(wǎng)頁(yè)構(gòu)建上,所以后端的文件操作之類不適用,fis3的模塊化開發(fā)主要是AMD,CMD和自定義擴(kuò)展commonJs的modJs,三個(gè)分別對(duì)應(yīng)于三個(gè)插件來(lái)實(shí)現(xiàn),由于自己葛璐開發(fā)了一種模式,所以導(dǎo)致貢獻(xiàn)也少了,fis可以做到完美的解決方案還需要后端的配合,所以也使得其不了了之。

對(duì)于最大boss ---------webpack

webpack比較黑盒,用起來(lái)很方便,十分適合開發(fā)SPA項(xiàng)目,但是卻不適合服務(wù)端渲染,webpack目前的功能已經(jīng)非常齊全,也相應(yīng)的會(huì)帶來(lái)首次加載,打包時(shí)間慢,需要對(duì)其打包進(jìn)行優(yōu)化
它既吸取了大量已有方案的優(yōu)點(diǎn)與教訓(xùn),也解決了很多前端開發(fā)過(guò)程中已存在的痛點(diǎn),如代碼的拆分與異步加載、對(duì)非JavaScript 資源的支持等。強(qiáng)大的loader 設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺(tái),而不只是一個(gè)打包工具。

考慮到AMD 規(guī)范與CommonJS 規(guī)范各有各的優(yōu)點(diǎn),且都有著可觀的使用率,webpack 同時(shí)支持這兩種模塊格式,甚至支持二者混用。而且通過(guò)使用loader,webpack也可以支持ES6 module(這一特性在即將到來(lái)的webpack 2 中原生支持),可以說(shuō)覆蓋了現(xiàn)有的所有主流的 JavaScript 模塊化方案。通過(guò)特定的插件實(shí)現(xiàn) shim 后,在webpack 中,甚至可以把以最傳統(tǒng)全局變量形式暴露的庫(kù)當(dāng)作模塊require 進(jìn)來(lái)。

webpack.config.js實(shí)在node.js中運(yùn)行的,因此不支持es6的import語(yǔ)法

其實(shí)webpack是個(gè)大boss,我就不在本文細(xì)說(shuō)了,網(wǎng)上對(duì)webpack的使用已經(jīng)有很多案例了。
感謝你的捧場(chǎng),有什么錯(cuò)誤可以指出,大家多多探討...

                                                    ***未完待續(xù)***

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/84778.html

相關(guān)文章

  • 前端構(gòu)建工具整理

    摘要:常見前端構(gòu)建工具的分類和對(duì)比是附帶的包管理器,是內(nèi)置的一個(gè)功能,允許在文件里面使用字段定義任務(wù)在這里,一個(gè)屬性對(duì)應(yīng)一段腳本,原理是通過(guò)調(diào)用去運(yùn)行腳本命令。 前文 端技術(shù)范圍不斷發(fā)展,前端開發(fā)不僅限于直接編寫html,css和javascript,Web應(yīng)用日益龐大,代碼也更加龐大,因此許多新的思想(例如模塊化和工程化等)和框架(React和Vue等),以及新的語(yǔ)言(Es6 TypeSc...

    leo108 評(píng)論0 收藏0
  • 前端工程化工具初選

    摘要:面對(duì)日益紛雜的前端工具,作為新人常感無(wú)從下手。腳手架應(yīng)用開發(fā)流程與工具項(xiàng)目生成器集成方案解決前端開發(fā)中自動(dòng)化工具性能優(yōu)化模塊化框架開發(fā)規(guī)范代碼部署開發(fā)流程等問題框架簡(jiǎn)潔直觀強(qiáng)悍的框架,讓開發(fā)更迅速后端程序的福音。   面對(duì)日益紛雜的前端工具,作為新人常感無(wú)從下手。經(jīng)過(guò)一番檢索和簡(jiǎn)單對(duì)比,再結(jié)合自己的喜好,篩選了將要學(xué)習(xí)和使用的工具,以適應(yīng)日益工程化、專業(yè)化的 Web 前端開發(fā)工作。 s...

    Rocture 評(píng)論0 收藏0
  • 如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境(一)

    摘要:我覺得這方面的原因是當(dāng)時(shí)對(duì)和的依賴,導(dǎo)致大家對(duì)的興趣不弄,錯(cuò)過(guò)了最佳時(shí)機(jī),這個(gè)其實(shí)跟百度自己的的技術(shù)棧有很大關(guān)系。這個(gè)阮一峰對(duì)于前端構(gòu)建的變化吐槽過(guò),說(shuō)新的構(gòu)建工具就是的構(gòu)建工具。 文章來(lái)源 最近幾年,前端發(fā)展越來(lái)越迅速,各種萌新加入了前端這個(gè)大家庭,大有趕IOS、超Android的趨勢(shì)呀!同時(shí),萌新們提出了各種前端工作問題,除了最基礎(chǔ)的html、css、js三板斧之外,最讓人頭疼的應(yīng)...

    KavenFan 評(píng)論0 收藏0
  • 如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境(一)

    摘要:我覺得這方面的原因是當(dāng)時(shí)對(duì)和的依賴,導(dǎo)致大家對(duì)的興趣不弄,錯(cuò)過(guò)了最佳時(shí)機(jī),這個(gè)其實(shí)跟百度自己的的技術(shù)棧有很大關(guān)系。這個(gè)阮一峰對(duì)于前端構(gòu)建的變化吐槽過(guò),說(shuō)新的構(gòu)建工具就是的構(gòu)建工具。 文章來(lái)源 最近幾年,前端發(fā)展越來(lái)越迅速,各種萌新加入了前端這個(gè)大家庭,大有趕IOS、超Android的趨勢(shì)呀!同時(shí),萌新們提出了各種前端工作問題,除了最基礎(chǔ)的html、css、js三板斧之外,最讓人頭疼的應(yīng)...

    Yangyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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