老实说,你现在应该工作了。如果您像一年前的我们一样,在这里等待开发机器启动,或者等待Webpack构建文件供您试用。

对我来说,等待页面加载仅仅多5秒钟就足以让我去浏览黑客新闻“一分钟”。然后,20分钟后,我已经忘记我到底在做什么了。

下面是我们的前端开发环境是如何设置的,这使得开发的响应性更强,更容易上手,工作起来也更有趣。

我们如何工作一年前

当你访问一个OkCupid的URL时188bet金宝搏官网,OkCupid的网络服务器(okws)生成HTML,并发送给你通过互联网。

每个开发程序都有一台本地机器,运行一个开发构建okws。开发构建的HTML指向Javascript的本地版本:

< script src = " / / morle188bet金宝搏官网y.dev.okcupid.com/flat/synced/desktop/js/vendor.min.js ? v = 1 a7a5f9563d3f27 " > < /脚本>

okws在Linux上运行,模板文件需要与okws文件。这意味着Mac上的每个前端工程师(也就是我们所有人)都需要同一网络上的独立开发机器

我们的JavaScript源文件存储在这些机器上,我们用的WebPack编译它们。我们不得不通过大量的箍编译变化的跳跃:

  1. 一个开发人员通过AFP连接到他们的开发机器,它挂载okws目录为/卷/ devName /
  2. 他们cd到那个目录。
  3. 他们启动了Webpack观察家。
  4. Webpack读取源文件在网络上
  5. Webpack构建Javascript包至少需要90秒这已经不是第一次了。
  6. Webpack将编译后的文件保存到dev机器上的正确目录中。

编译每一个文件,我们(包括所有的依赖node_modules)不得不做从开发计算机到本地计算机的跨办公室旅行

有时,如果你的WebPack编译完成之前刷新页面,你必须刷新页面再次来查看您的更改。刷新两次页面就能看到你在2015年的变化,这只比用传真的方式稍微高级一点。

我们现在的工作方式

有与我们的旧体制两根问题:

  1. 在我们的开发机器上存储源文件意味着在编译期间需要进行大量的网络往返。
  2. Webpack只编译文件。我们必须(喘气!)手动重新加载页面。

第一个问题“很容易”解决。源文件在哪里并不重要,因为okws只服务已编译的JS。所以我们移动了Javascript源文件从主OkCupid Git回购188bet金宝搏官网(因此,关dev的机器)和创建的新的Git存储库时,okfrontend克隆我们的Mac电脑。

第二点本身并不是问题;这是我们不应该处理的事情。我会羡慕地读到其他团队使用的文章webpack-dev-server本地构建他们的单页应用程序。

如果您从未使用过webpack-dev-server,它是一个奇迹:它将文件引用保存在内存中,所以你的重建更快;它为你重新加载页面上的变化;如果你改变CSS或反应组件,它会重新加载这些资产甚至没有重新加载页面

起初,我认为webpack-dev-server会只有为单页应用程序工作:它提供一个静态HTML文件,指向你编译的JS文件。但这些编译JS文件和其他文件一样都有url。我们没有理由不能将服务器指向这些url。

okws输出的Javascript的路径这一点对我们本地机器:

< script src = " / / morle188bet金宝搏官网y.dev.okcupid.com/flat/synced/desktop/js/vendor.min.js ? v = 1 a7a5f9563d3f27 " > < /脚本>

我们可以把定义域变成任何我们想要的。如果唐纳德·特朗普想要托管我们的Javascript文件,我们可以把它指向whitehouse.gov。所以我们增加了一项职员特权来指引那些通往魔法领域的道路本地主机:

< script src = " / / localhost: 8080 /平/同步/桌面/ js / vendor.min.js ? v = 1 a7a5f9563d3f27 " > < /脚本>

然后,我们使用webpack-dev-server从本地主机编译这些文件。

由于我们不再使用法新社往返,我们的初始构建时间减少了一半(从90秒到45秒)不完美,但更好的比以前。

这种设置的一个意想不到的副作用是,开发人员现在可以在世界任何地方工作,甚至无需VPN连接。只要他们有工作人员资质证明文件和本地结账okfrontend,他们可以启动Webpack并立即看到它们的变化。他们可以做到在现场!

结论

由于我们已经移动到localhosted的Javascript工作,一天到一天的发展已经得到了很多更容易和顺畅。

  • 建造时间从“冗长”变成“仍然很长,但更好”。
  • 在办公室工作从“绝对的折磨”变成了“一开始就很快乐”。
  • 开发新的Javascript特性从“有趣,夹杂着折磨”变成了“从一开始就很愉快”。

如果您想帮助我们解决这样的问题,我们招聘高级前端工程师!如果你没有,请把你的反馈或想法发给我们!

感谢Melissa Huang, Jessie Walker, Michael Geraci, Dale Markowitz和Ben Brittain为这篇文章做笔记。