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

Question

我正在尝试找出一种有效的方法来捆绑和分发各种依赖项（节点模块和/或＆＃34;客户端＆＃34; -side脚本和框架，如Angular）和我的Electron App。

尽管npm install module-name --save的基本方法适用于开发，但最终在最小化应用程序的大小和在运行时使用缩小的资源时却不是很好。例如，几乎所有的npm包（包括节点模块）都带有很多额外的行李＆＃34;像自述文件，各种版本的组件（缩小，不缩小，ES2015，没有ES2015等）。虽然这些文件非常适合开发，但所有这些文件绝对不需要包含在您要分发的版本中。

目前似乎有两种方法可以解决问题：

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

在这方面，我有几个问题：

1. 我不太确定为什么需要2个文件package.json系统，如果可以用--save-dev安装dev-only modules / dependencies，然后在实际的app build / compilation中使用pruning ？
2. 无论使用上述哪种方法，您仍然可以在应用中使用完整的npm包，包含应用未使用的所有杂项/重复文件。那么一个＆＃34;修剪＆＃34;那么说npm包本身就是为了只包含运行时使用的实际文件（比如缩小的脚本）？
3. 将 Bower 用于＆＃34;客户端＆＃34;包（如AngularJS 2，Bootstrap，jQuery等）和使用 npm 用于节点模块（如fs-extra）是一个更好的选择，只要分离关注点和以后捆绑的简易性？ / LI>
4. WebPack 只能用于生成所需的文件，至少对于＆＃34; cient-side＆＃34;，以便只有真正的节点模块才会包含在应用程序中，同时其余部分将采用web-pack编译的文件集形式？
5. 关于如何在实践中认可这种依赖关系和分发的实用技巧？咕嘟咕嘟的脚本？网络包脚本？项目结构？

谢谢。

Answer 1

我仍处于采用代码部署最佳实践的学习曲线中。但这是我推荐的首发清单。

• 是的，npm install --save-dev是隔离开发和构建特定包的第一个最简单的方法。这包括gulp / grunt / webpack及其加载器或其他软件包。它们仅用于构建，而不会用于实际运行的代码中。应用程序使用的所有程序包都应与npm install --save一起安装，以便它可用于项目级别。因此，在生产中，你不会在没有安装开发包的机器中安装npm - 生产。有关详细信息，请参阅What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?。
• 虽然最初的建议是在客户端使用bower，在服务器端使用npm，但两者都可以使用npm安装。毕竟，两者都在管理包和依赖项方面做同样的工作。但是，如果使用Web包，则建议将npm用于客户端依赖项。
• package.json应该只考虑管理依赖包而不是构建。要构建和选择所需的文件，您需要像gulp / grunt这样的任务运行程序或像web pack这样的捆绑程序。
• 虽然gulp / grunt非常适合构建自动化，包括将所有依赖的javascript捆绑在文件中并将它们缩小为一个文件，但webpack / browserify是一个更好的选择，因为它支持模块导入。模块导入是在节点js类型的编码中要求一个模块在另一个模块中的直观方式 var util = require('./myapp/lib/utils.js')这是提及代码中所需依赖项的有效方法。 Web包构建器像生成过程一样运行。但是不是通过html文件查找所有js文件，而是查看启动js文件并确定require语句提到的所有相关代码并相应地打包。它还缩小了代码。它还将css和图像文件加载到一个包中以减少服务器跳闸。如果需要，可以将某些模块配置为在运行时动态加载，从而进一步减少页面加载。 NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack详细讨论了这一点。
• Webpack可用于最佳地捆绑客户端应用程序，而服务器端无需捆绑或缩小，因为没有下载。
• 在web pack中，虽然你可以提到具有lib文件路径的依赖模块，但建议npm安装所有依赖项并提及模块名称。例如，如果您已经安装了jquery，而不是像/libs/jquery.min.js那样提供路径，那么您可以提到'jquery'。 Webpack将自动拉出jquery lib和依赖项并将其最小化。如果它们是常见模块，它也会被分块。因此，最好是npm安装依赖包而不是bower安装。
  • ES2015在编码时提供了很多好处，包括类型检查和模块。但是，所有浏览器本身都不支持该规范。因此，您需要将代码转换为浏览器理解的旧版本。这是通过像Babel这样可以用gulp运行的转发器来完成的。 Webpack内置巴氏装载机，因此网络包装了解ES2015。建议使用ES2015模块系统，因为它很快将成为事实上的编码方式，因为有转换器，所以不用担心IE8 / 9不支持这种情况。
  • 对于项目结构，您可以
• 服务器

• 客户端

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

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

我发现这个区域是一个海洋和不同的最佳实践学校。这可能是一套最佳实践。随意选择适合您的方案的集合。期待更多评论添加到此集合。