本文來自網易云社區(qū)

介紹

fle-cli旨在幫助我們從復雜繁瑣的編譯配置中解放出來，全身心地投入業(yè)務開發(fā)中，提高開發(fā)效率。

它是真正意義上的全局腳手架，區(qū)別于市面上其他的全局腳手架，它不會在項目工程中生成各種編譯配置文件，也不會給你安裝一系列編譯的依賴包，這意味著你的項目工程可以非常干凈純粹。

它同時兼容Mac和Windows系統(tǒng)，保持著良好的擴展性，滿足你的個性化需求，最重要的是一次安裝，可以支撐所有前端項目的構建編譯。

fle 取自 Front Line End 的第一個字母，我的理解為連接前端的橋梁，簡化前端項目的基礎建設工作。

安裝

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

注意：首次安裝時間可能會比較長，因為我們需要全量安裝編譯所需的依賴包。當然我們也考慮到這點，進行了一些優(yōu)化，更新時會以打補丁的形式進行，速度非常快。

快速上手

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

說明：上傳服務需要配置密鑰等信息，當然你也可以自己申請：文檔。

功能特性

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

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

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

• 生產編譯環(huán)節(jié)支持自動上傳靜態(tài)資源，生成線上可訪問的html文件

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

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

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

• standard elsint規(guī)范團隊編碼，支持自定義擴展配置

• 在不影響圖片質量的情況下，自動優(yōu)化圖片大小，利于傳輸

fle-cli功能一覽

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

結束語

我個人的感覺就是一個字：爽，仿佛回到了刀耕火種的年代，上手就是擼代碼，沒有編譯配置、Babel、Eslint、CSS預處理，還有其他雜七雜八的東西，統(tǒng)統(tǒng)不用管。

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

項目倉庫

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

總結

以上是生活随笔為你收集整理的全局脚手架了解一下【fle-cli】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。