本文作者：IMWeb 袁飞翔 原文出处：IMWeb社区 未经同意，禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match(...-- etc.. ---> require('utils') 想象中理想的输出 <!...识别出类似moduleId的短引用，可以配置commonJs的paths/packages映射 fis.hook('commonjs', { paths: { utils: '/...lookup函数需要返回两个信息: moduleId和fileId, moduleId用于替换require()语句( 注②)，fileId加入依赖中，所以lookup返回的moduleId需和相关文件的
作者：feix760 首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match('/modules/common/utils', {...-- etc.. ---> require('utils') 想象中理想的输出 <!...要让fis识别出类似moduleId的短引用，可以配置commonJs的paths/packages映射。...lookup函数需要返回两个信息: moduleId和fileId, moduleId用于替换require()语句( 注②)，fileId加入依赖中，所以lookup返回的moduleId需和相关文件的
1、 FIS支持三个命令，分别是fis release、fis server、fis install。...其实FIS比较精华的部分集中在fis release这个命令，不过fis server这个命令相对简单，更有助于我们从纷繁的细节中跳出来，窥探FIS的整体概貌。 假设我们已经安装了FIS。...在基于fis的二次解决方案中，一般会将名字覆盖 fis.cli.name = 'fis'; //colors // 日志友好的需求 fis.cli.colors = require('colors')...API fis.cli.help = function(){ // ... }; // 需要打印帮助信息的命令，在 fis.cli.help() 中遍历到。...整个流程归纳如下： 用户输入FIS命令，如fis server open 解析命令，根据指令加载对应插件，如fis-command-server 执行命令 fis-command-server源码 三个命令相关的插件中
本文作者：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 的pack 配置，对文件资源进行合并等操作，最后产出关于文件打包信息到 map.json 文件中，并产生相应的打包文件。...所以 FIS 的打包结果并 不会再嵌入到某个文件内，而是利用map.json中的数据进行运行时打包信息查询。...一、 在fis-conf.js中配置: fis.config.merge({ pack : { 'aio.js' : ['a.js', 'b.js', 'c.js'] }...-[需要插入的时机名称]-[自定义插件名]，例如：fis-parse-my-css; 编译阶段插件 1、在自定义插件的index.js中： /* * fis * http://fis.baidu.com...，从0到1发布一个npm包 小提示： 当然为了更快速的搞定一些小需求，可以把插件功能直接写到配置文件 fis-conf.js 中； // vi fis-conf.js fis.config.set('modules.postprocessor.js
部分插件 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 }) <!
这是 fis3 中的一个重要概念，其意味着有多份配置，每一份配置都可以让 fis3 进行不同的编译； fis.media('dev').match('*.js', { optimizer: null...设置为false表示不生成文件,@param: string packTo: '/static/pkg_widget.js', //分配到这个属性的文件将会合并到这个属性配置的文件中,@...('a.css'); 4.2 资源定位 其实官方文档讲了很多，但很简单，主要是在没有inline的条件下将内嵌的资源处理后加上后缀，放入到相对应的发布目录中自动定位。...用户可以在html的注释中声明依赖关系，这些依赖关系最终会被记录下来，当某个文件中包含字符 RESOURCE_MAP 那么这个记录会被字符串化后替换 RESOURCE_MAP。...html中完全一致 五、工作原理 1.
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.hook(‘relative’) fis.match(‘**’,{relative:true}) postcss结合fis3使用 // fis3 的 postcss...插件中 fis中postcss的配置文件 fis.match('*.css', { postprocessor: fis.plugin('postcss') }); // 如果你的项目中有 scss
本文作者：IMWeb 黎清龙 原文出处：IMWeb社区 未经同意，禁止转载 fis3 新特性应用 1 前言 fis3相比fis2，核心思路并没有改变 还是围绕3个核心做处理： 资源嵌入 资源定位...3.2 缓存清理 在打包过程中，通常我们需要许多复杂的处理，为了提升构建效率，可能我们需要做一些缓存机制 但是，我们需要在构建结束的时候，把这些缓存清掉，否则就会影响下一次构建（在watch的情况下）...compile:preprocessor, compile:standard, compile:postprocessor, compile:optimizer 以上5个事件是文件compile阶段中5...个关键节点的锚点 在每个阶段中，对file进行相应阶段的处理之前，fis3都会先抛出一个事件 这些节点的意义也非常深远，甚至可以改变fis3的compile流程，同样笔者也举两个例子 4.1 不需要两个插件...compile是单文件处理，在这个过程中是拿不到其他文件的，它不像package阶段插件那样，有一个ret参数可以使用 但是，有时候，我们在compile阶段真的需要其他一些文件资源的时候怎么办？
前面文章讲了FIS的源码实现细节，这篇文章偏实战一些，给出FIS跟require.js结合的简单例子。 FIS编译流程 如果已熟悉了FIS的编译设计，可以跳过这一节，直接进入下一小结。...FIS的编译主要有三步： 命令解析-->资源编译-->资源部署 资源编译：FIS将文件资源抽象成File实例，该实例上有文件资源类型、id、内容、部署路径等的属性。...FIS的这套编译体系，使得基于FIS的扩展相对比较容易。在扩展的同时，还可以确保编译的高性能。针对资源编译环节的扩展，除非是设计不合理，不然一般情况下不会导致性能的急剧降低。...实战：修改fis-conf.js 首先，打开fis-conf.js，加入如下配置。...配置大致意思是： 在postprocessor环节，针对js文件，调用fis-postprocessor-jswrapper进行处理。
本文作者：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('*', {
在fis3中给出了命令’fis3 inspect’,能帮助我们直观地看到文件都应用哪些规则属性。 文件指纹 听到“指纹”，你能联系到ID，因为指纹同id一样是唯一的。...在传统开发中，我们通常会给资源添加一个唯一标识，以便浏览器缓存。例如即加上时间戳的方式来唯一标识资源文件。 与传统不同，fis3中使用MD5戳 对资源文件进行唯一标识。...通常，在传统开发中我们把这项工作交给了服务端来做。现在我们可以通过如fis、gulp等这样的构建工具来方便快速的完成。 我们要使用规则属性中的“插件属性optimizer”来完成。...雪碧图（Sprite）——资源图片合并 需要注意的是，fis3只会对在CSS文件中对资源路径中带有?__sprite的图片进行合并(如：background-image:url(‘....做法：配置文件fis-conf.js 首先，我们先改写css文件中引用图片的路径的写法，带上?__sprite。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
