Question

我正在开发Electron + Vue 2 + Webpack 2 + Bootstrap 3上的桌面应用程序。目前，所有JS代码都是由webpack捆绑的，并作为单个文件包含在HTML中。

的index.html

<body>
    <script src="bundle.js"></script>
</body>

一切正常，但......

主要缺陷是bundle.js尺寸太大。虽然，我已经使用Webpack CommonsChunkPlugin将bundle.js拆分为app.js（我的代码）和vendor.js（第三方库），我仍然觉得有些问题。在Electron中，无需将所有内容捆绑在一起，因为文件不会通过网络传输。但另一方面我需要Webpack来编译Vue模板。所以，我想找到一种将UI与业务逻辑分开的方法：

<body>
    <!-- UI: views, controllers, etc / bundled by webpack -->
    <script src="app.js"></script>
    <script src="vendor.js"></script>
    <!-- business logic : models, services, DAO etc / NOT bundled by webpack -->
    <script src="logic.js"></script>
</body>

问题是我不理解如何从Vue模板（在app.js中定义）调用业务逻辑/服务（在logic.js中定义）。 Whaterver我正在尝试webpack总是用require()代替logic.js：

var test = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"so many time wasted here\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

有人可以提供一个小例子吗？或链接到样板应用程序？

P.S。这是我的第一个Electron应用程序。也许我想做错事？任何建议都非常感谢。

UPD：好的，感谢this thread我已经解决了问题。

TL; DR：

externals

表示不应该由webPack捆绑的依赖项   而是由结果包保持请求。

定义：

externals: [
    "some_module"
],

并使用：

var someMethod = require('some_module');
console.log(someMethod());

Webpack：如何在Electron app中将UI与业务逻辑分开？

0 个答案: