Webpack:如何将电子应用程序中的用户界面从业务逻辑中分离出来?
我在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中, 不需要将所有的东西捆绑在一起,因为文件不会通过networking传输。 但在另一方面,我需要Webpack来编译Vue模板。 所以,我想find一种将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总是用这个replacerequire()
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; }()));
有人可以提供一个小例子吗? 或链接到样板应用程序?
PS这是我的第一个电子应用程序。 也许我试图做错什么? 任何build议,高度赞赏。
UPD:好的,感谢这个线程我已经解决了这个问题。
TL; DR:
的外部
指示不应该由webPack捆绑的依赖关系,而是由生成的捆绑包保持请求。
定义:
externals: [ "some_module" ],
并使用:
var someMethod = require('some_module'); console.log(someMethod());