`
mutongwu
  • 浏览: 447503 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

fis-amd 的使用与修改

阅读更多
https://github.com/fex-team/fis-postprocessor-amd
+
https://github.com/hefangshi/fis-postpackager-autoload
+
https://github.com/hefangshi/fis-postpackager-simple

可以说是 https://github.com/fex-team/mod 的加强版,前者对amd模块做了更好的兼容和打包功能。

个人在使用上,有点不方便的地方:在写一个UI组件的时候,例如: Button,那么常见的,它应该包含 Button.js 和 Button.css 2个文件。 Button.js 作为一个 AMD组件来编写,没有问题,可以从UI的完整性来讲,它是“依赖” Button.css的。但是amd的处理的时候,并不把 CSS作为 模块 看待,所以默认都把依赖的css资源,直接link连接到页面里面,不提供【异步加载CSS】的功能。当然,也不是完全不支持,如果使用requirejs的话,CSS还是实现异步加载的,但是也不是作为模块来看待的。

因此,个人做了如下修改:
1.  fis-postpackager-autoload(https://github.com/mutongwu/fis-postpackager-autoload/tree/mutongwu-patch-1) ,配置的时候,如果CSS资源有个定义
{
    reg : /^\/modules\/(.*)\.css$/i,
    extras: {
      useAsync : true // 加上这一句,就把它认为是模块,加到资源表里面。
    }
}


2. 模块加载器(https://github.com/fex-team/fis-amd-demo/blob/master/lib/mod-amd.js)为了能适应CSS的加载,也需要做点调整,主要是copy了requirejs的CSS加载插件代码进来(可以不用完全不理重量级的requirejs了)


实验工程代码请看附件。


分享到:
评论

相关推荐

    前端开源库-fis-deploy-amdpackage

    "fis-deploy-amdpackage"库的目标是处理AMD模块的打包与部署流程。FIS(Fast Introduction for Sitebuilding)是腾讯推出的一个前端构建工具,它提供了丰富的配置选项和插件系统,帮助开发者自动化构建过程。"fis-...

    前端开源库-fis-postpackager-jpgtowebp

    3. 修改项目的fis配置文件(通常是fis-conf.js),添加或修改postpackager规则,将`jpgtowebp`插件引入: ```javascript fis.match('*.jpg', { postpackager: fis.plugin('jpgtowebp') }); ``` 4. 执行fis编译...

    fis-postprocessor-amd:FIS amdjs 支持

    fis-postprocessor-amd fis amd 支持,完全满足 规范。 如何使用? npm install -g fis-postprocessor-amd 配置 fis-conf.js fis.config.merge({ modules: postprocessor: { tpl: 'amd', // 如果你的模板是.tpl...

    前端开源库-fis-parser-less-px2rem

    在 Less 文件中,我们可以使用 `fis-parser-less-px2rem` 插件,自动将px单位转换为rem,这在响应式设计中尤其重要,因为rem单位相对于根元素(html)的字体大小,可以方便地通过更改一个值来调整所有子元素的大小,...

    前端开源库-fis-lint-jshint

    “fis-lint-jshint”将JSHint的功能集成到了fis框架中,使得开发者在使用fis构建项目时,可以方便地对JavaScript代码进行检查。这个插件会在编译过程中自动运行JSHint,对每个.js文件进行扫描,并在发现问题时给出...

    前端开源库-fis-parser-import

    5. **配置与使用**:"fis-parser-import" 需要在FIS的配置文件中启用,并根据项目需求进行定制化设置,例如设置导入规则、忽略某些文件等。 6. **与其他组件的协同工作**:在FIS构建流程中,"fis-parser-import" 会...

    fis-amd-demo

    npm install fis-postprocessor-amd -gnpm install fis-postpackager-autoload -gnpm install fis-packager-depscombine -g下载此 demonpm install lights -glights install fis-amd-demo进入 fis-amd-demo 目录 ...

    前端开源库-fis-parser-jade

    总结来说,“前端开源库-fis-parser-jade”是FIS框架中的一个重要组成部分,它为开发者提供了一种在FIS项目中使用Jade模板语言的途径。通过利用Jade的简洁语法和FIS的强大功能,前端开发变得更高效、更易于维护。...

    前端开源库-fis-postprocessor-require-async

    使用`fis-postprocessor-require-async`时,我们需要将其添加到FIS的配置文件中,设置为一个后处理插件。配置完成后,FIS在构建项目时会自动执行这个插件,完成上述的分析和处理工作。 总的来说,`fis-post...

    前端开源库-fis-optimizer-uglify-js-nfd

    在实际使用中,开发者可以将`fis-optimizer-uglify-js` 配置到fis的构建流程中,当执行fis的打包命令时,这个插件会自动对所有匹配的JavaScript文件进行压缩。这样,不仅可以提高网站的加载速度,还可以防止源码被...

    前端开源库-fis-parser-less

    前端开源库-fis-parser-lessFIS Parser Less,一种用于FIS编译较少文件的分析器。

    前端开源库-fis-parser-utc

    `fis-parser-utc`是这个框架中的一个解析器插件,其主要功能是对使用下划线模板语言(Underscore Template Language, 简称UTL)的代码进行分析和处理。 在前端开发中,模板引擎是必不可少的工具,它们允许开发者将...

    lights资源聚合平台应用fis-cloud-app-repos.zip

    与lights包管理工具交互,实现资源的存储查询等操作 提供资源聚合网站,展示资源信息 此平台已经开源,直接访问lights 使用开源 下载lights命令行客户端  npm install lights -g  lights -h //查看...

    前端开源库-fis-postpackager-simple

    在实际应用中,`fis-postpackager-simple`通常与FIS的其他组件如`fis-parser`(解析器)和`fis-release`(发布工具)一起工作,形成完整的前端构建流程。开发者可以通过配置文件(通常是`.fis-conf.js`)来定制`fis-...

    前端开源库-fis-optimizer-sm-uglify-js

    在实际应用中,FIS-Optimizer-SM-Uglify-JS通常与其他FIS插件一起使用,如FIS-optimizer-css-compress,共同完成CSS和JavaScript的压缩工作。这种模块化的构建方式使得开发者可以根据项目需求灵活选择和组合优化工具...

    前端开源库-fis-parser-jade-runtime

    5. **优化与打包**:作为FIS的一部分,该插件可以与其他FIS工具结合使用,对生成的JavaScript文件进行压缩、合并等优化操作,以减少HTTP请求,提高页面加载速度。 使用fis-parser-jade-runtime时,开发者需要确保...

    前端开源库-fis-parser-coffee-script

    一旦配置完成,每当FIS执行构建命令时,所有匹配的CoffeeScript文件都将被自动转换为JavaScript,并与其他资源一起打包、压缩,最终形成可供部署的前端应用。 此外,这个开源库还可能包含一些示例代码、文档或测试...

    前端开源库-fis-parser-less.zip

    5. **与其他FIS插件集成**:作为FIS的一部分,fis-parser-less可以与其他FIS插件无缝配合,如fis-postprocessor-autoprefixer自动添加CSS前缀,fis-optimizer-clean-css进行CSS压缩等。 在实际项目中,使用fis-...

    前端开源库-fis-optimizer-minify-html.zip

    在实际应用中,要使用`fis-optimizer-minify-html`,首先需要安装`fis`和该插件,然后在`fis-conf.js`配置文件中启用该优化器。配置完成后,运行`fis release`命令,`fis`会自动处理并压缩HTML文件。 值得注意的是...

Global site tag (gtag.js) - Google Analytics