# 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中的使用方法一样

![robot打包思路](./imgs/robot.jpg)

- ** 如图所示，自动以`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

	<!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`

```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