有效地将依赖关系与电子应用程序捆绑在一起

Question

我试图找出一种有效的方法来捆绑和分发各种依赖项(节点模块和/或"客户端"脚本和框架,如Angular)与我的电子应用程序.

虽然基本方法npm install module-name --save适用于开发,但最终在最小化应用程序的大小和在运行时使用缩小的资源时却不太好.例如,几乎所有的npm软件包(包括节点模块)都带有很多"额外的包袱",如自述文件,各种版本的组件(缩小,未缩小,ES2015,无ES2015等).虽然这些文件非常适合开发,但所有这些文件绝对不需要包含在您要分发的版本中.

目前似乎有两种方法来解决问题:

• Electron Builder建议使用双文件package.json系统.
• 在开发期间使用的任何依赖项应仅使用npm安装--save-dev,然后在构建应用程序以进行分发时应使用prunning.

在这方面,我有几个问题:

1. 我不太确定为什么需要2文件package.json系统,如果可以--save-dev在实际的应用程序构建/编译期间安装dev-only modules/dependencies 然后使用修剪？
2. 无论使用上述哪种方法,您仍然可以在应用程序中使用完整的npm软件包,包含应用程序未使用的所有杂项/重复文件.那么一个"修剪"如何说npm包本身,以便只包含在运行时使用的实际文件(如缩小的脚本)？
3. 将Bower用于"客户端"软件包(如AngularJS 2,Bootstrap,jQuery等)并将npm用于节点模块(如fs-extra)是一个更好的选择,只要分离关注点和以后轻松捆绑？
4. 可能的WebPack被用来生产出需要的文件,至少对"cient方",因此只有真正的节点模块将被包含在应用程序,而它的其余部分将在网络包编集的形式的文件？
5. 关于如何在实践中认可这种依赖关系和分布的实用技巧？咕嘟咕嘟的脚本？网络包脚本？项目结构？

谢谢.

Answer 1

我仍处于采用代码部署最佳实践的学习曲线中。但这是我推荐的起始列表。

• 是的，npm install --save-dev这是隔离开发和构建特定包的第一个最简单的事情。这包括 gulp/grunt/webpack 及其加载器或其他包。它们仅用于构建，而绝不会用于实际运行的代码中。应用程序使用的所有软件包都应安装，npm install --save以便项目级别可用。因此，在生产中，您不会在根本不会安装开发包的机器中使用 npm install --product 。请参阅 npm package.json 文件中的dependency、devDependency 和peerDependency 之间有什么区别？了解更多信息。
• 虽然最初的建议是在客户端使用 Bower，在服务器端使用 npm，但两者也可以使用 npm 安装。毕竟，两者都执行相同的管理包和依赖项的工作。但是，如果使用 web pack，建议也使用 npm 来处理客户端依赖项。
• package.json 应该被认为仅管理依赖包，而不是用于构建。为了仅构建和选择所需的文件，您需要像 gulp/grunt 这样的任务运行器或像 web pack 这样的捆绑器。
• 虽然 gulp/grunt 在构建自动化方面非常流行，其中包括将所有依赖的 javascript 捆绑在文件中并将它们缩小到一个文件中，但 webpack/browserify 是一个更好的选择，因为它支持模块导入。模块导入是一种在 Node js 编码类型中需要一个模块到另一个模块的直观方式， var util = require('./myapp/lib/utils.js')这是在代码中提及所需依赖项的强大方式。Web Pack 构建器像 gulp 一样运行构建过程。但不是在 html 文件中查找所有 js 文件，而是查看起始 js 文件，并递归地确定 require 语句提到的所有依赖代码并相应地进行打包。它还缩小了代码。它还将 CSS 和图像文件加载到一个捆绑包中，以减少服务器访问。如果需要，可以将某些模块配置为在运行时动态加载，进一步减少页面负载。NPM、Bower、Browserify、Gulp、Grunt、Webpack详细讨论了这一点。
• Webpack 可用于最佳地捆绑客户端应用程序，而服务器端则无需捆绑或缩小，因为无需下载。
• 在 web pack 中，虽然您可以使用 lib 文件路径提及依赖模块，但建议使用 npm install 所有依赖项并提及模块名称。例如，如果您已经安装了 jquery，则可以提及“jquery”，而不是提供类似 /libs/jquery.min.js 的路径。Webpack 将自动拉取 jquery 库和依赖项并将其最小化。如果它们是公共模块，它也会被分块。所以，最好是npm install依赖包而不是bower install。
  • ES2015 在编码期间提供了很多好处，包括类型检查和模块。然而，所有浏览器尚不原生支持该规范。因此，您需要将代码转换为浏览器可以理解的旧版本。这是通过像 Babel 这样可以用 gulp 运行的转译器来完成的。Webpack 有内置的 babel 加载器，因此 webpack 可以理解 ES2015。推荐使用ES2015模块系统，因为它很快就会成为事实上的编码方式，而且由于有转译器，所以不用担心IE8/9不支持。
  • 对于项目结构，你可以有
• 服务器

• 客户

  • src包含js文件
  • dist 包含生成的 html 和构建文件

webpack.dev.config.js 和 webpack.prod.config.js 可以位于根级别。

我发现这个领域是一片海洋，有不同的最佳实践流派。这可能是一组最佳实践。请随意选择适合您的场景的集合。期待更多评论添加到此集合中。