CodeSandbox 浏览器端的webpack是如何工作的？上篇

xiaoxiaozi 发布于2019-08-23 18:31 / 1937人阅读

摘要：可以用于快速原型开发展示还原等等相似的产品有很多，例如已废弃则更加强大，可以视作是浏览器端的运行环境甚至在版本已经支持模式，支持的插件和模式还有主题另外支持离线运行。

这期来关注一下CodeSandbox, 这是一个浏览器端的沙盒运行环境，支持多种流行的构建模板，例如 create-react-app、 vue-cli、parcel等等。可以用于快速原型开发、DEMO 展示、Bug 还原等等.

相似的产品有很多，例如codepen、JSFiddle、WebpackBin(已废弃).

CodeSandbox 则更加强大，可以视作是浏览器端的 Webpack 运行环境, 甚至在 V3 版本已经支持 VsCode 模式，支持 Vscode 的插件和 Vim 模式、还有主题.

另外 CodeSandbox 支持离线运行(PWA)。基本上可以接近本地 VSCode 的编程体验. 有 iPad 的同学，也可以尝试基于它来进行开发。所以快速的原型开发我一般会直接使用 CodeSandbox

引

基本目录结构

项目构建过程

Packager

WebpackDllPlugin

在线打包服务

回退方案

Transpilation

基本对象

Manager

TranspiledModule

Transpiler

BabelTranspiler

Evaluation

技术地图

扩展

引

笔者对 CodeSandbox 的第一印象是这玩意是运行在服务器的吧？比如 create-react-app 要运行起来需要 node 环境，需要通过 npm 安装一大堆依赖，然后通过 Webpack 进行打包，最后运行一个开发服务器才能在浏览器跑起来.

实际上 CodeSandbox 打包和运行并不依赖于服务器, 它是完全在浏览器进行的. 大概的结构如下:

Editor: 编辑器。主要用于修改文件，CodeSandbox这里集成了 VsCode, 文件变动后会通知 Sandbox 进行转译. 计划会有文章专门介绍CodeSandbox的编辑器实现

Sandbox: 代码运行器。Sandbox 在一个多带带的 iframe 中运行, 负责代码的转译(Transpiler)和运行(Evalation). 如最上面的图，左边是Editor，右边是Sandbox

Packager 包管理器。类似于yarn和npm，负责拉取和缓存 npm 依赖

CodeSandbox 的作者 Ives van Hoorne 也尝试过将 Webpack 移植到浏览器上运行，因为现在几乎所有的 CLI 都是使用 Webpack 进行构建的，如果能将 Webpack 移植到浏览器上, 可以利用 Webpack 强大的生态系统和转译机制(loader/plugin)，低成本兼容各种 CLI.

然而 Webpack 太重了

服务器托管海外云主机在工作遇到 ddos 攻击你是如何解决的浏览器端的webrtc使用 webpack是什么如何关闭浏览器的webRTC

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105347.html

React 和 Redux 的动态导入

摘要：动态导入使用的是的方法来加载代码。使用到目前为止，我们已经演示了如何动态加载应用程序的模块。还需要公开一个名称，在该名称下我们的模块状态将存在于应用程序的中。剩下的唯一部分就是把注册到中。 showImg(https://segmentfault.com/img/bVbpGXm?w=800&h=450); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！代码分离与...

jayzou 2019-08-23 16:16 评论0 收藏0
浅入深出setState（上篇）

摘要：点燃引擎这是一个组件实现组件可交互所需的流程，输出虚拟，虚拟转为，再在上注册事件，事件触发修改数据，在每次调用方法时，会自动执行方法来更新虚拟，如果组件已经被渲染，那么还会更新到中去。 Part one - setState点燃引擎 showImg(https://segmentfault.com/img/bVbdGkJ?w=849&h=270); 这是一个React组件实现组件可交互...

wow_worktile 2019-08-22 18:40 评论0 收藏0
21个让React 开发更高效更有趣的工具

摘要：是一个面向开发人员和设计人员的原型工具。这是开发中最常见的扩展插件，并且是开发人员可以用来调试其应用程序的最有用的工具之一。这可能是开发工具包中最重要的工具。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或...

Soarkey 2019-08-26 10:43 评论0 收藏0
知乎视频播放器开源了~

摘要：知乎视频播放器开源介绍是什么是一个基于的视频播放器，目前已在知乎和内使用，并在上开源。对于视频播放器中常见的首帧时长，缓冲次数等指标，可以通过接收事件来进行打点记录。结语所有的工作都会在上进行知乎内部使用的也是同一个仓库。知乎视频播放器 Griffith 开源介绍 Griffith 是什么？ Griffith 是一个基于 React 的视频播放器，目前已在知乎 web 和 mobil...

RebeccaZhong 2019-08-23 16:43 评论0 收藏0