Bolt.new:终极自动化编程工具

兄弟们,终极写代码工具来了—— Bolt.new!全方位的编程支持:

StackBlitz 推出了 Bolt․new,这是一款结合了 AI 与 WebContainers 技术的强大开发平台,允许用户快速搭建并开发各种类型的全栈应用。

它的主要特点是无需复杂的开发环境配置,你可以直接通过网页端在线完成从编写代码到部署应用的所有步骤,极大地方便了开发过程。

Bolt․new旨在为开发者提供一个轻量级、基于浏览器的全栈开发环境。你可以通过简单的提示创建、编辑、运行和部署复杂的全栈应用,而且全部在浏览器中完成整个开发流程,不需要安装额外的软件。

这意味着,你只要有一个浏览器,就能创建、编辑、运行、调试并发布完整的应用程序。

Prompt, Run, Edit, Deploy(提示、运行、编辑和部署)

  • 用户可以直接在平台上通过简单的提示命令(Prompt)快速生成代码,AI 会根据提示生成符合要求的代码片段或项目结构。
  • 完成代码后,用户可以立即在浏览器中运行代码,看到实际效果。
  • 提供了代码的编辑功能,用户可以对生成的代码进行修改和优化。
  • 部署功能则允许用户一键将应用发布到线上,无需单独配置服务器或云服务。

以下是 bolt․new 的主要特性和功能:

  1. AI 驱动的开发流程
    bolt․new 集成了前沿的 AI 模型(如 Anthropic 的 Claude 和 v0),让用户可以通过自然语言提示,自动生成项目的代码结构。开发者只需简单地告诉 AI 想要实现的功能,bolt․new 就能生成相应的代码,甚至可以处理复杂的多页应用、后端服务和数据库集成。bolt․new 可以创建带有工作代码的精美设计,通常只需一个提示。

    简单示例:“使用 React 制作一个待办事项应用”

    结果:一个流畅、功能齐全的待办事项应用

完整的开发环境(无需虚拟机)
bolt․new 依托于 WebContainers 技术,这是一种能够在浏览器中运行完整开发环境的微型操作系统。它支持现代开发工具链,如 npmVite 和 Next.js,让用户无需额外的开发环境配置,即可直接在浏览器中编写、运行、调试和部署应用。
WebContainers 允许你创建全栈的 Node.js 环境,这些环境在毫秒内启动并立即在线可分享——只需点击一次。这个环境提供了 VS Code 的强大编辑体验、完整的终端、npm 等等。最重要的是,它完全在你的浏览器中运行,这带来了几个关键好处:

  • 比本地环境更快。构建速度提高多达 20%,包安装速度比 yarn/npm 快 5 倍以上。
  • 浏览器内的 Node.js 调试。与 Chrome DevTools 无缝集成,无需安装任何插件,即可实现原生的后端调试。
  • 默认安全。所有代码执行都在浏览器的安全沙箱内进行,而不是在远程虚拟机或本地二进制文件中。

