fis3-postpackager-robot
v1.10.7
Published
fis按需异步加载打包工具
Downloads
20
Maintainers
peter_bjReadme
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.match('::package', {
//默认配置如下
postpackager: fis.plugin('robot', {
// 脚本占位符
scriptPlaceHolder: '<!--SCRIPT_PLACEHOLDER-->',
// 样式占位符
stylePlaceHolder: '<!--STYLE_PLACEHOLDER-->',
// 依赖关系脚本注入位置占位符，注入结果格式仅支持 mod/commonjs
resourceMapPlaceHolder: '<!--DEPENDENCIES_INJECT_PLACEHOLDER-->',
// 依赖分析的入口后缀文件名
entryExt: '.html',
// 打包结果自定义路径， 同fis中的release意义一样
releasePathPrefix: '/',
// 打包路径和应用路径分开， 同fis中的 uri 意义一样
urlPrefix: '/'
})
}
注意：
打包生成的文件同样会匹配fis-conf.js中定义的配置规则
比如
生成的文件名是./pkg/pkg-index-0.css;如果 fis-conf.js 中定义了
fis.match("**.css", {...}) //那么打包的结果pkg-index-0.css就会匹配到这条规则。
示例
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--STYLE_PLACEHOLDER-->
</head>
<body>
<script type="text/javascript" src="/static/mod.js"></script> <!--必须-->
<!--SCRIPT_PLACEHOLDER-->
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
<script type="text/javascript">
require('./index.jsx')
</script>
</body>
</html>
文件： index.jsx
// @require './index.scss'
var header = import('./header.jsx');
var footer = import('./footer.jsx');
function someFunction() {
require.async('./table.jsx', function({table: default}){
//use table here
})
}
someFunction(); //需要的时候执行该方法就会执行异步加载
文件: header.jsx
//@require './header.scss'
export default function() {console.log('>> header.scss')}
文件： table.jsx
//@require './table.scss'
export default function() {console.log('>> table.scss')}
2018-03-22 更新
- 修复了多个打包多个html入口文件时，最终生成的
pkg.js/css不准确的bug