在之前,给大家介绍过webcontainer
这个技术,就是可以让Node.js运行在浏览器中的技术
什么是webcontainer
技术:
一切源于我收到了这封邮件,之前在文章里面写过,这个技术可能会颠覆目前的前端开发模式,那到底会怎么颠覆呢?
我只想做一个前端,面向浏览器编程,可是你让我装这么多东西,为了碎银几两,我忍!?
当node.js可以运行在浏览器中的时候,我们就不需要安装vscode,node.js和各种插件在电脑上了,只需要打开浏览器,输入(例如react
环境):
https://stackblitz.com/fork/react
感受一下,打开浏览器就可以编程,毫秒级别启动、热更新的感受
有人会说,你这不就是个webIDE吗? 但是webIDE缺失了nodejs的能力,webcontainer
是具有node.js能力的。
例如,我在浏览器里面写nodejs,可以执行我的命令,安装对应的依赖等
以上两点,就解决了我们的node_modules黑洞,和安装各种软件到电脑上的痛点,我只需要安装一个浏览器,我就可以写React,写nodejs,写next,想怎么写就怎么写
进入next项目,从安装依赖到启动,只要几秒钟时间,要知道如果是在日常的开发中,这个时间可能会需要几分钟
试着安装lodash
yarn add lodash -D
大约7秒钟时间,所有的操作都在浏览器环境中完成,注意是浏览器环境中
URL上按钮,一键本地化,只要两秒钟,代码就到本地了
热更新从代码编写,到编译打包,完全在浏览器中闭环,只要打开一个浏览器就完成所有的动作
是不是很香? 是不是很舒适? 打开一个浏览器就搞定了所有的事情。
1.在浏览器沙箱环境中运行,在浏览器环境下,会产生跨域的情况,那么意味着 数据库、mysql、redis连接都会受限(谷歌浏览器可能未来会支持 native socket,做过私有化通信协议开发的同学应该就知道这个是什么,这是issue地址,目前是open状态)
https://bugs.chromium.org/p/chromium/issues/detail?id=909927&can=2&q=proj-fugu&sort=pri&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&x=m&y=releaseblock&cells=ids
2.底层使用的是特定的Turbo包管理器,而不是npm或者yarn,针对浏览器做了特定优化(这个貌似只要做好兼容就行)
3.目前还是beta状态,尚未发布正式版本
4.兼容性问题,一些浏览器对Web/ServiceWorker 和 SharedArrayBuffer不兼容
5.打包目前不是esm
在我看来,webcontainer这个技术更像是一个wasm的一个框架、库,例如:让nodejs能跑在浏览器中,那么这个nodejs肯定是wasm的二进制文件,引入了webcontainer之后,nodejs就可以跑在浏览器中了
像一些安装依赖的缓存优化,用到了ServiceWorker的tcp网络请求能力,还有拦截请求,优化等。这样也可以在后期电脑离线的时候使用
包的安装,像npm yarn 都是安装到本地磁盘上,但是在浏览器环境中,不是安装在本地磁盘上,根据官方的说法,每次进入一个环境,都是重新干净的,需要重新install一次,这里我还没确定,因为官方说打包不是esm,那么意味着可能自己对依赖做了处理然后再打包构建,可能安装的时候也是把内容放在内存中,并没有落入磁盘,或者是存在了ServiceWorker的缓存中(这里我发现一些文件会被缓存在或者是存在了ServiceWorker的缓存中)
目前这个技术还不算成熟,但是强烈建议去尝试使用,stackblitz这种理念很棒,一个浏览器搞定所有的事情,但是目前存在的问题最大的是:native socket能力并没有放开,但是做过IM或者Electron的人都知道,浏览器如果放开native socket,又有webcontainer这种技术,以后我们真的只要安装一个浏览器就完事了
一切可以用javascript来实现的,最终都将用javascript来实现 - 鲁迅
如果你觉得这篇内容对你挺有启发,我想邀请你帮我几件小事
1.点个「在看、赞、关注」,让更多人也能看到这篇内容(点了「在看」,bug -1???)
我是Peter谭,一位小厂前端开发工程师,喜欢搞架构,对性能优化,跨平台开发有一定研究,还喜欢做自媒体,区块链。欢迎关注我
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对C...
打开软件,我们按快捷键ctrl+n,建立一个新的文件。 点击常用,选择布局。 点击...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面...
一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联...
作者 / Krish Vitaldevara,Google Play 信任与安全产品管理总监 多年来,向数十...