Coder Social home page Coder Social logo

fis3-postpackager-loader's Introduction

fis3-postpackager-loader

静态资源前端加载器,用来分析页面中使用的依赖的资源(js或css), 并将这些资源做一定的优化后插入页面中。如把零散的文件合并。

注意

此插件做前端硬加载,适用于纯前端项目,不适用有后端 loader 的项目。因为不识别模板语言,对于资源的分析和收集,比较的粗暴!!!

默认会把页面中用到的样式插入在 header 中,脚本插入在 body 底部。如果想修改,请在页面自己插入 <!--SCRIPT_PLACEHOLDER--><!--STYLE_PLACEHOLDER--> 占位符来控制位置。

此插件会收集所有的资源,如果希望某个资源不被收集,请在资源结尾处如 </script> 后面加上 <!--ignore--> 注释.

<script src="lib.js"></script><!--ignore-->

注意:被 ignore 的资源,不会被修改位置,同时也不会参与 allInOne 合并。

安装

支持全局安装和局部安装,根据自己的需求来定。

npm install fis3-postpackager-loader

使用

fis.match('::packager', {
  postpackager: fis.plugin('loader', {
    allInOne: true
  })
});

文件属性

新版本中所有 isHtmlLike:true 的资源都会默认采用 html 的方式来处理,比如: .md, .tpl 或者是更多。如果你希望某类 isHtmlLiketrue 的资源,不经过此插件处理,那么请设置 loaderLang 属性为 false

fis.match('*.md', {
  loaderLang: false
});

处理流程说明

如果你真的很关心的话,以下详细的流程处理介绍。

先假定所有优化功能全开,处理流程如下:

  1. 遍历所有的 html 文件,每个文件单独走以下流程。
  2. 分析 html 内容,插入注释块 <!--SCRIPT_PLACEHOLDER--></body> 前面,如果页面里面没有这个注释块的话。
  3. 分析 html 内容,插入注释块 <!--STYLE_PLACEHOLDER--></head> 前面,如果页面没有这个注释的话。
  4. 分析源码中 <script> 带有 data-loader 属性的或者资源名为[mod.js, require.js, sea.js, system.js]的资源找出来,如果有的话。把找到的 js 加入队列,并且在该 <script> 后面加入 <!--RESOURCEMAP_PLACEHOLDER--> 注释块,如果页面里面没有这个注释的话。
  5. 分析源码中 <script> 带有 data-framework 属性的资源找出来。把找到的 js 加入队列。
  6. 如果不存在<!--DEPENDENCIES_INJECT_PLACEHOLDER--> 注释,则开始分析此 html 文件的依赖,以及递归进去查找依赖中的依赖。把分析到的 js 加入到队列,css 加入到队列。如果存在,则在 7 步骤中处理,遇到注释开始加入依赖。
  7. 分析此 html 中 <script><link><style> 把搜集到的资源加入队列。
  8. 启用 allinone 打包,把队列中,挨一起的资源合并。如果是内联内容,直接合并即可,如果是外链文件,则合并文件内容,生成新内容。
  9. 把优化后的结果,即队列中资源,插入到 <!--SCRIPT_PLACEHOLDER--><!--STYLE_PLACEHOLDER--><!--RESOURCEMAP_PLACEHOLDER--> 注释块。

那么 js 的输出顺序就是:带 data-loader 的js,带 resource map 信息的js, 带 data-framework 的js,依赖中的 js, 页面中其他 js.

也就是说,如果你发现资源的加载顺序不符合你的预期时,请加适当的属性来调整资源级别。

疑问解释

什么是页面依赖?

分两种方式指定依赖:

  1. 通过 fis 中的注释指定依赖。
<!--@require "xxx.js"-->

更多用法,请查看声明依赖 2. 通过 js 语句指定依赖。

require('./main');

表示此代码所在的文件,依赖当前目录下面的 main.js 文件。

另外依赖又分两种性质,以上都是同步依赖,还有一种异步依赖。

require(['./main']);

同步js 是页面加载时加载,而异步js 依赖则是运行时加载,能满足按需加载的需求。

什么是 js loader

fis 中对依赖的js 加载,尤其是异步 js,需要一个 js loader。比如 mod.js 是一个 loader, require.js 也是一种 loader。

