fis3-postpackager-robot
Version:
139 lines (94 loc) • 3.62 kB
Markdown
# 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毫无关系
```
## 打包思路说明
* 文件依赖关系图：
1. @require 表示直接依赖关系， 同fis3中的使用方法一样
2. @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
## 配置说明
```javascript
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` 中定义了
```javascript
fis.match("**.css", {...}) //那么打包的结果pkg-index-0.css就会匹配到这条规则。
```
## 示例
### `index.html`
```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`
```javascript
// @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`
```javascript
//@require './header.scss'
export default function() {console.log('>> header.scss')}
```
### 文件： table.jsx
```javascript
//@require './table.scss'
export default function() {console.log('>> table.scss')}
```
## 2018-03-22 更新
- 修复了多个打包多个html入口文件时，最终生成的`pkg.js/css`不准确的bug