如何实例化一个es6类，当它被webpack捆绑到一个函数中时

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

本文关键字：一个 webpack 函数 实例化 es6      更新时间：2023-09-26

我是按照es6类教程，并做了一个漂亮的小d3可视化。然后我做了第二个，并认为我应该把它们捆绑到一个库中，所以最初尝试了模块(然后发现浏览器还不支持它们)，然后我安装了webpack 1.13并使用了require()(因为虽然看起来import应该工作，但它没有;

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

当我尝试Foo.Foo(data, args)时，解释器只是抱怨，但我的直觉是，假装即时化frankenclass这种方式可能不是webpack想要的?是的，我可以只是连接我所有的模块文件到我自己的bundle.js，然后去new Foo()，但我试图使用一个适当的捆绑工具。

我觉得在线文档在ES6中"可能"的内容与webpack中实际实现的内容之间存在很大差距。

如何一步一步地将模块与webpack捆绑在一起，这样你就可以在index.js脚本中从捆绑包中实例化你的类?

附录:(What I've been far)

├── 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

Webpack是一个打包器。这意味着在你运行webpack之后，它会解析你所有的文件并把它们放到一个文件中，(如果使用类似CommonsChunkPlugin的东西，它会把它们放到多个文件中)。

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

与其他webpack使用者共享代码的一个更好的方法是，你只需要告诉他你的代码在哪里，然后他就可以编译到他的webpack包中。他甚至可以用require.ensure做自动bundle拆分，如果你的类不经常使用，这将是很方便的，所以它会按需加载。

希望上面的内容有意义，因为我记得当我第一次开始使用webpack时，它确实有时看起来势不可挡，而且文档对初学者来说并不是最好的。

相关文章：