美文网首页我爱编程
全局脚手架了解一下【fle-cli】

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

作者: 网易数帆 | 来源:发表于2018-08-22 14:34 被阅读0次

本文来自网易云社区


介绍

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】

      本文来自网易云社区 介绍 fle-cli旨在帮助我们从复杂繁琐的编译配置中解放出来,全身心地投入业务开发中,提高开...

    • 2019-03-03(react学习)

      1、全局安装脚手架:npm install -g create-react-app创建react脚手架(全局)2、...

    • react脚手架

      可以全局安装以下脚手架,也可以直接使用npx安装项目 全局安装脚手架npm i -g create-reac...

    • react-从零开始创建项目

      1、全局安装脚手架 2、用脚手架工具创建项目 3、启动项目

    • feflow脚手架

      脚手架,fellow的脚手架基于yeoman全局安装yo和generator 生成脚手架模板 生成结构如下 然后我...

    • 初识脚手架

      React脚手架 全局安装脚手架:npm install create-react-app -g 创建项目:cre...

    • 一、React项目构建

      React 快速开始(环境搭建及脚手架配置) 全局安装 yarn: npm install -g yarn; 全局...

    • Mysql+Nodejs+Koa2+Vue+Quasar零起点教

      一、安装vue 全局安装vue脚手架:npm install -g vue-cli 二、安装quasar 全局安装...

    • koa2 && koa-generator

      koa2 脚手架 全局安装Koa脚手架npm install koa-generator -g 模板生成(将下面的...

    • react-30-脚手架搭建

      1.前言 30 开头的文章 后面都是基于脚手架的项目 1.1 脚手架 环境 脚手架都是必不可少的全局安装 npm ...

    网友评论

      本文标题:全局脚手架了解一下【fle-cli】

      本文链接:https://www.haomeiwen.com/subject/qzfyiftx.html