什么是 resourcemap ?

当有异步依赖的时候,为了让 loader 知道文件所在位置,所以需要需要 resourcemap 信息。

此插件能生成两类 resourcemap.

  1. 给 mod.js 用的,格式如下:
require.resourcemap({
  res: {...},
  pkg: {...}
})
  1. 给 require.js amd loader 用的,格式如下:
require.config({
  paths: {
    ...
  }
})

配置说明

  • scriptPlaceHolder 默认 <!--SCRIPT_PLACEHOLDER-->

  • stylePlaceHolder 默认 <!--STYLE_PLACEHOLDER-->

  • resourcePlaceHolder 默认<!--RESOURCEMAP_PLACEHOLDER-->

  • dependenciesInjectPlaceHolder 默认<!--DEPENDENCIES_INJECT_PLACEHOLDER-->

  • resourceType 默认 'auto', 可选 'mod''amd''system''commonJs''cmd'(sea.js)

  • allInOne 默认 false, 配置是否合并零碎资源。

    allInOne 接收对象配置项。

    • css, js 可接受函数, 回传file, 可定制化路径规则, 如:
      postpackager: fis.plugin('loader', {
        allInOne: {
          js: function (file) {
            return "/static/js/" + file.filename + "_aio.js";
          },
          css: function (file) {
            return "/static/css/" + file.filename + "_aio.css";
          }
        }      
      })
    • css all in one 打包后, css 文件的路径规则。默认为 pkg/${filepath}_aio.css
    • js all in one 打包后, js 文件的路径规则。默认为 pkg/${filepath}_aio.js
    • includeAsyncs 默认为 false。all in one 打包,是不包含异步依赖的,不过可以通过把此属性设置成 true,包含异步依赖。
    • ignore 默认为空。如果不希望部分文件被 all in one 打包,请设置 ignore 清单。
    • sourceMap 默认为 false。是否生成 sourcemap.
    • useTrack 默认为 true. 是否在打包文件中添加track信息
  • processor 默认为 {'.html': 'html'}, 即支持后缀是 .html 的文件,如果要支持其他后缀,请在此扩展。

    fis.match('::package', {
      postpackager: fis.plugin('loader', {
        processor: {
          '.html': 'html',
    
          // 支持 markdown 文档
          '.md': 'html'
        }
      })
    })
  • obtainScript 是否收集 <script> 内容。(非页面依赖部分)

  • obtainStyle 是否收集 <style><link> 内容。(非页面依赖部分)

  • useInlineMap 是否将 sourcemap 作为内嵌脚本输出。

  • resoucemap 默认为 /pkg/${filepath}_map.jsuseInLineMapfalse 的时候有效,用来控制 resourcemap 生成位置。

  • resourcemapWhitespace resourcemap缩进宽度, 默认为2.

  • include 默认生成的 sourcemap 只会包含异步依赖的 js, 如果想把一批模块化的 js 加入到 sourcemap 中,请参考一下配置:

    fis.match('::package', {
      postpackager: fis.plugin('loader', {
        include: '/widget/a/**.js'
      })
    })
    
    fis.match('::package', {
      postpackager: fis.plugin('loader', {
        include: [
          '/widget/**.js',
          '!/widget/a/**.js'
        ]
      })
    })

fis3-postpackager-loader's People

Contributors

2betop avatar aerojin avatar biluochun avatar dannysu09 avatar hanai avatar hefangshi avatar is avatar johnx7271 avatar snadn avatar ssddi456 avatar zidom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fis3-postpackager-loader's Issues

[ERROR] Maximum call stack size exceeded

第一次使用fis3,使用如下配置的时候报错,请帮忙看看什么原因

fis.match('::package', {
    postpackager: fis.plugin('loader', {
        resourceType: 'auto'
    })
});

css合并后还会保留/*!*/的注释

单个css文件的注释已经被去掉了,但是合并后的样式文件还存在

.match('*.css', {
        useSprite: true,
        optimizer: fis.plugin('clean-css', {
            'keepSpecialComments': 0
        })
    })

mod 生成的resourceMap里的deps里有后缀jsx, es6

采用c hook-commonjs + postpacikager-load mod 方案。

