展开

关键词

浅谈fis3与postcss

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

31340

fis3 新特性应用

本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 fis3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: 资源嵌入 资源定位 fis3相对于fis2来说,用户更容易使用,给插件开发者提供更多的能力 这主要体现于以下两点: 类似css的覆盖式配置方式,不需要用命令行参数来进行配置 提供许多事件锚点 这篇文章主要介绍的就是第2点, 讲解fis3提供的特殊事件,及其作用。 都会先抛出一个事件 这些节点的意义也非常深远,甚至可以改变fis3的compile流程,同样笔者也举两个例子 4.1 不需要两个插件! 后续 可以看到,fis3最重大的改进就是提供了更多的想象空间给插件开发者 合理利用这些特性,我们可以在fis3的环境下做许多事情 但就只有这些吗? No!还有另外一些更加有趣更加开放的特性还没介绍。

30390
  • 广告
    关闭

    老用户专属续费福利

    云服务器CVM、轻量应用服务器1.5折续费券等您来抽!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    fis3 新特性应用

    本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 fis3 新特性应用 1 前言 fis3相比fis2,核心思路并没有改变 还是围绕3个核心做处理: 资源嵌入 资源定位 fis3相对于fis2来说,用户更容易使用,给插件开发者提供更多的能力 这主要体现于以下两点: 类似css的覆盖式配置方式,不需要用命令行参数来进行配置 提供许多事件锚点 这篇文章主要介绍的就是第2点, 讲解fis3提供的特殊事件,及其作用。 都会先抛出一个事件 这些节点的意义也非常深远,甚至可以改变fis3的compile流程,同样笔者也举两个例子 4.1 不需要两个插件! 后续 可以看到,fis3最重大的改进就是提供了更多的想象空间给插件开发者 合理利用这些特性,我们可以在fis3的环境下做许多事情 但就只有这些吗? No!还有另外一些更加有趣更加开放的特性还没介绍。

    22820

    fis3 文档学习研究

    本文作者: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

    26320

    fis3 文档学习研究

    一、安装 安装初始化 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

    40900

    fis3 commonJs中的moduleId

    本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('c...

    28160

    如何编写fis3插件

    目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。 fis 编译流程 ? 参考这里 单元测试 fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是: var fs = require ('fs'), path = require('path'), fis = require('fis3'), _ = fis.util, expect = require

    51200

    如何编写fis3插件

    本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载 目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。 参考这里 单元测试 fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是: var fs = require ('fs'), path = require('path'), fis = require('fis3'), _ = fis.util, expect = require

    22910

    fis3 commonJs中的moduleId

    20210

    fis3 commonJs 中的 moduleId

    我们来首先看一个有趣的问题为什么会出现实际输出和理想中输出不一致的情况,本文主要讲解了 fis3 commonJs 中的 moduleId。

    48800

    Fis3 构建迁移 Webpack 之路

    本篇文章主要介绍从 Fis 迁移到 webpack 遇到的问题和背后的黑科技,内容包括 inline-resource、多页面构建、资源压缩、文件hash、文件...

    83220

    教你做一个异步的fis3插件

    本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 不清楚fis3是什么的可以先看这个链接 http://fis.baidu.com/ 背景 从fis的官方文档上看,fis 举个例子 最近看到有一个gulp-lzmajs的插件,我尝试把它改成fis3插件。 接下来我们要思考下面几个问题 做什么阶段的插件? lzma库是异步调用的,怎么处理? 第一个问题:fis3把构建分成了三个阶段【编译】【打包】【发布】,当然我们只希望所有文件打包好之后再做js文件的lama压缩,所以做打包阶段的插件,扩展postpackager 第二个问题:我们需要一个很神奇的包

    33190

    教你做一个异步的fis3插件

    举个例子 最近看到有一个gulp-lzmajs的插件,我尝试把它改成fis3插件。 接下来我们要思考下面几个问题 做什么阶段的插件? lzma库是异步调用的,怎么处理? 第一个问题:fis3把构建分成了三个阶段【编译】【打包】【发布】,当然我们只希望所有文件打包好之后再做js文件的lama压缩,所以做打包阶段的插件,扩展postpackager 第二个问题:我们需要一个很神奇的包

    29610

    前端程序员常用的9大构建工具

    7:FIS3 https://fex-team.github.io/fis3/ Fis3是来自百度的国产构建工具,相对于grunt,gulp这些只提供了基本功能的工具,Fis3集成了web开发中常用的购将功能

    98731

    从Npm Script到Webpack,6种常见的前端构建工具对比

    4 Fis3 Fis3(https://fex.baidu.com/fis3/)是一个来自百度的优秀国产构建工具。 相对于Grunt、Gulp这些只提供了基本功能的工具,Fis3集成了Web开发中的常用构建功能,如下所述。 读写文件:通过fis.match读文件,release配置文件的输出路径。 大致使用如下: 可以看出Fis3很强大,内置了许多功能,无须做太多配置就能完成大量工作。 Fis3的优点是集成了各种Web开发所需的构建功能,配置简单、开箱即用。 Fis3是一种专注于Web开发的完整解决方案,如果将Grunt、Gulp比作汽车的发动机,则可以将Fis3比作一辆完整的汽车。

    1.1K60

    简单介绍下modJS

    近期把团队的项目构建迁移到fis3,同时把模块加载器也由之前的requirejs切换到了modJS。 有些同学可能不了解modJS,这里做个简单的介绍。 那么,modJS是什么呢? 除了体量非常小之外,modJS配合fis3的fis3-hook-commonjs插件,可以在纯前端项目中实现类似nodejs一样的开发体验。 那么,我们为什么要使用modJS呢? 发布编译时,由构建工具统一添加define包裹,自动添加模块id(默认根据路径生成,也可以在fis3的配置中声明格式)。整体的开发体验更好一些。 一般情况下,modJS配合fis3已经可以满足大部分需求,并且官方还提供了完整支持amd规范的esl-mod.js。

    34250

    简单介绍下modJS

    本文作者:IMWeb yisbug 原文出处:IMWeb社区 未经同意,禁止转载 近期把团队的项目构建迁移到fis3,同时把模块加载器也由之前的requirejs切换到了modJS。 除了体量非常小之外,modJS配合fis3的fis3-hook-commonjs插件,可以在纯前端项目中实现类似nodejs一样的开发体验。 那么,我们为什么要使用modJS呢? 发布编译时,由构建工具统一添加define包裹,自动添加模块id(默认根据路径生成,也可以在fis3的配置中声明格式)。整体的开发体验更好一些。 ---- 一般情况下,modJS配合fis3已经可以满足大部分需求,并且官方还提供了完整支持amd规范的esl-mod.js。

    43450

    实战 | webpack原理与实战

    WebPlugin插件借鉴了fis3的思想,补足了webpack缺失的以HTML为入口的功能。想了解WebPlugin的更多功能,见文档。 从fis3迁移到webpack fis3和webpack有相似的地方也有不同的地方。相似在于他们都采用commonjs规范,不同在于导入css这些非js资源的方式。 fis3通过// @require './index.scss'而webpack通过require('./index.scss')。 如果想从fis3平滑迁移到webpack可以使用comment-require-loader。 比如你想在webpack构建是使用采用了fis3方式的imui模块,配置如下: 自定义webpack扩展 如果你在社区找不到你的应用场景的解决方案,那就需要自己动手了写loader或者plugin了。

    5510

    扫码关注腾讯云开发者

    领取腾讯云代金券