通过莫理直

老实说，你现在应该在工作。如果你和一年前的我们有什么相似之处，你会在等待你的开发机器启动，或者等待Webpack构建文件供你尝试的时候来到这里。

对我来说，加载一个页面只需要多等5秒钟，就足以让我“只花一分钟”去访问Hacker News。20分钟后，我已经忘了自己到底在干什么。

下面是我们现在如何设置前端开发环境，这使得开发响应更快，更容易访问，并且工作起来更有趣。

我们一年前是怎么工作的

当你访问OkCupid网址时，OkC188bet金宝搏官网upid网络服务器(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或React组件，它会重新加载这些资源甚至没有重新加载页面．

一开始，我以为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，立即看到自己的变化。他们可以做到在现场！

结论

自从我们开始致力于本地托管的Javascript，日常的开发变得更加容易和顺畅。

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

如果您想帮助我们解决这样的问题，我们招聘高级前端工程师！如果你没有，请随时向我们发送您的反馈或想法！

感谢Melissa Huang, Jessie Walker, Michael Geraci, Dale Markowitz和Ben Brittain在这篇文章中给出的意见。

最初发表在https://tech.188bet金宝搏官网okcupid.com2017年3月28日。