fis3-postpackager-robot

1.10.7 • Public • Published

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打包思路

  • ** 如图所示,自动以require.async(deps, callback)为分界点** 分别将 index.jsxtable.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

Package Sidebar

Install

npm i fis3-postpackager-robot

Weekly Downloads

0

Version

1.10.7

License

ISC

Unpacked Size

405 kB

Total Files

29

Last publish

Collaborators

  • peter_bj