Closed Phinome closed 9 years ago
对于async require,必然是所有的modules都成功加载,才会执行callback的。这点不容置疑。
你给的case中,细节是这样的:
echarts/chart/line
模块对应的url资源不存在,所以报出了404错误echarts
模块对应的资源中,不单包括自身定义,还包括了echarts/chart/line
等模块及其依赖模块的定义。这个资源是一个打包的资源。所以当它返回的时候,echarts
和echarts/chart/line
都ready了。此时callback触发调用。所以建议对于线上环境,在async require之前,在页面中(after loader的位置)通过显式的<script src="echarts.amd.js"></script>
来引用echarts,这样当你require(['echarts','echarts/chart/line']
时,loader知道这俩模块已经存在,就不会再发起请求。该方法对于amd loader应该都有效。
另外,requirejs为什么不能绘制图表呢?我个人猜测是echarts中复杂的依赖关系导致requirejs分析和处理失败。具体失败在哪个点,暂时没时间去分析。
我也遇到了这个问题,官方生成的 AMD 模块用 requirejs 加载会出现依赖错误啊,官方没有测试过吗?能不能不要这样不负责任,在这个页面上写上一点点的 usage 也好呀。
@JSoon 建议看看http://echarts.baidu.com/doc/start.html 这个。
我自己搭建了打包环境,改用 r.js 来打包 echarts.js,测试可用,但是在打包单个种类的,比如说 bar.js 的时候,会重复打包 echarts.js 中已经打包进去的 module,进而导致体积比较大; 并且打包出来的模块名称,是所在路径的名称,有一长串的路径前缀,比如说 define('lib/echarts/2.2.2/echarts'),而不是 define('echarts'),苦恼。。
@JSoon 自己用r.js打包的话,把echarts配成package,能解决id长的问题
@errorrik 谢谢,还有个问题就是在 bar.js 中,如何避免打包 echarts.js 中已经打包好的依赖?我只能肉眼去 exclude 依赖的模块还是有好一点的办法?
我能想到的办法:写个工具,分析出echarts和bar的依赖来,然后交一下,就是echarts和bar的公共依赖。把这些公共依赖的模块配成r.js配置中bar的excludeShallow。
这个项目里的一些实现可能会有用:https://github.com/ecomfe/echarts-optimizer
找到一个更简便的办法,解决了,谢谢:) 顺便说一句,有需要的可以at我
@JSoon 分享一下呗
我分享几段代码,就应该比较清楚了,这样打包出来,既符合 AMD 模式,又符合 requirejs 的规则:
define([ 'echarts', 'echarts/chart/line', 'echarts/chart/bar', 'echarts/chart/pie', 'echarts/chart/radar', 'echarts/chart/scatter', 'echarts/chart/funnel', 'echarts/chart/map' ], function () { console.log('echarts: line, bar, pie, radar, scatter, funnel, map'); });
packages: [ { name: 'echarts', location: 'lib/echarts/2.2.2/src', main: 'echarts' }, { name: 'zrender', location: 'lib/zrender/2.0.8/src', main: 'zrender' } ]
requirejs: { echarts: { options: { baseUrl: 'html', mainConfigFile: 'html/app/config.js', // dir: 'html_dist', optimize: 'none', skipDirOptimize: true, findNestedDependencies: true, removeCombined: false, name: 'app/common/echarts', out: 'app/common/echarts.min.js' } } }
赞分享
情况描述:
在以下的两个DEMO中,用 esl 加载的 echarts ,虽然控制台报出
'echarts/chart/line' not found (http status 404)
,但是似乎并不影响啥,图表仍旧绘制;而用requirejs 加载的那个DEMO,报错不会绘制图表。说明:
esl:http://blog.supertree.me/demo/line.html
requirejs:http://blog.supertree.me/demo/line-require.html
问题:
require([Array],callback)
的处理是否是只要有一个依赖加载成功,即执行callback,前提条件是callback里只有一个param
,且依赖都打包在一个文件里,就如DEMO中那样:That's all. Thanks.