1

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

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

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

我觉得在线文档中 ES6 中的“可能”与您如何在 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
4

1 回答 1

2

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

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

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

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

于 2016-10-21T09:29:23.477 回答