本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 fis3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: 资源嵌入 资源定位...fis3相对于fis2来说,用户更容易使用,给插件开发者提供更多的能力 这主要体现于以下两点: 类似css的覆盖式配置方式,不需要用命令行参数来进行配置 提供许多事件锚点 这篇文章主要介绍的就是第2点,...讲解fis3提供的特殊事件,及其作用。...都会先抛出一个事件 这些节点的意义也非常深远,甚至可以改变fis3的compile流程,同样笔者也举两个例子 4.1 不需要两个插件!...后续 可以看到,fis3最重大的改进就是提供了更多的想象空间给插件开发者 合理利用这些特性,我们可以在fis3的环境下做许多事情 但就只有这些吗? No!还有另外一些更加有趣更加开放的特性还没介绍。
一、安装 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js或Gulpfile.js,新建fis-config.js文件 配置api介绍如下...这是 fis3 中的一个重要概念,其意味着有多份配置,每一份配置都可以让 fis3 进行不同的编译; fis.media('dev').match('*.js', { optimizer: null...1、开启server到内置server调试目录 fis3 server open 2、发布到内置server发布目录 fis3 release 3、文件监听 fis3 release -w //FIS3...构建流程 FIS3 是基于文件对象进行构建的,每个进入 FIS3 的文件都会实例化成一个 File 对象,整个构建过程都对这个对象进行操作完成构建任务。...: fis3 release [-d path] //发布目录 fis3 install 插件名 //安装一个插件 fis3 init //初始化一个项目 fis3
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('c...
本文作者:IMWeb ouven 原文出处:IMWeb社区 未经同意,禁止转载 一、安装 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js...这是 fis3 中的一个重要概念,其意味着有多份配置,每一份配置都可以让 fis3 进行不同的编译; fis.media('dev').match('*.js', { optimizer: null...1、开启server到内置server调试目录 fis3 server open 2、发布到内置server发布目录 fis3 release 3、文件监听 fis3 release -w //FIS3...构建流程 FIS3 是基于文件对象进行构建的,每个进入 FIS3 的文件都会实例化成一个 File 对象,整个构建过程都对这个对象进行操作完成构建任务。...: fis3 release [-d path] //发布目录 fis3 install 插件名 //安装一个插件 fis3 init //初始化一个项目 fis3
Fis3构建工具 Fis3的安装 npm install -g fis3 查看fis3 fis3 –v fi3构建工具新建文件夹 新建一个根目录 进入根目录输入fis3 init指令初始化 ?...发布以及监听文件 指令:fis3 release –w –d ..../project(project自己建的文件) 建文件夹时,防止递归,加上配置文件 // FIS3 会读取全部项目目录下的资源,如果有些资源不想被构建,通过以下方式排除。...Fis3的配置文件 fis.match('*....绝对路径转化成相对路径的配置文件 fis.hook(‘relative’) fis.match(‘**’,{relative:true}) postcss结合fis3使用 // fis3 的 postcss
本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载 目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。...参考这里 单元测试 fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是: var fs = require...('fs'), path = require('path'), fis = require('fis3'), _ = fis.util, expect = require
目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。...参考这里 单元测试 fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是: var fs = require...('fs'), path = require('path'), fis = require('fis3'), _ = fis.util, expect = require
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('com...
所以,fis3为了解决这个问题,就在fis3中内置了web server 以方便调式查看我们的构建结果。 那问题是我们该如何使用呢?...往下看~ fis3 server open 打开web server根目录 (1)在使用该命令的时候,有一个前提————即,我们在构建项目时,不指定输出目录,即fis3 release -d ..../output 变成了 fis3 release命令; (2)使用fis3 release 构建时,fis3会将构建结果发送到内置的web server根目录下。...fis3内置的web server也是如此。所以,我们无需每次启动一次web server。 fis3 release -w 文件监听 这是文件监听命令。...替代 fis3 内置web server 默认情况下,我们fis3 release 之后,会将构建结果发送到fis3 内置的web server的根目录下。
:npm install -g fis3 命令; mac系统下使用:sudo npm install -g fis3 命令; 安装完成后测试fis3是否安装成功:fis3 -v,若命令行或是mac...: fis3 release -d ....运行fis3 release -d ....以上列出的都是fis3内置的插件,无需安装。...下一次,将会带大家继续fis3的构建之路。
作者:feix760 首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match('/modules/c...
本文主要介绍了如何将一个使用webpack构建的web应用打包为适用于各浏览器的可执行文件。首先介绍了webpack和browserify的区别,然后说明了we...
别急,fis3还有一个强大的功能——在js中嵌入资源。 (2)在js中嵌入资源 前提:__inline()函数,注意是2条短下划线。...a.css'); 编译后,js文件中那串代码变成了: var css="body \n{color:red;\n}"; //假设a.css的内容如下: body{ color:red; } 除了之外,fis3
我们在第一篇中就曾经指出,资源定位是fis3中很重要的特性之一。
本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 不清楚fis3是什么的可以先看这个链接 http://fis.baidu.com/ 背景 从fis的官方文档上看,fis...举个例子 最近看到有一个gulp-lzmajs的插件,我尝试把它改成fis3插件。 接下来我们要思考下面几个问题 做什么阶段的插件? lzma库是异步调用的,怎么处理?...第一个问题:fis3把构建分成了三个阶段【编译】【打包】【发布】,当然我们只希望所有文件打包好之后再做js文件的lama压缩,所以做打包阶段的插件,扩展postpackager 第二个问题:我们需要一个很神奇的包
举个例子 最近看到有一个gulp-lzmajs的插件,我尝试把它改成fis3插件。 接下来我们要思考下面几个问题 做什么阶段的插件? lzma库是异步调用的,怎么处理?...第一个问题:fis3把构建分成了三个阶段【编译】【打包】【发布】,当然我们只希望所有文件打包好之后再做js文件的lama压缩,所以做打包阶段的插件,扩展postpackager 第二个问题:我们需要一个很神奇的包
4 Fis3 Fis3(https://fex.baidu.com/fis3/)是一个来自百度的优秀国产构建工具。...相对于Grunt、Gulp这些只提供了基本功能的工具,Fis3集成了Web开发中的常用构建功能,如下所述。 读写文件:通过fis.match读文件,release配置文件的输出路径。...大致使用如下: 可以看出Fis3很强大,内置了许多功能,无须做太多配置就能完成大量工作。 Fis3的优点是集成了各种Web开发所需的构建功能,配置简单、开箱即用。...Fis3是一种专注于Web开发的完整解决方案,如果将Grunt、Gulp比作汽车的发动机,则可以将Fis3比作一辆完整的汽车。
7:FIS3 https://fex-team.github.io/fis3/ Fis3是来自百度的国产构建工具,相对于grunt,gulp这些只提供了基本功能的工具,Fis3集成了web开发中常用的购将功能
近期把团队的项目构建迁移到fis3,同时把模块加载器也由之前的requirejs切换到了modJS。 有些同学可能不了解modJS,这里做个简单的介绍。 那么,modJS是什么呢?...除了体量非常小之外,modJS配合fis3的fis3-hook-commonjs插件,可以在纯前端项目中实现类似nodejs一样的开发体验。 那么,我们为什么要使用modJS呢?...发布编译时,由构建工具统一添加define包裹,自动添加模块id(默认根据路径生成,也可以在fis3的配置中声明格式)。整体的开发体验更好一些。...一般情况下,modJS配合fis3已经可以满足大部分需求,并且官方还提供了完整支持amd规范的esl-mod.js。
领取专属 10元无门槛券
手把手带您无忧上云