用电子应用程序有效打包依赖关系来进行分发

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

尽pipenpm install module-name --save的基本方法对于开发很有效,但在最小化应用程序的大小和在运行时使用缩小的资源方面并不是那么好。 例如,几乎所有的npm软件包(包括节点模块)都会附带许多“额外的行李”,例如自述文件,各种版本的组件(缩小的,未缩小的,ES2015,no-ES2015等)。 虽然这些对于开发很有用,但是所有这些文件绝对不需要包含在您将要发布的版本中。

目前似乎有两种方式来解决这个问题:

  • Electron Builderbuild议使用2-file package.json系统。
  • 在开发过程中使用的任何依赖项都应该使用--save-dev安装npm,然后在构build应用程序时使用prunning。

在这方面我有几个问题:

  1. 我不太清楚为什么需要2个文件的package.json系统,如果用--save-dev安装dev-only模块/依赖--save-dev ,然后在实际的应用程序构build/编译过程中使用修剪?
  2. 不pipe上面哪种方法被使用,你仍然会在你的应用程序中得到完整的npm包,包含你的应用程序没有使用的所有杂项/重复文件。 那么,如何“修剪”这么说自己的npm包,以便只有在运行时正在使用的实际文件(如缩小的脚本)被包括在内?
  3. Bower用于“客户端”包(如AngularJS 2,Bootstrap,jQuery等)和使用npm作为节点模块(如fs-extra)将是一个更好的select,只要关注的分离和绑定的容易性?
  4. 是否可以使用WebPack来生成所需的文件,至less是“cient-side”,这样只有真正的节点模块才会被包含在应用程序中,而其余的将以web-pack编译的forms文件?
  5. 关于这种捆绑的依赖和分布如何在实践中得到认可的任何实用技巧? 咕嘟咕嘟的脚本? 网页包装脚本? 项目结构?

谢谢。

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

  • 是的, npm install --save-dev是隔离开发和构build特定软件包的第一个最简单的事情。 这包括gulp / grunt / webpack及其装载机或其他软件包。 这些仅用于构build,而不用在实际运行的代码中。 应用程序使用的所有软件包都应该使用npm install --save进行安装,以便可以使用项目级别。 所以,在生产中,你不会在安装dev软件包的机器上安装npm install –production。 请参阅npm package.json文件中的依赖关系,devDependencies和peerDependencies之间的区别是什么? 获取更多信息。
  • 虽然最初的build议是使用bower作为客户端,npm作为服务器端,但两者都可以使用npm进行安装。 毕竟,两者都在pipe理软件包和依赖关系方面做同样的工作。 但是,如果使用networking包,build议npm用于客户端依赖关系。
  • package.json应该被认为只pipe理依赖包而不是用于构build。 为了构build和挑选只需要的文件,你需要任务跑步者像吞咽/咕噜或捆绑器,如networking包。
  • 虽然gulp / grunt对构build自动化非常stream行,其中包括将所有依赖的javascript捆绑到文件中,并将它们缩小到一个文件中,但是webpack / browserify是支持模块导入的更好select。 模块导入是直接的方式,需要一个模块在另一个节点jstypes的编码var util = require('./myapp/lib/utils.js')这是在代码中提到所需依赖关系的强大方式。 网页包构build器像构build过程一样运行。 但是不是通过查看所有js文件的html文件,而是查看起始js文件并且recursion地确定由require语句提及的所有相关代码并相应地进行打包。 它也缩小了代码。 它还将CSS和图像文件加载到一个包中,以减less服务器行程。 如果需要,可以将一些模块configuration为在运行时加载,进一步减less页面加载。 NPM与Bower vs. Browserify与Gulp vs. Grunt与Webpack讨论了这一点。
  • Webpack可以用来优化捆绑客户端应用,而服务器端不需要捆绑或缩小,因为没有下载。
  • 在web pack中,尽pipe你可以用lib文件path来提到依赖模块,但是build议使用npm安装所有的依赖关系,并提到模块名称。 例如,如果你已经安装了jquery,而不是像/libs/jquery.min.js这样的path,你可以提到'jquery'。 Webpack将自动拉动jQuery的lib和依赖关系,并将其最小化。 如果它们是通用模块,它也将被分块。 所以,最好是npm安装依赖包,而不是bower安装。
    • ES2015在编码时间提供了很多好处,包括types检查和模块。 但是,所有浏览器本身还不支持该规范。 所以你需要将代码转换成浏览器能够理解的旧版本。 这可以通过像Babel这样的可以运行的转运工来完成。 Webpack内置了babel加载器,因此web pack可以理解ES2015。 build议使用ES2015模块系统,因为它将很快成为事实上的编码方式,并且由于有了译码器,所以不用担心IE8 / 9中不支持这种function。
    • 对于项目结构你可以有
  • 服务器
  • 客户

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

webpack.dev.config.js和webpack.prod.config.js可以在根目录下。

我发现这个领域是一个海洋和不同的学校的最佳实践。这可能是一套最佳实践。 随意select适用于您的scheme的套件。 期待更多的评论添加到这个集合。