將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;
}