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

介紹

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

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

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

fle 取自 Front Line End 的第一個(gè)字母，我的理解為連接前端的橋梁，簡化前端項(xiàng)目的基礎(chǔ)建設(shè)工作。

安裝

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

注意：首次安裝時(shí)間可能會比較長，因?yàn)槲覀冃枰堪惭b編譯所需的依賴包。當(dāng)然我們也考慮到這點(diǎn)，進(jìn)行了一些優(yōu)化，更新時(shí)會以打補(bǔ)丁的形式進(jìn)行，速度非常快。

快速上手

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

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

功能特性

• 支持多頁面構(gòu)建，支持自定義頁面信息

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

• 預(yù)編譯框架和第三方j(luò)s庫，減少構(gòu)建時(shí)間、避免單個(gè)文件過大、利于公共文件緩存

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

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

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

• 集成移動端的rem適配方案，rpx自動轉(zhuǎn)rem單位

• standard elsint規(guī)范團(tuán)隊(duì)編碼，支持自定義擴(kuò)展配置

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

fle-cli功能一覽

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

結(jié)束語

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

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

項(xiàng)目倉庫

網(wǎng)易云新用戶大禮包：https://www.163yun.com/gift

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。