fis3-postpackager-robot
- 适用于**'按需异步加载'**的情况
- 需搭配
https://github.com/pup/mod
中的mod.js,请不要用官方提供的mod.js - 同目录下可以有多个html,打包结果完全互不干扰,会为每个入口文件(.html)单独生成 resourcemap,并替换入口文件中的占位符
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
- 目前注入格式仅支持
mod/commonjs
需求
src/
index.html ;打包结果只跟index.html有关
feedback.html ;打包结果与index.html毫无关系
打包思路说明
- 文件依赖关系图:
- @require 表示直接依赖关系, 同fis3中的使用方法一样
- @require.async 表示异步加载, 同fis3中的使用方法一样
- ** 如图所示,自动以
require.async(deps, callback)
为分界点** 分别将index.jsx
和table.jsx
及其所依赖的文件打包合并成四个最终文件(js和cs各俩个,如下表所示) - 打包后的文件包含关系
打包结果 | 打包结果包含的文件 |
---|---|
pkg_index_0.css | index.scss, footer.scss, header.scss |
pkg_index_0.js | header.jsx, footer.jsx, index.jsx |
pkg_table_1.js | table.jsx, tableHeader.jsx |
pkg_table_1.css | table.scss, tableHeader.scss |
配置说明
fis
注意:
打包生成的文件同样会匹配fis-conf.js
中定义的配置规则
比如
生成的文件名是./pkg/pkg-index-0.css
;如果 fis-conf.js
中定义了
fis //那么打包的结果pkg-index-0.css就会匹配到这条规则。
示例
index.html
<!--STYLE_PLACEHOLDER--> <!--必须--> <!--SCRIPT_PLACEHOLDER--> <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
index.jsx
文件: // @require './index.scss' var header = import'./header.jsx'; var footer = import'./footer.jsx'; { require } ; //需要的时候执行该方法就会执行异步加载
header.jsx
文件: //@require './header.scss' {console}
文件: table.jsx
//@require './table.scss' {console}
2018-03-22 更新
- 修复了多个打包多个html入口文件时,最终生成的
pkg.js/css
不准确的bug