fis.hook('commonjs', {
    paths: {
        jquery: '/deps/jquery/jquery',
        antd: '/deps/antd/antd-0.8.1-beta1.min',
        immutable: '/deps/immutable/immutable.min'
    },
    baseUrl: '/modules'
});

fis.match('::package', {
    postpackager: fis.plugin('loader', {
        resourceType: 'mod',
        useInlineMap: false,
        obtainScript: false,
        obtainStyle: false
    })
});

生成的resourceMap url部分正确

    "modules/component/sidebar/sidebar": {
      "url": "/static/modules/component/sidebar/sidebar.js",
      "type": "js",
      "deps": [
        "deps/react/react.js",
        "modules/common/user-info.js"
      ]
    },

在deps里的链接就错了

    "deps": [
        "deps/react/react.js",
        "deps/antd/antd-0.8.1-beta1.min.js",
        "modules/component/header/header.jsx",
        "modules/component/sidebar/sidebar.jsx"
      ]

导致请求 *.es6 , *.jsx 这些不存在的文件.

data-main指定js,在编译打包后,页面运行时仍然被请求

原始页面中有<script data-main="js/h5" src="/js/lib/require.js"></script>,
编译后页面中为:

<script data-main="js/h5" src="/js/lib/require_ce64807.js"></script>
<script type="text/javascript" src="/pkg/_h5.html_aio_f69d00d.js"></script>

这样编译后还会请求h5.js,请问如何解决?

useInlineMap生成不了。。。

用fis3-demo中的"use-amd"这个例子做测试,无论设置为true还是false,都没有生成相应的resourcemap

ps: 用的是最新版本~

requirejs 问题

描述:

使用 amd 模式, AllInOne 的 includeAsyncs 配置为 true。 合并起来的 js 文件, async 模块在 require('mod', function(){}); 的后面被定义,所以requirejs还是会发起网络请求

所以应该将 async 模块前置

版本和配置

qq20150828-3
qq20150828-2

源码

qq20150828-4

编译后

html 代码

qq20150828-5

allInOne 的 js 代码

qq20150828-6
qq20150828-7

cant read trim of undefined

 fis.match('::packager', {
     postpackager: fis.plugin('loader', {
           allInOne: true
     })
 });

1.没加上述代码压缩js/css/png、及时间戳均成功
2.加了上述代码报can't read trim of undefined
3.项目没有异步依赖require/sea/common诸如
4.分别在我的两个项目中fis-conf中加入了这样打包,第一个项目成功了,第二个项目失败
5.失败的第二个项目唯一区别,有个别文件已经压缩过一遍

希望我的描述狗精确,能给我点可能的原因或者解决方案,谢谢!

通过 data-main 引入的文件,可能不会出现在 html_map.js 文件中

假设有以下目录,其中目录中的 .es6 文件,会被编译成 .js 文件输出。

-- page
    -- index.html
    -- bootstrap.es6
    -- main.js
    -- main1.es6
    -- require.js

main.jsmain1.es6 文件内容相同,如下:

require(['index.js'], function () {});

分别通过以下几个场景在 index.html 引入 require.js 文件

<!-- 场景1 -->
<script data-main="main.js" src="require.js"></script>

<!-- 场景2 -->
<script data-main="main1.es6" src="require.js"></script>

<!-- 场景3 -->
<!-- 
    注意:
    __uri() 是使用了 fis3-parser-html-uri 插件,增强 fis 的资源定位能力。
    在 fis 的 `parser` 阶段,它会将 __uri(main.es6) 替换成 /page/index/main1.js
-->
<script data-main="__uri(main1.es6)" src="require.js"></script>

在上面的三个场景中:

  1. 场景1是正常的,data-main 会被替换为正确的地址,也会生成 index_html_map.js 配置文件
  2. 场景2,由于 data-main="/page/index/main1.es6",导致无法加载入口文件,但也算『符合预期』。它也会生成index_html_map.js 配置文件
  3. 场景3,无法生成 index_html_map.js 配置文件,但其实发布后是存在 /page/index/main1.js 文件的。

那么在 场景3下,无法生成 index_html_map.js 文件,是因为在产出前不存在 /page/index/main1.js 造成的嘛?

css支持异步和其他资源进入resouceMap?

就行这个#15 说的那样,加include解决动态加载的问题,

