Novices Performing Miracles

    fis3-packager-smart

    1.0.5 • Public • Published

    fis3-packager-smart

    fis3 require打包插件。

    安装

    npm i -g fis3-packager-smart
    

    打包原理

    分析页面a.html的同步(requires)和异步依赖(asyncs),每个依赖的js文件,会再去分析自身的依赖关系,然后打成一个包。

    例如页面a.html中有以下脚本:

    require.async(['zepto', 'common', 'a'], function($, tools, main){
        main.init();
    });
    

    最终会分析zepto的依赖,打成一个包,common和a类似。

    配置中有lib项配置,表示该库会单独打成一个包。

    html中的引用

    基于上面的原理,html中引入主JS脚本时,推荐的方式是:

    • 主JS也是一个模块,而不是自执行的脚本,对外导出init接口
    • html中使用内联的方式require主JS脚本,然后调用init方法
    // main.js
    module.exports = {init: function(){}};
    
    // index.html
    <script>
    require(['main'], function(main) {
        main.init();
    });
    </script>
    

    或者主JS自执行,但是在html中通过require引入

    // main.js
    init();
    // index.html
    <script>
    require('main');
    </script>
    // index.html中不要使用下面的方式引入脚本
    <script src='main.js'></script>
    

    配置

    fis.match('::package', {
        packager: fis.plugin('smart', {
            // 脚本占位符
            scriptPlaceHolder: '<!--SCRIPT_PLACEHOLDER-->',
    
            // 样式占位符
            stylePlaceHolder: '<!--STYLE_PLACEHOLDER-->',
    
            // 资源占位符
            resourcePlaceHolder: '<!--RESOURCEMAP_PLACEHOLDER-->',
    
            output: 'pkg/${id}_min.js',
            
            // 不打包的模块
            ignore: [], 
            
            // 适合移动端场景
            cssInline: false,
            
            // css是否打包成一个文件,适合单页面应用
            cssAllInOne: false,
            // 页面js是否打包成一个文件,参考loader
            jsAllInOne: false,
            // common css,业务自行处理打包,其他打成一个page包
            commonCssGlob: /\/?common\//
        })
    });
    

    上面的配置都是默认的,使用者可以完全不用管。

    fis.match('::package', {
        packager: fis.plugin('smart', {
        });
    });
    

    Install

    npm i fis3-packager-smart

    DownloadsWeekly Downloads

    2

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    47.4 kB

    Total Files

    32

    Last publish

    Collaborators

    • helondeng
    • imweb
    • jackqqxu