1、 FIS支持三个命令,分别是fis release、fis server、fis install。...当用户输入fis xx的时候,内部调用fis-command-release、fis-command-server、fis-command-install这三个插件来完成任务。...同时,FIS的命令行基于commander这个插件构建,熟悉这个插件的同学很容易看懂FIS命令行相关部分源码。 2、FIS以fis-kernel为核心。...其实FIS比较精华的部分集中在fis release这个命令,不过fis server这个命令相对简单,更有助于我们从纷繁的细节中跳出来,窥探FIS的整体概貌。 假设我们已经安装了FIS。...好,打开控制台,输入下面命令,其实就是打开FIS的server目录 fis server open 从package.json可以知道,此时调用了 fis/bin/fis,里面只有一行有效代码,调用fis.cli.run
本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 前面已经已fis server open为例,讲解了FIS的整体架构设计,以及命令解析&执行的过程。...下面就进入FIS最核心的部分,看看执行fis release这个命令时,FIS内部的代码逻辑。...// 项目根路径,为 fis-conf.js 所在的目录 }else{ // fis-conf.js路径,为 逐层向上遍历后,找到的 fis-conf.js 路径...细节非常的多,主要在fis.release()这个调用里完成,基本上用到了fis-kernel里所有的模块,如release、compile、cache等。...fis.release = require('.
当我们使用 FIS 插件的时候,有没有想过自己也开发一个基于 FIS 的插件,参与 FIS 打包编译的整个流程;那么问题就来了: FIS 的编译过程运行原理是怎样的呢?...FIS 编译打包的过程有哪些? 怎么参与FIS 的打包编译过程? 怎么实现一个基于FIS的插件? FIS 是怎么引入自定义插件的?...fis内置的fis-optimizer-uglify-js插件和fis-optimizer-clean-css插件都是这类扩展。...这意味着,要想扩展fis可以有 三种途径 : 1、使用fis的用户,自己需要某种插件,可以在fis安装目录的 同级,安装自己扩展的插件。...:fis编译机制内核 fis-command-release:fis release命令的提供者,处理编译过程,并提供文件监听、自动上传等功能 fis-command-install:fis install
一、安装 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js或Gulpfile.js,新建fis-config.js文件 配置api介绍如下...fis.set 设置的值通过fis.get()获取 fis.get(key) 获取已经配置的属性,和 fis.set() 成对使用 fis.match(selector, props, [, important...q=fis-parser%20fis3-parser 通过插件我们就可以使用一些基础功能的组合了: // 加 md5 fis.match('*....1、开启server到内置server调试目录 fis3 server open 2、发布到内置server发布目录 fis3 release 3、文件监听 fis3 release -w //FIS3...fis-optimizer-clean-css fis-optimizer-png-compressor fis-optimizer-uglify-js fis-spriter-csssprites fis3
部分插件 fis3-hook-lego 查找文件 fis3-hook-annotation 文件注解 Tip 1、勿使用lego_modules文件全路径 <script src="/lego_modules.../img/noHash/目录下 5、小于5k的js,小于20k的css会inline至html 6、被sprite的png不会被发布出去 7、不需要被离线包打包的文件设置 pack=false // <em>fis</em>.conf...<em>fis</em>.match('*', { pack: false }) <!
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 部分插件 fis3-hook-lego 查找文件 fis3-hook-annotation 文件注解 Tip 1、勿使用.../img/noHash/目录下 5、小于5k的js,小于20k的css会inline至html 6、被sprite的png不会被发布出去 7、不需要被离线包打包的文件设置 pack=false // fis.conf...fis.match('*', { pack: false }) <!
JDK8中有双冒号的用法,就是把方法当做参数传到stream内部,使stream的每个元素都传入到该方法里面执行一下。
本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 fis3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: 资源嵌入 资源定位...fis3相对于fis2来说,用户更容易使用,给插件开发者提供更多的能力 这主要体现于以下两点: 类似css的覆盖式配置方式,不需要用命令行参数来进行配置 提供许多事件锚点 这篇文章主要介绍的就是第2点,...讲解fis3提供的特殊事件,及其作用。...当查找文件时派送, 可以扩展 fis 默认的查找文件功能。...,那么我们可能需要写两个插件,分别是: fis3-preprocessor-xxx 和 fis3-postprocessor-xxx 我们真的需要吗?
Fis3构建工具 Fis3的安装 npm install -g fis3 查看fis3 fis3 –v fi3构建工具新建文件夹 新建一个根目录 进入根目录输入fis3 init指令初始化 ?...Fis3的配置文件 fis.match('*...., { optimizer: fis.plugin('uglify-js') }); fis.match('*.css', { optimizer: fis.plugin('clean-css...') }); fis.match('*.png', { optimizer: fis.plugin('png-compressor') }); fis.media('dev') .match...绝对路径转化成相对路径的配置文件 fis.hook(‘relative’) fis.match(‘**’,{relative:true}) postcss结合fis3使用 // fis3 的 postcss
前面文章讲了FIS的源码实现细节,这篇文章偏实战一些,给出FIS跟require.js结合的简单例子。 FIS编译流程 如果已熟悉了FIS的编译设计,可以跳过这一节,直接进入下一小结。...FIS的编译主要有三步: 命令解析-->资源编译-->资源部署 资源编译:FIS将文件资源抽象成File实例,该实例上有文件资源类型、id、内容、部署路径等的属性。...FIS的这套编译体系,使得基于FIS的扩展相对比较容易。在扩展的同时,还可以确保编译的高性能。针对资源编译环节的扩展,除非是设计不合理,不然一般情况下不会导致性能的急剧降低。...实战:修改fis-conf.js 首先,打开fis-conf.js,加入如下配置。...配置大致意思是: 在postprocessor环节,针对js文件,调用fis-postprocessor-jswrapper进行处理。
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match(...moduleId,希望以后能直接require('utils') }) .match('::package', { postpackager: [ fis.plugin...-- 不会有utils.js的引用,也就意味着fis并不能发现用moduleId直接引用的依赖 --> <!.../modules/common/utils.js define('utils', function() { // ... }) 解读 实际上moduleId只决定本身的define语句 要让fis...识别出类似moduleId的短引用,可以配置commonJs的paths/packages映射 fis.hook('commonjs', { paths: { utils: '/
本文作者:IMWeb ouven 原文出处:IMWeb社区 未经同意,禁止转载 一、安装 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js...fis.set 设置的值通过fis.get()获取 fis.get(key) 获取已经配置的属性,和 fis.set() 成对使用 fis.match(selector, props, [, important...q=fis-parser%20fis3-parser 通过插件我们就可以使用一些基础功能的组合了: // 加 md5 fis.match('*....1、开启server到内置server调试目录 fis3 server open 2、发布到内置server发布目录 fis3 release 3、文件监听 fis3 release -w //FIS3...fis-optimizer-clean-css fis-optimizer-png-compressor fis-optimizer-uglify-js fis-spriter-csssprites fis3
本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载 目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。...fis 编译流程 image.png 官方的这张图,对fis的构建流程讲述的很清楚了,主要包括单文件编译和打包,业务中的插件也主要是这两种,至于是pre还是post,差别不是特别大。...参考这里 单元测试 fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是: var fs = require...('fs'), path = require('path'), fis = require('fis3'), _ = fis.util, expect = require...// 测试用例 beforeEach(function() { // 这里写各种fis的配置 fis .match('*', {
目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。...fis 编译流程 官方的这张图,对fis的构建流程讲述的很清楚了,主要包括单文件编译和打包,业务中的插件也主要是这两种,至于是pre还是post,差别不是特别大。...参考这里 单元测试 fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是: var fs = require...('fs'), path = require('path'), fis = require('fis3'), _ = fis.util, expect = require...// 测试用例 beforeEach(function() { // 这里写各种fis的配置 fis .match('*', {
List接口实现的类:ArrayList(实现动态数组), Vector(实现动态数组) ,LinkedList(实现链表), Stack(实现堆栈) 一 list接口 1.java.util.ArrayList...i = al.iterator();i.hasNext(); ){ String str = (String) i.next(); System.out.println(str); } } } 3.java.util.Vector...i = al.iterator();i.hasNext(); ){ String str = (String) i.next(); System.out.println(str); } } } 3.java.util.LinkedList...i = al.iterator();i.hasNext(); ){ String str = (String) i.next(); System.out.println(str); } } 4.java.util.Stack
Java interface有多种用法,最常见的就是通过interface传递数据 第一种 public interface IData { void value(String str); }...method stub System.out.println(str); } }); } } 以上为最简单的数据传递用法
领取专属 10元无门槛券
手把手带您无忧上云