hefangshi / fis-postpackager-autoload Goto Github PK

View Code? Open in Web Editor NEW

16.0 2.0 9.0 27 KB

用于自动加载模块化资源的FIS插件

License: MIT License

JavaScript 100.00%

fis-postpackager-autoload's Introduction

fis-postpackager-autoload

用于自动加载模块化资源的FIS插件

功能

将当前页面的所有资源依赖自动注入页面中，

功能特点

无需手工维护 <script src="path"></script> 或 <link rel="stylesheet" href="path"> 标签引用资源，页面依赖的资源会自动加载，实现像写Node.js程序一样编写前端页面。
与fis-postprocessor-require-async插件结合，支持modjs的require.async异步加载功能
使modjs脱离后端静态资源管理依赖，使用成本更低，配合fis-postpackager-simple插件，轻松优化页面性能。
支持amd脱离后端静态资源管理，轻松加载AMD资源。

自定义输出

插件默认会将引用的资源添加至head标签结尾，如果需要定制位置，可以通过在页面中注入占位符来满足需求

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!--STYLE_PLACEHOLDER-->
</head>
<body>
    <div class="main"></div>
    <!--SCRIPT_PLACEHOLDER-->
    <!--RESOURCEMAP_PLACEHOLDER-->
    <script type="text/javascript">
        require('main');
    </script>
</body>
</html>

目前支持三种占位符

 用于指定脚本输出位置
 用于指定异步脚本资源表输出位置，需要在mod.js引用后，异步请求前输出
 用于指定样式输出位置

用法

$ npm install -g fis-postpackager-autoload
$ vi path/to/project/fis-conf.js

// file : path/to/project/fis-conf.js
fis.config.set('modules.postpackager', 'autoload');

// 添加combine插件，自动应用pack配置，打包零散资源
//fis.config.set('modules.postpackager', 'autoload, simple');

// useSiteMap设置使用整站/页面异步资源表配置，默认为false
fis.config.set('settings.postpackager.autoload.useSiteMap', true);

// useInlineMap设置内联resourceMap还是异步加载resourceMap，默认为false
fis.config.set('settings.postpackager.autoload.useInlineMap', true);

//通过include属性将额外的资源增加入resourceMap中
fis.config.set('settings.postpackager.autoload.include', /^\/somepath\//i);

// 设置占位符
fis.config.set('settings.postpackager.autoload.scriptTag', '<!--SCRIPT_PLACEHOLDER-->');
fis.config.set('settings.postpackager.autoload.styleTag', '<!--STYLE_PLACEHOLDER-->');
fis.config.set('settings.postpackager.autoload.resourceMapTag', '<!--RESOURCEMAP_PLACEHOLDER-->');

// 开启AMD模式
fis.config.set('settings.postpackager.autoload.type', 'requirejs');

// 美化resourceMap，即使开启压缩，也不会压缩resourceMap
fis.config.set('settings.postpackager.autoload.beautyResourceMap', true);

DEMO

modjs-autoload-demo

fis-postpackager-autoload's People

Contributors

Stargazers

Watchers

Forkers

zgp626 cheft 2betop darkmirrors mtyang mutongwu haledeng babyzone2004 gloriagxx

fis-postpackager-autoload's Issues

如果是Jade写的页面可以用autoload么?

block pagescript

然而build后这个替换失败了
(发现在injectAutoLoad 时 file的依赖是空对象 {} )

我已经把pug 文件设置为 isHtmlLike了这个必须使用html 文件才行么? 或者是哪里有什么设置

用于指定样式输出位置的问题

我在页面上设置了这个，但是没有生产到我页面指定的位置上

当第三方库中有 require 关键字时，会提示 [NOTICE] can't find dep resource ['./xxx']

当第三方库中有 require 关键字时，会提示 [NOTICE] can't find dep resource ['./xxx']，但不影响编译结果。

pkg/page_map_这种目录格式是否固定？

就是说，resourcemap是否在pkg/page_map_XXX这个默认目录下，不能自定义？

199行源码是：var subpath = 'pkg/page_map_${index}.js'.replace('${index}', asyncCount);

增加功能：autocombine为true时，output文件名跟当前html名称关联

@hefangshi

我想次插件增加一个功能，就是autocombine的output文件名，可以定义到跟当前文件有关联的名称。

增加了如下代码：

var arry = [];
for(var key in ret.src){
    arry.push(ret.src[key].filename);
}

var subpath = settings.output.replace('${index}', combineCount)
                    .replace('${name}', arry[0])
                    .replace('${hash}', fis.util.md5(stable(has).join(','), 5))
                 + '.' + fileExt;

配置文件：

fis.config.set('settings.postpackager.simple.output', 'pkg/auto_${name}');

index.html 编译后，得到pkg/auto_index.js。

忘您可以采纳更新，麻烦同时更新到fis-pure中。

autoload会不停的加载

更新之后，所有文件引入都会死循环加载
不停的读取

pkg文件夹能否自定义位置？

文档好少啊。。源码看的云里雾里

页面最最终生成时，依赖的注释能否被清除

rt
我打包完了。。。发现那些注释还在。想删除，咋弄啊？》

如何让 amd loader 与其他js 模块打包在一起？

目前后端方案都能实现这个需求。再替换 script 的时候，是否加个 pkg 判断就OK？

pkg/page_map 的路径能不能也能自定义？

injectAsync 里面的 pkg/page_map 的路径能不能和 injectSiteAsync 里的

var subpath = (settings.subpath || 'pkg/map.js').replace(/^//, '');

一样也能自定义？
目前是直接到根目录下了
var subpath = 'pkg/page_map_${index}.js'.replace('${index}', asyncCount);

最主要的是所在目录能不能别直接到根目录下，pkg能重命名最好了。

代码洁癖和强迫症HOLD不住啊。。。

非标准mod，第三方插件使用bug

触发条件：
1.依赖第三方插件时：require('plugin/jquery/jquery.js')。
2.fis-postprocessor-amd的‘globalAsyncAsSync’配置项为true。
3.fis-postpackager-autoload的‘useSiteMap’为false。

因为useSiteMap关闭，而autoload将依赖的文件提前加载，所以会将对应的资源从 resourceMap 中删除，但是插件没有经过mod处理，所以没有 define。。

所以在页面加载的时候，因为 resourceMap 里没有插件的配置，所以会以错误的路径重新加载js（其实已经提前加载了，只是在resourceMap里找不到），从而报错。

建议：

将 return file && !file.isCssLike && !usedSync[dep]; 改为 return !file.isMod || (file && !file.isCssLike && !usedSync[dep]);

或者在roadmap增加一项 'isExt: true', 然后：

将 return file && !file.isCssLike && !usedSync[dep]; 改为 return file.isExt || (file && !file.isCssLike && !usedSync[dep]);