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为核心。...lib/ ├── cache.js // 缓存模块，提高编译速度 ├── compile.js // （单）文件编译模块 ├── config.js // 配置模块，fis.config...其实FIS比较精华的部分集中在fis release这个命令，不过fis server这个命令相对简单，更有助于我们从纷繁的细节中跳出来，窥探FIS的整体概貌。 假设我们已经安装了FIS。
本文作者：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
1、在使用vue开发的时候经常要涉及到跨域的问题，其实在vue cli中是有我们设置跨域请求的文件的。
部分插件 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 }) <!
一、安装 安装初始化 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
本文作者：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 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
目前业务正在逐步迁移到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('*', {
本文作者：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('*', {
本文作者：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: '/
：npm install -g fis3 命令; mac系统下使用：sudo npm install -g fis3 命令； 安装完成后测试fis3是否安装成功：fis3 -v，若命令行或是mac...: fis3 release -d ....例如： fis.media('develop').match('.js',{` optimizer: fis.plugin('uglify-js') }); 然后执行fis命令： fis3 release...与传统不同，fis3中使用MD5戳 对资源文件进行唯一标识。 做法：配置文件 fis.match('*....写法： //(1)配置fis中使用csssprites fis.config.set('modules.spriter','csssprites'); //(2)启用插件 fis.match('::packgae
所以，fis3为了解决这个问题，就在fis3中内置了web server 以方便调式查看我们的构建结果。 那问题是我们该如何使用呢？.../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的根目录下。...例如，我们将构建结果发送到/Users/imaginexie/htdocs 目录下： **做法：**配置文件fis-conf.js fis.match('*',{ deploy:fis.plugin(
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
