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

介绍

fle-cli旨在帮助我们从复杂繁琐的编译配置中解放出来，全身心地投入业务开发中，提高开发效率。

它是真正意义上的全局脚手架，区别于市面上其他的全局脚手架，它不会在项目工程中生成各种编译配置文件，也不会给你安装一系列编译的依赖包，这意味着你的项目工程可以非常干净纯粹。

它同时兼容Mac和Windows系统，保持着良好的扩展性，满足你的个性化需求，最重要的是一次安装，可以支撑所有前端项目的构建编译。

fle 取自 Front Line End 的第一个字母，我的理解为连接前端的桥梁，简化前端项目的基础建设工作。

在使用过程有任何建议和疑问，欢迎邮件我：[email protected]

安装

$ npm install -g fle-cli

# yarn
$ yarn global add fle-cli

注意：首次安装时间可能会比较长，因为我们需要全量安装编译所需的依赖包。当然我们也考虑到这点，进行了一些优化，更新时会以打补丁的形式进行，速度非常快。

快速上手

# 查看命令
$ fle

# 生成项目
$ fle init 

# 本地开发
$ fle dev

# 生产编译
$ fle build

# 框架&js库分离
$ fle dll

# js库编译，导出es6
$ fle lib

# 上传文件
$ fle upload 

说明：上传服务需要配置密钥等信息，这里是我们在用的配置，但不对外开放，当然你也可以自己申请：文档。

功能特性

• 支持多页面构建，支持自定义页面信息
• 本地开发调试，增加了人性化的页面导航、移动端调试（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预处理，还有其他杂七杂八的东西，统统不用管。

但与那个年代不同的是，我们可以使用最新的特性，享受自动化构建的便捷服务。

项目仓库