但是发现所有的异步css文件默认合并倒页面去了,有没有配置能让异步的css不出现在页面中,只出现在resouceMap中?

data-main的入口被拆解

requirejs通过data-main来确定主入口的,用data-main来定义的主入口相当于直接require主入口调起回调。

而loader把data-main的js文件直接拆解成script的形式进行引入,会导致main函数无法执行。

关于合并后的内嵌问题

工程是fis3-hook-cmd组织,合并是用fis3-postpackager-loader,但js合并结果的文件有seajs,及..aio.js文件,可以用什么方式把这两个文件内嵌到html上么?试过?__inline不行也。

loader 可以使用变量进行异步加载吗?

在 autoload 中,可以用声明资源或使用 include 属性新增额外的资源到 resourceMap 中
因为额外的资源比较多,loader 是否有类似于 autoload 中 include 属性的东西,或者有其他更好的方法实现使用变量进行异步加载?

插件allinone 使css合并 link标签 rel 值不存在导致页面不能加载的bug

fis-conf.js 中的写法

    .match('::package', {
      spriter: fis.plugin('csssprites')
      ,postpackager: fis.plugin('loader', {
        useInlineMap: false // 资源映射表内嵌
        ,allInOne: 
        {
            js: 'js/${filepath}.js', // 打包后 css 的文件路径。
            css: 'css/${filepath}.css',
            ignore:['base/header.js'] 
        }
      })
    })

为执行loader allInOne的代码

    <link rel="stylesheet" type="text/css" href="/css/base/header.css" />
    <link rel="stylesheet" type="text/css" href="/css/a/a.css" />
    <link rel="stylesheet" type="text/css" href="/css/view/index.css" />

压缩后错误代码,缺少 rel="stylesheet"

<link rel="stylesheet" type="text/css" href="/css/base/header.css" />
<link type="text/css" href="/css/view/index.html_fb1c64e.css" />

修改方法将 插件
lib/lang/html.js 第284 行修改为如下代码

          // 只处理认识的 id
          if (item.id) {
            fis.emit('plugin:relative:fetch', msg);
          }
          //做判断是否有 stylesheet
          var stylesheetString ='';
          if(!/stylesheet/ig.test(item.attrs)) stylesheetString = ' rel="stylesheet"';
          css.push('<link' + item.attrs + stylesheetString + ' href="' + msg.ret + '" />');
        }

[ERROR] unreleasable file

image
image

请问 为啥写上这个配置就会报错呢,看发布后的输出结果又是正常的. 问题出在哪?

异步加载变量ModuleId无法生成path

在我的fis-conf里有一段配置:

fis.match('/path/to/page1', {
  isMod: true,
  id: 'pages/page1'
});

在我的代码中

Case1:

var callback = function () {
  require(['pages/page1'], function (Module) { /* do stuff */ });
}

Case2:

var callback = function (moduleId) {
  require([moduleId], function (Module) { /* do stuff */ });
}

在case1的前提下,我的index.html中有pages/page1对应的resource_map:

require.config({paths: {
  "pages/page1": "/path/to/page1"
}})

但在case2我的pages/page1对应的resource_map就没有了

这样不科学啊 ·· 以前fis2用mod的时候,我通过require.async的方法是可以获取到所有resource_map的 ··
现在resource_map变小了,但是我这种情况要怎么解决呀

当allInOne遇上useSameNameRequire:ture时, stylus的解析会始终有sourcemap

以下是相关的fis.config配置代码:

    .match('/app/script/master/components/(**.*)', {
        isMod: true,
        useSameNameRequire: true
    })
    .match('**.styl', {
        parser: fis.plugin('stylus', {
            sourcemap: false        //找到有所styl文件,解析stylus文件,后缀转换成.css文件
        }),
        rExt: '.css'
    })
    .match('::packager', {
        postpackager: fis.plugin('loader', {
            allInOne: {
                css: 'pkg/${hash}_aio.css',
                js: 'pkg/${hash}_aio.js',
                ignore: 'require.js',
                sourceMap: false
            },

            //map映射表内嵌网页
            useInlineMap: false,

            //控制 resourcemap 生成位置
            resoucemap: '/pkg/${hash}_map.js'
        })
    });

