将ES6类从节点打包到浏览器

Question

我一直在尝试将超简单的ES6样式类对象打包到浏览器中。例子

class Foo {
   constructor(){
        this.name = "Foo";
   }
}
module.exports = Foo;

当然可以在我的节点项目中使用它，但是它对于浏览器也是有用的对象。到目前为止，我已经尝试过webpack和browserify，但是它们并未全局公开对象。我希望基本上包括生成的脚本文件，并能够从浏览器调用let foo = new Foo()。我该怎么办？

*请注意，实际上阻止我仅将文件直接包含在浏览器中的 是module.exports

Answer 1

对于Javascript 6，您想要执行以下操作：

class Foo {
   constructor(){
        this.name = "Foo";
   }
}
export default Foo;

（使用export而不是module.exports）

然后从另一个js文件执行：

import Foo from '<path_to_foo>';

例如，如果Foo.js与“其他”模块位于同一目录中，则可以执行以下操作：import Foo from './Foo';

然后您可以let f = new Foo()

现代浏览器倾向于支持js模块，但不能保证。

希望这会有所帮助

Answer 2

我没有破解一个巨大的库，也没有构建另一个节点模块以某种方式使其自动化，所以我想到了今天那把著名的剃刀，就这样做了。

if(typeof module !== "undefined"){
    module.exports = Foo;
}