Webpack打包Echarts主题文件地图文件报错Echarts is not Loaded

Echarts主题文件地图文件用的是umd模块包装方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function (root /* Object {} */, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
//
});

debugger 发现this传入的root不是window,而是个空对象Object {},导致root.echarts无法获取到echarts。
而且当前模块运行环境即不支持AMD也不支持commonjs。

对比vue-cli提供的webpack配置与正常webpack配置(自己手写),多了babel-loader对js的处理,将babel-loader去掉即可正常。

原来babel 配置presets 的 modules 为false,问题可能出现在这里了,查看babel modules API如下:

modules

1
2
3
4
5
"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".
Enable transformation of ES6 module syntax to another module type.
Setting this to false will not transform modules.

将modules配置项删除(改为commonjs),babel为模块提供了运行环境,umd包装的模块即可正常运行。

1
2
3
4
5
6
7
8
9
"presets": [
[
"env",
{
"modules": "commonjs"
}
],
"stage-2"
],

https://github.com/jm-team/vue-seed/blob/master/.babelrc#L6

现在,我们已经知道怎么为模块提供运行环境,但是为什么那个this不是指向window呢?其实很简单,因为模块调用都是通过如下代码实现的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {},
/******/ hot: hotCreateModule(moduleId),
/******/ parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
/******/ children: []
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }

每个模块调用都call硬绑定了this上下文为module.exports,初始化即是{}

坚持原创技术分享,您的支持将鼓励我继续创作!