Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

esl-mod.js加载后报esl_require not define与esl_define not define,这俩是干嘛的? #21

Open
xiaoyuze88 opened this issue Aug 29, 2015 · 7 comments

Comments

@xiaoyuze88
Copy link

貌似不影响功能,但看着报错不舒服,这两个变量是干嘛使的?我用的jello,谢谢!

@oxUnd
Copy link
Contributor

oxUnd commented Aug 30, 2015

你直接用 mod.js 即可。

@xiaoyuze88
Copy link
Author

嗯我知道,但有时候会有异步加载跨模块资源的需求,mod的require.async并不支持跨模块调用,开始想试试用esl-mod但发现问题多多,后来我改了mod源码现在ok了,谢了

@oxUnd
Copy link
Contributor

oxUnd commented Aug 31, 2015

谁说不支持的,你自己设置 require.resourceMap 就可以了。

@xiaoyuze88
Copy link
Author

require.resourceMap设置了后不支持md5或者发布路径更改后的资源管理路径了吧

@oxUnd
Copy link
Contributor

oxUnd commented Aug 31, 2015

我的意思是 require.resourceMap 可以满足你需求,至于 md5 是如何设置的问题。这个我们一般都用后端程序生成,所以夸模块这类的是基本需求,有完整的模型解决此类问题。

@xiaoyuze88
Copy link
Author

我试过手动设置require.resourceMap,但release -mo后发现设置的这个文件就不参与md5与压缩了,是我哪里没配对吗?你hi多少能加hi问下吗?

@oxUnd
Copy link
Contributor

oxUnd commented Aug 31, 2015

是这样的,一般 mod.js 在 fis 中充当前端模块化框架的职责,不过它没有分析出依赖的能力,这个是由 fis 工具去分析出的。可以说 mod.js 只是充当组件执行器的功能,对于异步可能有一些简单的加载,比如给定一个 url 就去加载它。

上面说到了 工具 产出依赖,这个依赖信息就记录在静态资源映射表(map.json)中。

刚才说到了 mod.js 只处理异步组件的加载,但这个加载是需要具体设定 require.resourceMap 才能工作起来的。这时候就面临一个问题,如何加载同步组件。

同步组件在一般 fis 解决方案中,都是由后端程序搞定的,一般都叫 后端模块化框架,其还有一个任务就是生成 require.resourceMap

说完了概念,给定一个具体的例子;

假设我分模块为 A,B 俩模块。

A/widget/a/a.js
A/page/index.tpl
B/widget/n/n.js
B/widget/x/x.async.js

我们规定 B 是可以访问 A 模块的资源,B 作为公共的模块。

index.tpl

{%script%}
require.async('B:widget/x/x.async.js', function (x) {
  x.run();
});
require('B:widget/n/n.js');
require('/widget/a/a.js');
{%/script%}

index.tpl 在 FIS 编译工具编译以后会产出这样一个依赖关系;

index.tpl -> B:widget/n/n.js              [sync]
          -> B:widget/x/x.async.js        [async]
          -> A:widget/a/a.js              [sync]

到了线上,当解析执行 index.tpl 的时候,发现 index.tpl 是 A 模块的,这是就会读取 A-map.json,查看 index.tpl 的依赖情况,发现依赖如上三个资源,并把这三个 ID 拿出来具体获取 url。

当分析到 B:widget/n/n.js 时,发现其是 B 模块的,这时候就读取 B-map.json 进行分析,读取 n.js 的依赖、打包确定具体 url。

最终把解析到的 url 同步的直接输出一些同步标签进行加载,异步的生成 require.resourceMap 的配置,这里面包含了一个 id 到一个 url 的对应关系。

require.resourceMap({
  'res': {
     'B:widget/x/x.async.js': {
        'url': '/static/widget/x/x.async_0ffabc1.js'
     }
  }
});

就这样通过两张表来做到夸模块访问。所以不管是 hash 还是 cdn 都可以通过统一 id 映射到具体的url上。最主要的是静态资源映射表的运用。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants