基于FIS的純前端模塊化解決方案pure

基于FIS的純前端模塊化解決方案pure

pure是基于FIS二次封裝能力封裝而成的解決方案，可以直接使用，也可以參考fis-pure自行封裝或組合使用插件來構建屬于自己的一體化解決方案。

模塊化開發

• 不僅僅是腳本模塊化，pure帶給你模版、腳本、樣式的組件化方案。
• 自動加載模塊化依賴，無需手動引入靜態資源。
• 與Node.js風格一致的模塊化開發體驗，告別 define。

自動性能優化

pure可以自動壓縮、合并頁面引用到的所有資源，配置靈活，一個命令完成性能優化，輕松實踐雅虎14條優化規則。并且這一切優化無需任何后端框架或服務支持。

前端語言支持

• 直接編寫less文件，無需額外編譯工具支持。
• 可以直接在腳本中通過 var template = __inline('path/to/template.tmpl'); 引用經過了預編譯的underscore模版，無需異步請求和解析。
• 更多的前端語言支持可以參考輔助開發

本地調試環境

• 通過 pure server start 就能開啟本地調試服務器。
• 通過 fis release --watch --live 實現監聽文件修改，自動刷新頁面等功能。更多內容可以參考輔助開發。

如何使用

安裝

• 安裝 nodejs&npm

• 安裝pure

  npm install fis-pure -g
  pure -v

快速上手

快速上手請參考前端模塊化

模塊化加載

如何使用模塊化加載可以參考fis-pure-demo，大致需要以下幾個步驟

• 在需要模塊化資源管理的頁面，如index.html中引用Mod，注意Mod需放在lib文件夾內，因為這是模塊化加載庫，不能被模塊化。 示例
• modules目錄下添加頁面腳本，如main.js，在頁面中則可以通過require('main')加載靜態資源。 示例
• 需要引用其他模塊，以jquery.js為例，只要在modules目錄中添加代碼，在main.js中就可以通過var $ = require('jquery')加載，在通過pure release發布后，頁面就會自動加載jquery.js與main.js。

目錄規范

pure自帶了一個非常簡單的目錄規范

• 所有組件化的腳本、樣式、圖片均放在modules目錄中，可以按照組件劃分目錄，非模塊化的腳本放在lib目錄中。
• page目錄下的頁面文件會發布到根目錄，靜態資源會發布到static目錄。

任何 目錄規范、部署規范、編譯規范 都是可配置的（配置代碼）。

如果希望調整目錄規范，建議將配置代碼中roadmap.path的部分整體復制到項目的fis-conf.js中再進行調整，避免配置不符合預期的問題。

內置的規范包括：

1. modules 目錄下的js、css、less文件都是模塊化文件，腳本會自動包裝define，無需手動添加。使用require.async或者require加載模塊的時候id與文件的對應規則是這樣的：

   文件	引用id	舉個例子
   /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');

2. lib 目錄下的文件不被認為是模塊化的，請直接在頁面上使用script或link標簽引用。

項目主頁：http://www.baiduhome.net/lib/view/home/1406599898874