Babel编译ES6模块为UMD模式的问题

Question

Babel编译ES6模块为UMD模式的问题

Andark

312

发布于
2017-11-01

更新于
2017-11-01

新手上路，请多包涵

我用ES6的语法编写了三个类，用于模拟一些应用代码，ModuleBase类顾名思义就是基类，ModuleA从ModuleBase继承，ModuleB则是独立的类。编写完成，我用Babel进行编译，代码详情如下：

整体的目录结构：
图片描述

ModuleBase的代码：

class ModuleBase{
    constructor(){
        this.name = "module base";
    }

    render(){
        console.info(this.name);
    }
}

export default ModuleBase;

ModuleA的代码：

import ModuleBase from './module-base';

class ModuleA extends ModuleBase{
    constructor(){
        super();
        
        this.name = "module a";
    }

    render(){
        console.info(this.name);
    }
}

export default ModuleA;

ModuleB的代码：

class ModuleB{
    constructor(){
        this.name = "module b";
    }

    render(){
        console.info(this.name);
    }
}

export default ModuleB;

使用Babel编译的配置文件.babelrc：

{
    "presets": ["es2015"],
    "plugins": [
        "external-helpers",
        //编译成AMD
        // "transform-es2015-modules-simple-amd",
        //编译成UMD
        ["transform-es2015-modules-umd", {
            "globals": {
                "es6-promise": "Promise",
                "jquery": "jQuery",
                "./module-base": "ModuleBase"
            },
            "exactGlobals": true
        }],
        ["rename-umd-globals", {
            "moduleBase": "ModuleBase",
            "moduleA": "ModuleA",
            "moduleB": "ModuleB"
        }]
    ]
}

HTML页面的测试代码：

<body>
    
    <!-- <script src="./dist/module-a.js"></script> -->
    <script src="./external-helpers.js"></script>
    <script src="./node_modules/requirejs/require.js" data-main="./index.js"></script>
    <script>
        
    </script>
</body>

HTML页面中所引用的index.js的代码：

require(['./lib/module-a','./lib/module-b'],function(ModuleA, ModuleB){
    let ma = new ModuleA.default();
    ma.render();

    let mb = new ModuleB.default();
    mb.render();
});

问题来了：
大家回看一下.babelrc文件，其中注释掉的部分，是最初采用transform-es2015-modules-simple-amd插件将代码编译为AMD模式，然后在index.js中使用的时候，就是正常的直接let ma = new ModuleA()即可。但是，当使用transform-es2015-modules-umd编译时，同样是在AMD模式下使用，引用的module就必须多打一个default才可以，如上面贴出的代码所示。

我查了很多资料，但是都没有解决上面default的这个问题，请各位帮忙看看：