“没错:这是首次在浏览器内原生运行 Node.js 运行时。”

  1. 这些环境并未在远程服务器上运行。相反,每个环境都完全包含在你的浏览器内。没错:Node.js 运行时首次在浏览器内原生运行。

  2. 自动部署和错误修复
    bolt․new 提供了一键部署的功能,支持将应用部署到 Netlify 和即将支持的 Cloudflare,而且无需登录或配置复杂的凭证信息。它还集成了自动错误检测和修复机制,能够感知代码中的错误,并在用户授权下自动修复,极大地简化了代码调试和配置复杂工具(如 Webpack)的过程。

  1. 当代码不能运行时会怎样?

    我们在 WebContainers 的每一层都集成了 AI,使得 Bolt 能够感知错误并一键解决它们。

    在处理繁琐工具(如复杂的 Webpack 配置)时非常有用

  2. 免费且开放的全栈开发体验
    StackBlitz 提供了免费的开发环境,用户可以通过 bolt․new 体验完整的开发、部署和 AI 集成能力,无需担心支付费用。它还支持与其他开发工具(如 Supabase 数据库)集成,并通过一键配置实现生产环境的无缝部署。
  1. bolt․new 可以创建漂亮的、准备投入生产的多页应用,带有后端和数据库(如 Supabase),并且可以一键部署到生产环境。

    这是因为每个对话都可以运行生产构建并将其部署到 Netlify(Cloudflare 即将上线)—无需登录:

  2. 创新与协作生态系统
    StackBlitz 与多个合作伙伴建立了合作关系,包括 AnthropicNetlify 和 Cloudflare,推动 AI 模型与开发工具的深度整合。bolt․new 还支持和 vite.js 工具链的无缝协作,让前端开发者能够在浏览器内直接运行并测试其开发环境。此外,StackBlitz 将 bolt․new 的代码库开源,开发者可以自由获取并基于此开发自己的全栈应用。
  3. 多功能用途
    bolt․new 的应用场景非常广泛,不仅适用于日常的 web 开发项目,还能满足其他创意需求。用户可以通过简单提示快速生成任务管理应用、个人博客网站、演示文稿、甚至是动画视频。支持的工具包括 Slidev(演示文稿制作)、Remotion(React 动画视频制作)等,赋予开发者更大的创作自由和便利。
  4. 前沿开发技术支持
    bolt․new 在浏览器中运行时不依赖传统虚拟机,整个开发体验都基于 WebContainers 技术。这种技术为开发者提供了强大的性能和灵活性,可以实时运行生产环境的代码,生成并部署到云端。而且,bolt․new 通过其 AI 系统可以智能化处理开发过程中的各种任务,包括配置复杂工具、解决调试问题等。
  5. 模板项目(Pre-built Templates):Bolt.new 提供多种预设模板,用户可以选择这些模板快速开始一个新的项目。常见的模板包括:
      • 博客网站:使用 Astro 框架快速创建博客网站。
      • 移动应用:通过 NativeScript 框架构建移动应用。
      • 文档网站:使用 Vitepress 快速搭建文档或知识库站点。
      • UI 界面:使用 shadcn 框架搭建用户界面组件。
      • 演示文稿:使用 Slidev 创建交互式演示文稿。
      • 视频编辑:使用 Remotion 进行视频内容编码。
      • 空白应用:如果用户有特定需求,还可以选择从空白应用模板开始,使用自己喜爱的开发栈。

WebContainers 是什么?

那么,bolt․new 如何在浏览器标签中运行,而无需虚拟机呢?

秘密就在于 WebContainers,它是我们的微型操作系统,可以在你的浏览器标签中运行完整的 web 开发环境。

WebContainers 是一种运行在浏览器中的全栈 Node.js 环境,使用 WebAssembly 技术,不依赖远程服务器。它允许开发者在浏览器中创建和运行 Node.js 应用,并且能够在毫秒内启动这些环境,还可以通过链接分享应用。

主要特点
  • 浏览器内本地运行 Node.js:这是首次实现 Node.js 在浏览器内本地运行,所有代码执行都在浏览器的安全沙箱中进行,不需要远程虚拟机或本地二进制文件。
  • 比本地环境更快:构建速度比本地环境快 20%,包安装速度比 Yarn 或 npm 快 5 倍以上。
  • 安全性:代码执行完全在浏览器中进行,避免了远程服务器的安全风险,确保了更高的安全性。
  • 实时共享和协作:开发者可以通过浏览器运行应用并即时分享链接,无需设置复杂的本地环境。
  • Chrome DevTools 集成:与 Chrome 开发工具无缝集成,实现浏览器内的后端调试,无需额外的安装或扩展。
应用场景与优势
  • 快速原型开发:WebContainers 支持开发者快速创建原型,测试新库或生成 bug 复现案例,减少设置本地环境的繁琐步骤。
  • 代码安全执行:在浏览器沙箱中执行用户提交的代码,有助于防止供应链攻击,提升安全性。
  • 离线工作:WebContainers 支持离线工作,开发者即使在没有网络连接的情况下也可以继续工作。
