如何在 es6 class 被 webpack 打包成一个函数后实例化它

Question

我正在学习 es6 类教程并制作了一个漂亮的小 d3 可视化。然后我做了一秒钟，认为我应该做一些关于将它们捆绑到一个库中的事情，所以最初尝试了模块（然后发现浏览器还不支持它们），然后我安装了 webpack 1.13 并使用 require() （因为虽然看起来 import 应该工作，但它没有；直到 2.0 才支持）。

只是，现在 bundle.js 中的 export default class Foo(data, args) 变成了 var Foo = function () { function Foo(data, args) ...。

当我尝试 Foo.Foo(data, args) 时，解释器只是抱怨，但我的直觉是，以这种方式假装实例化一个科学怪人类可能不是 webpack 的意图？是的，我可以将我所有的模块文件连接到我自己的 bundle.js 然后去 new Foo()，但我正在尝试使用合适的捆绑工具。

我觉得在线文档中 ES6 中的 "possible" 与您如何在 webpack 中实现它之间存在很大差距。

将模块与 webpack 捆绑在一起的分步方法是什么，这样您就可以从 index.js 脚本中的捆绑包中实例化类 ?

附录：（我到目前为止所做的）

├── bundle.js             #supposed to bundle Foo and Bar
├── bundle.js.map
├── index.html            #include bundle.js and index.js before </body>
├── index.js              #want to be able to new Foo() and Bar()
├── js
|    ├── foo.js           Foo() lives here
|    └── bar.js           Bar() lives here
├── LICENSE
├── node_modules
|    └── (stuff)
├── package.json
├── README.md
├── test
|    └── (stuff)
└── webpack.config.js     # builds without errors

Answer 1

Webpack 是一个打包工具。这意味着在你运行 webpack 之后，它会解析你所有的文件并将它们放入一个文件中，（如果使用 CommonsChunkPlugin 之类的东西，则更多）。

捆绑包中的所有内容都是私有的，因此如果您想共享您的类、代码等，您将需要公开它们，https://github.com/webpack/expose-loader 可以做到这一点，但本质上它所做的只是将东西放在全局命名空间上，在浏览器中，全局命名空间通常是 window 对象。

与其他 webpack 用户共享代码的更好方法是，您只需向他展示您的代码，然后他就可以编译到他的 webpack 包中。他甚至可以使用 require.ensure 进行自动捆绑拆分，如果说您的 Class 不经常使用，这将很方便，因此它会按需加载。

希望以上内容是有道理的，因为我记得当我第一次开始使用 webpack 时，它有时确实让人不知所措，而且文档对于初学者来说也不是最好的。

如何在 es6 class 被 webpack 打包成一个函数后实例化它

how to instantiate an es6 class after it's been bundled into a function by webpack

javascript

ecmascript-6

webpack

es6-class