资源合并都成功了, 唯一的瑕疵就是样式合并后, 生成出来的/pkg/100c0e9_aio.css文件末尾有sourcemap.

//省去前面其它样式, 下面是最后的代码片段.
.component {
  background-color: #fff;
}
/*# sourceMappingURL=/script/components/component/home/home.css.map */

不知道这样问题描述的清楚吗. 希望能得到解决. 谢谢~

npm包管理下,require('package_id')不会默认识别

对于npm的包管理,和ES6语法

import { module } from 'package_id'

每次都要去配

fis.match('/node_modules/path/to/package.js', {
  id: 'package_id'
});

太不科学了!!
可不可以给所有的这种id路径,去设置自动查找啊,去分析node_modules里面的package.json的main field,然后分析到相应依赖,不然node_module的路径真的配的好恶心

useSiteMap ?

@2betop 之前这样设置现在fis3还支持吗?
fis.config.set('settings.postpackager.autoload.useSiteMap', true);

打包之后文件如何二次处理

在使用fis3的时候,有时候需要对打包阶段之后的代码进一步加工,如下图就是allInOne之后的样子
image

现在的需求是对这个文件我想复用单文件编译的那一套,比如:

改为hash,设置release路径,uglify-js,内嵌等等操作,简单的说就是对打包后的文件再进行一次单文件编译。

不然的话,按我现在的理解能力,只能在打包插件中再实现一遍上述操作。感觉这样会非常不优雅~

不知道有没有好的解决办法~~

allInOne打包时,生成的css和js哈希值不对,导致404

页面加载的内容:
css:
image
js:
image

git status -sb 实际生成结果:
image

fis-conf.js 部分配置如下:

fis.media('clear_and_release').match('::package', {
    // 基本需要的,打包时合并
    packager: fis.plugin('map', {
        'pack/base.css': [
            '/components/bootstrap-dist/css/bootstrap.css',
            '/static/css/common/common.less',
        ],
        'pack/base.js': [
            '/static/js/common/esl.source.js',
            '/static/js/common/crypt-1.4.js',
            '/components/jquery/jquery.js',
        ],
    }),
    // 雪碧图合并
    spriter: fis.plugin('csssprites', {
        layout: 'matrix',
        margin: '10',
        scale: 0.5,
    }),
    // 打包完成后,收集并统一合并
    postpackager: fis.plugin('loader', {
        allInOne: {
            css: 'pack/aio.css',
            js: 'pack/aio.js',
            // 可忽略常用且较大文件的打包
            ignore: [
                // 这里的ignore列表,移到::package->packager里做了
                // https://github.com/fex-team/fis3-postpackager-loader/issues/36
            ],
        },
    })
});
  • 不启用clear_and_release时,解析出的html源码中资源显式加载,没有错误;
  • 当启用clear_and_release这个media的时候,就会造成合并的hash值不对,请问这里是有什么配置冲突,或者是loader收集内容时有误?应该怎么解决呢?

<!--SCRIPT_PLACEHOLDER-->无法替换生成好的资源

ref #29

是生成的aio文件的位置占位吗.

为什么不管我在什么地方设置 , 都会把生成的aio文件放在loader文件的下面.

但是这些aio文件里面, 其实有的我是希望能够暴露在全局下的. 但是如果aio文件在loader下面的话, 就会变成一个模块, 导致在有的文件里面无法使用 window.* 取到变量了

使用AllInOne的打包方式为什么没生效,我加载了对应的loader了啊

fis-conf.js配置如下:

// 插件配置
fis.match('::packager', {
//fis-spriter-csssprites 插件 开启雪碧图合并
spriter: fis.plugin('csssprites'),

// npm install [-g] fis3-postpackager-loader
// 分析 __RESOURCE_MAP__ 结构,来解决资源加载问题
postpackager: fis.plugin('loader', {
    resourceType: 'amd',
    processor: {
        '.html': 'html'
    },
    allInOne: true,
    useInlineMap: true // 资源映射表内嵌
})

});

同一html页面的js资源完全没有合并。求解,坐等啊

async依赖打包进pkg目录

loader已经把页面的同步和异步依赖分析出来了,那么其他的插件有办法使用这个依赖项的map表了?

希望在打包过程中可以配置js/css的进一步压缩

该需求基于如下两个问题:

