tags: Web Maker; Codepen; Web开发; 前端开发工具; 实时预览
译自: Web Maker, an Offline, Browser-based CodePen Alternative——by Kushagra Gaur
本文，Kushagra Gaur介绍了一款他本人专为那些需要一个响应迅速且可离线工作的Web平台编译器的前端开发者而制作的浏览器扩展插件 —— Web Maker。
前言
如果你像我一样也是一位前端开发人员，你可能试用过一个或多个代码编译器像 CodePen、 JSBin、 JSFiddle 等（我们国内有 JSRun）。这些都很好，能完美的满足我们的工作需求。我主要用他们来分析解决我所遇到的问题，或者用来与同事讨论的一些代码片段。但使用这些工具必须要连网，这样连网加载这些应用时就总会有固有延迟。而这也总使我感到不爽。
当外出旅行或在机场等机时，我可能也需要一个快速的途径来编译或调试代码，然而这种场景下是没有网络的，也就意味着之前提到的那些在线编译器都不能用。那该在呢么办呢？当然，你可以使用编辑器，并在浏览器中查看效果---但在这个快节奏的世界，这样操作就显得有些慢了！
我试着去寻找一款能满足我这种需求的编译器，然而一款也没找着。另外，我发现许多人同我一样也在寻找着这样一个东西︰ https://twitter.com/armstrong/status/567403700713717763 于是决定自己来解决这个问题，然后就开发出了 Web Maker。现在我所有的 web 开发项目都会用 Web Maker ，甚至在维护与再开发 Web Web Maker本身时也是如此！
1. Web Maker 是什么 ？
Web Maker 是一款 Chrome 扩展插件，将你浏览器的新选项卡 （可选） 转换成 web 编译器，你可以在其中编写 HTML、CSS 和 JavaScript，同时还可以实时预览页面效果。这款插件已经有上千用户了，在 Chrome Web Store上可提供下载。
1.1 下载地址：
Chrome Web Store（需要翻墙。若翻不了墙的也可从 Github 中下载后采取 这种方法 安装。注：步骤 4 对应下载包里的 src文件夹）。
2. 特点
2.1 速度极快，可离线工作
作为一款 chrome 扩展插件， Web Maker 完全寄生在你的浏览器中。它没有涉及到网络需求（除非你正在使用一个第三方的 JavaScript 和 CSS 库）。所以它初始启动迅速。不仅如此，而且你对代码所做的的每一次中每次变动都能在预览中即时自动刷新。当然，如果仅仅只是 CSS 的变动，它甚至连刷新不需要就直接显示出来。
你还可以选择保存或者加载你编辑好的项目以便以后再次编辑。它们会被保存在您的浏览器的本地存储中。
2.2 预处理器支持
预处理器是几乎每个开发人员的工具链中的一个组成部分。Web Maker 为你提供了HTML、CSS 以及 JavaScript三种语言中所有最常用的预处理器，包括 Markdown、Jade、SCSS、Less、JSX 以及 TypeScript。
如果您需要在你的项目中使用外部的 JavaScript 或 CSS 库 （如 jQuery 或 Bootstrap），你只需简单点击一下"Add Library"按钮，从可用列表中，选择其中一个最受欢迎的库或输入任何库的名称，从显示的自动建议项中选择它即可。
2.3 多个可供选择的布局
除了有多个编辑器布局选项，你所保存的每个项目都记得其上次使用的布局选项，以及三个代码编辑窗口的大小。所以，基本上，每当你重新加载之前的任何项目时，你都会得到与你上次保存时完全相同的编辑器配置。
此外，要想在实际的浏览器窗口大小下查看你的项目，只需切换到全屏布局模式即可。
2.4 预览区域截图捕获 功能
Chrome 扩展的 API 赋予了 Web Maker 强大的能力去做那些普通的 web 应用难以实现的功能。比如说截图捕获功能，只需单击一下 “Take Screenshot” 按钮即可随时得到预览区域的截图。
2.5 可另存为 HTML 或在 CodePen 中打开
在 Web Maker 中完成了你的项目后，如果想在其他地方使用它，你并不需要将它复制粘贴到一些文件中，你只需点击 “Save as HTML file” 选项即可将你项目中的 HTML、 CSS 和 JavaScript 代码嵌入到一个 HTML 文件中。
或者说你想要与世界分享你的项目︰“Open on CodePen” 按钮可以在 CodePen 中打开你的项目。
2.6 源代码开源
我（Kushagra Gaur）已经将 Web Maker 在 GitHub 上开源了，我认为这样可以让我接触到更多的用户，他们可以根据他们的需求提出各种建议或标记出他们所遇到的问题，这样就可以更集中地将问题反馈上来。
在打造这样一款 Web 平台编译器时用到了许多有趣的逻辑块。所有这些都是从开源项目中借鉴的。我个人工作中喜欢使用 Esprima 来预防无限循环。
Web Maker 中大量地使用了一些值得膜拜的开源项目如: CodeMirror、Esprima、Split.js、Escodegen、Inlet.js、Emmet 等。谨此向这些开源项目的作者们表示感谢！如前所述，Web Maker 在开发过程中也使用了 Web Maker (笑脸)。
## 您可以使用 Web Maker 来做什么
除了用于通常的 web 开发工作以外，Web Maker 可以用到很多有趣的方面。让我们来看看其中的一些吧。
2.7 学习的过程中实践，省去安装的麻烦
如果你正在开始学习 web 开发，Web Maker 是一个你日常练习、作业等的好地方。你可以专注于编写代码而无需分心去设置编辑器或者使用预处理器时代码的生成过程。
2.8 为您的应用程序创建独立的组件
近期，基于组件的体系结构 正被广泛的用于 web 应用程序的设计中。无论你们正在使用 react、Vue 还是其他某个 JavaScript 框架，每个人都朝着使各自的应用程序成为独立组件的集合的方向设计。
您可以在 Web Maker 中开发或者快速地试用这些独立的组件，— — 喜欢的话，也可以将它们集成到你的应用程序中。
2.9 作为一款 Markdown 编辑器
Web Maker 并不仅仅限于 web 开发。如今，很多博主通常都用 Markdown 来写博客或文章，以至于他们经常要用到 Markdown 编辑器。你可以将 Web Maker 变成一款 Markdown 编辑器，并且可以非常快速地实时预览。（这篇文章是用 Web Maker 写的）。
2.10 作为在课堂里教学生的工具
由于 Web Maker 可以离线运行，因而它又是一个很好的平台可以在课堂上供学生们探索实践巩固他们所学到的新东西。
2.11（可以运行代码片段）调试时帮助减少测试项
当你试图查找你应用程序中的某个 bug 时，有必要隔离可疑组件，这样你就可以在一个更小的环境中进行调试，不受应用程序中其余部分的任何干扰。 Web Maker 就是这样一个可以快速运行一段代码的很好的工具。
2.12 存储你最喜爱的代码片段
在网站上找到了一些有趣的代码段时，你不必记住或记下该网页地址，只需打开 Web Maker ，将代码片段粘贴到相应区域，然后给它取个名称并保存即可。这样以后需要参考或编辑时你只要再打开就可以了。
3. 即将到来的一些新功能
这些是 Web Maker 的一些新功能（已经在新版2.4.0中实现）︰
* 导入/导出。很快就会有选项可以导出你的作品，而且它们也可以再次导入到 Web Maker。你还能够创建备份到云端（如 Google Drive 的服务）。
* 自定义编辑器。更多的自定义设置是也在准备中，其中包括能够设置字体大小、 主题和缩进。
更多详细信息请参考 GitHub issues 页面中的 roadmap（版本更新线路图）。
4. 总结
好啦，以上就是关于 Web Maker（我专为前端开发人员设计的一款浏览器扩展插件，为了使大家的码农生活更加轻松一些）的介绍了。
因为 Web Maker 是一个开源软件，所以你也有机会把它改造成你想要的东西。你可以申请加入某些新功能，甚至也可以参与到其中来贡献代码把那些有趣的功能或特性集成到 Web Maker 中。
如果你喜欢它，你也可以关注 @webmakerApp 以获取更新、给出建议，或者只是问候一下。
最后，我的博客地址：https://kuleyu.netlify.com/
附录：手动安装github上的Chrome插件
步骤如下：
1. 在github上搜索需要的插件名称，进入项目，下载然后解压存放到某个不会随意删除的位置，（若插件还包含其他浏览器的,则只需找到chrome子目录)；
2. 打开Chrome，输入: chrome://extensions/，（其他基于chromium的浏览器可能不同，如：360极速浏览器应输入: chrome://myextensions/extensions/）
3. 勾选Developer Mode（即开发者模式）；
4. 选择Load unpacked extension...然后定位到刚才解压的文件夹中对应的只包含chrome插件项目的文件夹（文件夹一定要选对，不然无法读取），确定；
5. 这就安装好了，去掉Developer Mode勾选。
注意：
1. 该方法只适用于未封装的chrome插件，若是.crx格式的插件，直接拖拽到浏览器内即可安装。
2. chrome插件除了Chrome浏览器可以安装以外，其他基于chromium的浏览器如:360极速浏览器、vivaldi、opera等等也都可以安装使用。
网友评论