全局腳手架了解一下【fle-cli】

本文來自網易雲社區

介紹

fle-cli旨在幫助咱們從複雜繁瑣的編譯配置中解放出來，全身心地投入業務開發中，提升開發效率。

它是真正意義上的全局腳手架，區別於市面上其餘的全局腳手架，它不會在項目工程中生成各類編譯配置文件，也不會給你安裝一系列編譯的依賴包，這意味着你的項目工程能夠很是乾淨純粹。

它同時兼容Mac和Windows系統，保持着良好的擴展性，知足你的個性化需求，最重要的是一次安裝，能夠支撐全部前端項目的構建編譯。

fle 取自 Front Line End 的第一個字母，個人理解爲鏈接前端的橋樑，簡化前端項目的基礎建設工做。

安裝

$ npm install -g fle-cli# yarn$ yarn global add fle-cli

注意：首次安裝時間可能會比較長，由於咱們須要全量安裝編譯所需的依賴包。固然咱們也考慮到這點，進行了一些優化，更新時會以打補丁的形式進行，速度很是快。

快速上手

# 查看命令$ fle# 生成項目$ fle init <project-name># 本地開發$ fle dev# 生產編譯$ fle build# 框架&js庫分離$ fle dll# js庫編譯，導出es6$ fle lib# 上傳文件$ fle upload <file|glob>

說明：上傳服務須要配置密鑰等信息，固然你也能夠本身申請：文檔。

功能特性

• 支持多頁面構建，支持自定義頁面信息

• 本地開發調試，增長了人性化的頁面導航、移動端調試（VConsole）

• 預編譯框架和第三方js庫，減小構建時間、避免單個文件過大、利於公共文件緩存

• 生產編譯環節支持自動上傳靜態資源，生成線上可訪問的html文件

• 編譯js庫導出ES6代碼，支持tree shaking，最大化減小冗餘代碼

• css modules解決class命名嵌套和衝突的問題

• 集成移動端的rem適配方案，rpx自動轉rem單位

• standard elsint規範團隊編碼，支持自定義擴展配置

• 在不影響圖片質量的狀況下，自動優化圖片大小，利於傳輸

fle-cli功能一覽

更詳細的說明和配置文檔：https://github.com/ansenhuang/fle-cli#fle-cli

結束語

我我的的感受就是一個字：爽，彷彿回到了刀耕火種的年代，上手就是擼代碼，沒有編譯配置、Babel、Eslint、CSS預處理，還有其餘雜七雜八的東西，通通不用管。

但與那個年代不一樣的是，咱們可使用最新的特性，享受自動化構建的便捷服務。

項目倉庫

網易雲新用戶大禮包：https://www.163yun.com/gift