requirejs 与 esl 加载 echarts 的问题 about esl HOT 11 CLOSED

对于async require，必然是所有的modules都成功加载，才会执行callback的。这点不容置疑。

你给的case中，细节是这样的：

1. Array中包含两个modules，所以同时发出了请求
2. echarts/chart/line模块对应的url资源不存在，所以报出了404错误
3. 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分析和处理失败。具体失败在哪个点，暂时没时间去分析。

from esl.

我也遇到了这个问题，官方生成的 AMD 模块用 requirejs 加载会出现依赖错误啊，官方没有测试过吗？能不能不要这样不负责任，在这个页面上写上一点点的 usage 也好呀。

from esl.

@JSoon 建议看看http://echarts.baidu.com/doc/start.html 这个。

from esl.

我自己搭建了打包环境，改用 r.js 来打包 echarts.js，测试可用，但是在打包单个种类的，比如说 bar.js 的时候，会重复打包 echarts.js 中已经打包进去的 module，进而导致体积比较大；
并且打包出来的模块名称，是所在路径的名称，有一长串的路径前缀，比如说 define('lib/echarts/2.2.2/echarts')，而不是 define('echarts')，苦恼。。

from esl.

@JSoon 自己用r.js打包的话，把echarts配成package，能解决id长的问题

from esl.

@errorrik 谢谢，还有个问题就是在 bar.js 中，如何避免打包 echarts.js 中已经打包好的依赖？我只能肉眼去 exclude 依赖的模块还是有好一点的办法？

from esl.

我能想到的办法：写个工具，分析出echarts和bar的依赖来，然后交一下，就是echarts和bar的公共依赖。把这些公共依赖的模块配成r.js配置中bar的excludeShallow。

这个项目里的一些实现可能会有用：https://github.com/ecomfe/echarts-optimizer

from esl.

找到一个更简便的办法，解决了，谢谢：）
顺便说一句，有需要的可以at我

from esl.

@JSoon 分享一下呗

from esl.

我分享几段代码，就应该比较清楚了，这样打包出来，既符合 AMD 模式，又符合 requirejs 的规则：

1. 需要打包的 echarts 模块

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');
});

2. config.js 配置

packages: [
    {
        name: 'echarts',
        location: 'lib/echarts/2.2.2/src',
        main: 'echarts'
    },
    {
        name: 'zrender',
        location: 'lib/zrender/2.0.8/src',
        main: 'zrender'
    }
]

3. r.js 配置 (我用的 grunt)

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'
        }
    }
}

from esl.

赞分享

from esl.