本文来自网易云社区

介绍

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

全局脚手架了解一下【fle-cli】的更多相关文章

  1. vue打包部署(含2.0)

    到这里vue的所有平时使用的知识点都写完了 先补充一下vue2.x的安装 ## 全局脚手架 npm install vue/cli -g ## 查看版本 vue --version ## 新建项目 v ...

  2. angular cli全局版本大于本地版本 把本地版本升级方式

    查看 angular 版本  ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...

  3. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  4. 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  5. Vue脚手架

    https://cli.vuejs.org/zh/guide/ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vu ...

  6. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  7. vue-cli3脚手架的配置以及使用

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global  ...

  8. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  9. vue-cli 脚手架

    vue脚手架 vue-cli 基于webpack.帮助我们完成了对项目的基本架构,冗余代码比较多 ,资源的浪费 1.全局安装vue的脚手架 cnpm install @vue/cli -g 2.查看版 ...

随机推荐

  1. 获取Spring管理的Bean

    1.再Spring配置文件中配置工具类 <!-- 用于持有ApplicationContext,可以使用SpringContextHolder.getBean('xxxx')的静态方法得到spr ...

  2. programming-languages学习笔记--第2部分

    programming-languages学习笔记–第2部分 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src ...

  3. Linux学习总结(三)之 putty,xshell远程连接及密钥认证篇

     一:putty 下载 1:认准两个地方 a. Download putty b. chiark greenend 2:下载32位的zip包,这是一个工具包合集,不单是一个终端工具 二:putty设置 ...

  4. 443M衣架遥控arduino代码备档

    ] = {,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,}; ] = {,,,,,,,,,,,,,,,,,,,,,,, ...

  5. mysql使用Navicat 导出和导入数据库

    系统环境: Win7 x64软件准备:Navicat Premium_11.2.7简体中文版下载网址:http://www.cr173.com/soft/419023.html 现在我就向大家介绍 m ...

  6. 用条件变量实现事件等待器的正确与错误做法--转自陈硕的Blog

    用条件变量实现事件等待器的正确与错误做法 TL;DR 如果你能一眼看出 https://gist.github.com/chenshuo/6430925 中的那 8 个 Waiter classes ...

  7. python -- @classmethod @staticmethod区别和使用

    python中的定义: class MyClass: ... @classmethod  # classmethod的修饰符 def class_method(cls, arg1, arg2, ... ...

  8. platform平台总线

    一.何为平台总线 (1)相对于usb.pci.i2c等物理总线来说,platform总线是虚拟的.抽象出来的.(2)CPU与外部通信的2种方式:地址总线式连接和专用协议类接口式连接.平台总线,是扩展到 ...

  9. Oracle12C创建用户遇到ora-6509

    引用自:http://blog.itpub.net/29357786/viewspace-1995055/ ORACLE 12C创建用户之ORA-65096 2016年2月25日,一北京北方人瑞教育咨 ...

  10. c++基础STL

    今天给大家介绍几个容器,包含的头文件为<vector>,<stack>,<queue>,<map>,<list>,<deque> ...