1.打包处理流程中,对于文件没有作处理,那么有些组件使用的是 .min 类型,这会使得一些注释无法去掉;此外,打包流程也会增加文件路径的注释引用。

关于这部分,是否可以开启一个参数,使用者希望得到更高的压缩率/混淆目时,可以通过参数配置。

2.在单文件处理流程中可以使用 uglify-js 等插件进行压缩。但在项目打包时动态选择子目录的情况下,一些第三方lib组件可能并没有引用,但每次打包也都会经过单文件处理流程,这就使得打包时间变得非常长(主项目中的子项目目录较多,第三方库引用也达到了30+)。

那么如果通过配置打包流程,只对 packTo 和 allinone 的结果进行压缩,就可以避免不必要的压缩耗时,也可以得到更好的压缩率。

当然该需求在打包后处理阶段或者 deploy 阶段单独开发一个插件来实现也是可以的。

[v1.3.13]自定义css parser里有fis.util.write操作时会导致打包失效

初衷:编译css文件时做简单替换并生成新的文件,配置类似:

fis.match('test.css', {
  parser: function (content, file, opt) {
    fis.util.write(file.realpathNoExt + 'xxx' + file.ext, content, 'utf-8');
    return content;
  }
});

fis3-postpackager-loader 版本:1.3.13

补上packager配置

fis.media('prod')
    // 启用打包插件,必须匹配 ::packager
    .match('::packager', {
      postpackager: fis.plugin('loader', {
        allInOne: true
      }),
      packager: fis.plugin('map'),
      spriter: fis.plugin('csssprites', {
        layout: 'matrix',
        margin: '15'
      })
    });

能不能对css也进行data-loader这样的处理

当对组件进行同名依赖的时候,比如
fis.match('/widget/**', {
//同名依赖
useSameNameRequire: true
})

组件样式的合并,总是比页面引用的权限小

header {
height: 50px;
width: 100px;
background: #000;
}

@charset "UTF-8";
/* === 全局变量配置 === /
/

@名称: reset
@功能: 重设浏览器默认样式
/
/
防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

我想的是header的在后面

能否改变all in one打包的文件路径

allInOne: {
js: '${filepath}.js'
}

这样打包${filepath}会把html目录也打包进去,然后生成pkg/html/xxx.js 这里能否自定义路径,别把路径html/也带进去,直接生成pkg/xxx.js

fis3-postpackager-loader配置的include 文件会产生依赖加载问题

加载器: mod.js
开发: backbonejs

在backbone中自定义路由module加载函数load,根据modulename,actionname变量名动态进行module的异步加载,主要使用require.async进行异步加载。
对于异步加载,fis会动态分析页面,根据require.async中值生成resourcemap插入到html页面中

当require.async传入的是字符串时,此时生成的resourcemap是可以正常使用的,但如果require.async传入的是变量值,由于fis无法具体分析到模块的路径,因此是无法正常生成resourcemap,对于此种情况,在postpackager-loader中配置include选项可以让resourcemap带上我们所需要的模块。

问题在于:
如果在fis中对include的目录配置了useSameNameRequire=true或者对其中的js配置了相关依赖:
如:

/*
require demo.css
*/

默认会在页面index.html中创建<link .... href="demo.css" />,此时我们并没有使用主动去加载include目录下的任何文件。这里希望在使用require('widgets/demo.js')时是才对相关依赖的css文件进行加载,而不是在初始化时就进行加载。
不知道是我对fis中include变量理解错误,还是加载器在分析过程出现了问题,
对于require.aysnc参数是变量的情况下,我们应当如何处理此种情况?请指教,谢谢!

//backbone路由的module加载函数
 load: function(target, moduleName, actionName, conditions) {
            ...
            var module_path = target + moduleName + actionName;
            require([module_path], function(cb) {
                if(cb) {
                    cb(param);
                } else {
                    console.error('模块加载失败!');
                }
            });
        }
//fis 相关配置
fis.match('::packager', {
    postpackager: fis.plugin('loader', {
        resourceType: 'mod',
        useInlineMap: false,
        resoucemap: 'static/pkg/${filepath}_map.js',
     include: [
          'widgets/**.js' 
        ]
    }),
    packager: fis.plugin('map')
})

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.