fis-pure前端模塊化解決方案
fis-pure 是基于FIS的純前端模塊化解決方案pure
pure是基于FIS二次封裝能力封裝而成的解決方案,可以直接使用,也可以參考fis-pure自行封裝或組合使用插件來構(gòu)建屬于自己的一體化解決方案。
模塊化開發(fā)
不僅僅是腳本模塊化,pure帶給你模版、腳本、樣式的組件化方案。
自動(dòng)加載模塊化依賴,無需手動(dòng)引入靜態(tài)資源。
與Node.js風(fēng)格一致的模塊化開發(fā)體驗(yàn),告別
define。
自動(dòng)性能優(yōu)化
pure可以自動(dòng)壓縮、合并頁(yè)面引用到的所有資源,配置靈活,一個(gè)命令完成性能優(yōu)化,輕松實(shí)踐雅虎14條優(yōu)化規(guī)則。并且這一切優(yōu)化無需任何后端框架或服務(wù)支持。
前端語言支持
直接編寫less文件,無需額外編譯工具支持。
可以直接在腳本中通過
var template = __inline('path/to/template.tmpl');引用經(jīng)過了預(yù)編譯的underscore模版,無需異步請(qǐng)求和解析。更多的前端語言支持可以參考輔助開發(fā)
本地調(diào)試環(huán)境
通過
pure server start就能開啟本地調(diào)試服務(wù)器。通過
fis release --watch --live實(shí)現(xiàn)監(jiān)聽文件修改,自動(dòng)刷新頁(yè)面等功能。更多內(nèi)容可以參考輔助開發(fā)。
如何使用
安裝
安裝 nodejs&npm
-
安裝pure
npm install fis-pure -g pure -v
快速上手
快速上手請(qǐng)參考前端模塊化
模塊化加載
如何使用模塊化加載可以參考fis-pure-demo,大致需要以下幾個(gè)步驟
在需要模塊化資源管理的頁(yè)面,如index.html中引用Mod,注意Mod需放在lib文件夾內(nèi),因?yàn)檫@是模塊化加載庫(kù),不能被模塊化。 示例
modules目錄下添加頁(yè)面腳本,如
main.js,在頁(yè)面中則可以通過require('main')加載靜態(tài)資源。 示例需要引用其他模塊,以jquery.js為例,只要在modules目錄中添加代碼,在main.js中就可以通過
var $ = require('jquery')加載,在通過pure release發(fā)布后,頁(yè)面就會(huì)自動(dòng)加載jquery.js與main.js。
目錄規(guī)范
pure自帶了一個(gè)非常簡(jiǎn)單的目錄規(guī)范
所有組件化的腳本、樣式、圖片均放在modules目錄中,可以按照組件劃分目錄,非模塊化的腳本放在lib目錄中。
page目錄下的頁(yè)面文件會(huì)發(fā)布到根目錄,靜態(tài)資源會(huì)發(fā)布到static目錄。
任何 目錄規(guī)范、部署規(guī)范、編譯規(guī)范 都是可配置的(配置代碼)。
如果希望調(diào)整目錄規(guī)范,建議將配置代碼中roadmap.path的部分整體復(fù)制到項(xiàng)目的fis-conf.js中再進(jìn)行調(diào)整,避免配置不符合預(yù)期的問題。
內(nèi)置的規(guī)范包括:
-
modules目錄下的js、css、less文件都是模塊化文件,腳本會(huì)自動(dòng)包裝define,無需手動(dòng)添加。使用require.async或者require加載模塊的時(shí)候id與文件的對(duì)應(yīng)規(guī)則是這樣的:文件 引用id 舉個(gè)例子 /modules/main.js main var main = require('main'); /modules/jquery/jquery.js jquery var $ = require('jquery'); /modules/jquery/jquery.scroll.js jquery/jquery.scroll require('jquery/jquery.scroll'); lib目錄下的文件不被認(rèn)為是模塊化的,請(qǐng)直接在頁(yè)面上使用script或link標(biāo)簽引用。
配置
參考fis配置