与传统在线 IDE 的区别

传统的在线 IDE 依赖远程服务器来运行开发环境,而 WebContainers 将所有开发工作直接在浏览器中完成,因此:

  • 启动速度更快:不需要远程容器,浏览器本地运行的环境在毫秒内启动。
  • 无网络延迟:避免了网络延迟或超时问题,即使离线也可以继续工作。
  • 更高的安全性:完全基于浏览器沙箱,无需担心本地文件系统的安全风险。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/440722.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端reactvue3——实现滚动到底加载数据

文章目录 ⭐前言⭐react 实现滚动加载⭐vue3 实现滚动加载⭐总结⭐结束 ⭐前言 大家好,我是yma16,本文分享 前端react&vue3——实现滚动加载(到底部加载) scrollTop 属性 一个双精度浮点值,表示元素当前从原点垂直…

安全运营中心 (SOC) 团队对其安全工具感到失望

Vectra AI 表示,安全运营中心 (SOC) 从业人员认为,由于太多孤立的工具和缺乏准确的攻击信号,他们在检测和确定真实威胁的优先级方面正在失败。 人们对供应商的不信任感日益加深,认为供应商的工具在发现真正的攻击方面起的阻碍作用…

ctfshow-web入门(信息收集,持续更新中。。)

写在之前:近期打了个比赛,备受打击,入手了vip账号进修,加油! 文章目录 ctfshow-web1查看源代码ctfshow-web2burp抓包ctfshow-web3burp抓包ctfshow-web4访问robots.txtctfshow-web5dirscarch扫描PHPS文件泄露ctfshow-web6dirscarch扫描ctfshow-web7dirscarch扫描ctfshow-w…

【STM32开发之寄存器版】(六)-通用定时器中断

一、前言 STM32定时器分类 STM32103ZET6具备8个定时器TIMx(x 1,2,...,8)。其中,TIM1和TIM8为高级定时器,TIM2-TIM6为通用定时器,TIM6和TIM7为基本定时器,本文将以TIM3通用定时器为例,分析STM32定时器工作的底层寄存器…

You must konw JS!!(超详细的javascript套餐,适合计算机专业有基础的,包含常见前端开发面试题)

1.起源 JavaScript 起源于 1995 年,当时它主要是为了满足网页交互的需求而被创建。它最初的设计目的是为了让网页开发者能够在网页中添加一些简单的交互效果和动态内容。在那个时期,网页大多是静态的,而 JavaScript 的出现为网页带来了新的活…

jmeter学习(7)beanshell

beanshell preprocessor 发送请求前执行 beanshell postprocessor 发送请求前执行 获取请求相关信息 String body sampler.getArguments().getArgument(0).getValue(); String url sampler.getPath(); 获取响应报文 String responseprev.getResponseDataAsString(); 获…

CMake 教程跟做与翻译

目录 STEP 1: 入门与理解 cmake_minimum_required设置CMake版本的最小值 project声明工程属性 add_executable添加可执行文件 使用CMake构建工程 根据自己的构建工具自行构建 Reference STEP 1: 入门与理解 我们起手的,最基本的 CMake 项目是从单个源代码文件…

【Blender Python】1.概述和基础使用

概述 众所周知,Blender是一款开源免费的3D建模软件(当然不限于3D建模)。在Blender中,可以使用其内置的Python解释器执行Python代码,用于程序化的生成网格以及其他内容。你可以基于此创建Blender插件。 这个系列就是快…

Electron桌面应用打包现有的vue项目

1 环境准备 Node:v16.20.2(本地vue项目nodejs版本)Electron:22.3.7vue:2 版本管理 2 Vue项目准备 更新相关依赖npm install --registry https://registry.npmmirror.com/npm run dev 3、引入Electorn 安装指定版…

算法剖析:双指针

