全局脚手架了解一下【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
全局脚手架了解一下【fle-cli】的更多相关文章
- vue打包部署(含2.0)
到这里vue的所有平时使用的知识点都写完了 先补充一下vue2.x的安装 ## 全局脚手架 npm install vue/cli -g ## 查看版本 vue --version ## 新建项目 v ...
- angular cli全局版本大于本地版本 把本地版本升级方式
查看 angular 版本 ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...
- Vue脚手架
https://cli.vuejs.org/zh/guide/ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vu ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- vue-cli3脚手架的配置以及使用
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- vue-cli 脚手架
vue脚手架 vue-cli 基于webpack.帮助我们完成了对项目的基本架构,冗余代码比较多 ,资源的浪费 1.全局安装vue的脚手架 cnpm install @vue/cli -g 2.查看版 ...
随机推荐
- ParameterDirection中的参数(Input,Output,InputOutput,ReturnValue)
ParameterDirection中的参数类型定义,首先看ParameterDirection定义 // 摘要: // 指定查询内的有关 System.Data.DataSet 的参数的类型. pu ...
- HTML和CSS实现常见的布局
https://segmentfault.com/a/1190000003931851#articleHeader15
- node express 跨域问题
express = require('express'); var app = express(); //设置跨域访问 app.all('*', function(req, res, next) { ...
- POJ 3264 Balanced Lineup 【ST表 静态RMQ】
传送门:http://poj.org/problem?id=3264 Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total S ...
- xampp安装及使用时的问题总结
本文主要介绍易错点,具体安装过程可参考链接1 1.首先要以管理员身份运行,否则报错. 2.如果你的网站首页名字不是index,那么你在访问的时候就必须输入你首页的全称. 3.htdocs就是网站的根目 ...
- 7.spring:SpringAOP(配置文件)
SpringAOP(xml文件配置) 配置文件的方式,主要是在xml文件中进行配置,不使用注解! 目录: AtithmeticCalculator.java public interface Atit ...
- Leetcode225 用栈实现队列
大众思路: 用两个栈实现,记为s1,s2 1.元素入栈时,加入s1 2.元素出栈时,对s2进行判断,如果s2为空,则将全部s1元素弹出并压入到s2,然后从s2栈顶弹出一个元素:如果s2不为空,则直接从 ...
- CVPR 2016 paper reading (6)
1. Neuroaesthetics in fashion: modeling the perception of fashionability, Edgar Simo-Serra, Sanja Fi ...
- C# 局部类型 Partial
Partial是局部类型的意思.允许我们将一个类.结构或接口分成几个部分,分别实现在几个不同的.cs文件中.C#编译器在编译的时候仍会将各个部分的局部类型合并成一个完整的类 局部类型适用情况: (1) ...
- Maven项目改为spring boot项目的方法
目录树 新建Maven项目及步骤 修改方法 启动测试 新建Maven项目及步骤 我这里是从创建开始讲,使用的工具是Idea2017版本.如果是已经创建了Maven,想改为spring boot项目的请 ...