javascript - 如何使用 Babel 在 ES6 中编写与 CommonJS、AMD 和浏览器兼容的模块？

Question

在普通的 ES5 中，如果我想编写一个可以在服务器端(通过 CJS、AMD、RequireJS)或浏览器使用的包，我会做这样的事情:

(function(name, definition)){
   if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
       module.exports = definition();
   } else if (typeof define === 'function' && typeof define.amd === 'object') {
       define(definition);
   } else {
       this[name] = definition();
   }
}('foo', function foo(){
       'use strict';

        return 'foo';
})

在使用 ES6 编写程序包时，我如何实现此功能？

我尝试过的:

if (typeof exports !== 'undefined' && typeof module !== 'undefined') export Foo;
else if (typeof define === 'function' && typeof define.amd === 'object') define(Foo);
else this['Foo'] = Foo;

在转译时，Babel 抛出一个错误:

SyntaxError: src/index.js: 'import' and 'export' may only appear at the top level (10:69)
   9 |
> 10 | if (typeof exports !== 'undefined' && typeof module !== 'undefined') export Foo;
     |                                                                      ^
  11 | else if (typeof define === 'function' && typeof define.amd === 'object') define(Foo);
  12 | else this['Foo'] = Foo;
  13 |

当我使用 module.exports 而不是 export 时它确实有效，但是是否可以严格使用 ES6 来做到这一点？

Answer 1

所以没有真正的方法可以在通用模块定义中包含 ES6 模块，因为 ES6 模块严格来说每个文件一个，所有导入和导出语句都必须在顶层。

当加载器规范完成后，可能会有一种方法可以将模块添加到注册表中，这将是您将 ES6 模块包含在 UMD 中的方式，直到那时，因为没有浏览器真正支持 ES6 模块，您唯一的目标是 AMD 和 CommonJS，但你应该使用许多编译器或 trnspiler 之一，如 browserify 或 Babel 来为你做这件事。