文章目录 双指针算法一、 移动零1. 题目2. 算法思想3. 代码实现 二、 复写零1. 题目2. 算法思想3. 代码实现 三、 快乐数1. 题目2. 算法思想3. 代码实现 四、 盛水最多的容器1. 题目2. 算法思想3. 代码实现 五、有效三角形的个数1. 题目2. 算法思想3. 代码实现 六、 和为 s 的两…

UART驱动学习三(TTY驱动部分源码解析)

目录 全局框架图一、tty_io.c 分析1. 关键数据结构和定义2. 文件操作结构体3. 初始化和注册4. 读写操作5. 挂起和恢复6. 信号处理7. 设备类8. 控制台通知9. 辅助函数10. 代码功能11. 带有注释的部分tty_io.c源码 二、tty_ldisc.c 分析1. 关键数据结构和定义2. 行规程操作函数3.…

Android车载——VehicleHal运行流程(Android 11)

1 概述 本篇主要讲解VehicleHal的主要运行流程,包括设置属性、获取属性、订阅属性、取消订阅、持续上报属性订阅等。 2 获取属性流程 2.1 获取属性流程源码分析 作为服务注册到hwServiceManager中的类是VehicleHalManager,所以,CarServic…

判断是否为二叉排序树(二叉搜索树,二叉查找树)

1.判断给定的二叉树是否为二叉排序树&#xff0c;如果是返回1&#xff0c;不是返回0。 思想&#xff1a; 二叉树是左子树<根<右子树。中序遍历是递增有序&#xff0c;可以通过比较当前结点与前驱关系来进行判断。 代码&#xff1a; //pre为全局变量&#xff0c;保存当…

数学与生活

多学科交叉 信号处理 小波 经济 政策 计算机 统计 信号处理与市场分析 经济与数据分析 政策与统计 过去的数学家没有一个是纯粹的数学家&#xff1b;生活中各方面工程的&#xff0c;物理的&#xff0c;天文&#xff0c;地理的&#xff0c;赌博&#xff0c;政治的&#xff1b…

5-25 JQuery

jQuery简介 jQuery是什么 jQuery基本语法 测试jQuery <head> <meta charset"utf-8"> <title>无标题文档</title><script type"text/javascript" src"jquery-3.5.1.js"></script><script type"tex…

FastAdmin Apache下设置伪静态

FastAdmin Apache下设置伪静态 一、引言 FastAdmin 是一个基于ThinkPHP和Bootstrap框架开发的快速后台开发框架&#xff0c;它以其简洁、高效、易于扩展的特点&#xff0c;广受开发者的喜爱。在部署FastAdmin项目时&#xff0c;为了提高访问速度和用户体验&#xff0c;我们通…

Redis介绍及整合Spring

目录 Redis介绍 Spring与Redis集成 Redis介绍 Redis是内存数据库&#xff0c;Key-value型NOSQL数据库&#xff0c;项目上经常将一些不经常变化并且反复查询的数据放入Redis缓存&#xff0c;由于数据放在内存中&#xff0c;所以查询、维护的速度远远快于硬盘方式操作数据&#…

【NIO基础】基于 NIO 中的组件实现对文件的操作(文件编程),FileChannel 详解

目录 1、FileChannel (1&#xff09;获取 FileChannel (2&#xff09;读取文件 (3&#xff09;写入文件 (4&#xff09;关闭通道 (5&#xff09;当前位置与文件大小 (6&#xff09;强制写入磁盘 2、两个 FileChannel 之间的数据传输 (1&#xff09;使用 transferTo()…

leetcode-42. 接雨水 单调栈

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表…

微软发布Windows 11 2024更新,新型Copilot+ AI PC功能亮相

前言 微软在Windows 11的2024更新中加强了对人工智能的应用&#xff0c;推出了新功能Copilot。 此次更新的版本号为26100.1742&#xff0c;Copilot将首先在Windows Insider中推出&#xff0c;计划于11月向特定设备和市场推广&#xff0c;用户需开启“尽快获取最新更新”选项以…