fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
  • 极简导航
  • 购物优惠券

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看
提交网站

Modern.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://modernjs.dev/
GitHub:https://github.com/web-infra-dev/modern.js
网站描述:一个现代 Web 工程体系

传统的 Web 开发是“服务器端为中心”的开发范式,近年来,已经越来越多的转移到“客户端为中心”的现代 Web 开发范式,开发门槛不断降低,效率不断提升。产品研发可以更少的关注底层技术细节,更专注在用户需求和市场价值上。而传统的前端技术栈难以解决“开发者体验”和“用户体验”的矛盾,越来越成为提效的瓶颈。


字节跳动 Web Infra 一直在字节内部支持“现代 Web 开发”的实践,发展了完整的字节前端研发体系,Modern.js 项目就是来自其中的现代 Web 工程体系。

Modern.js 将以往海量的前端工程模板,收敛成三大工程类型:应用、模块、Monorepo,每种类型都只需要同一套模板、同一套工程方案。其中“应用”工程方案又被称作“MWA”(现代 Web 应用),基于一套客户端为中心、前后端一体化的应用开发框架,实现了强大的“Universal App”模式。即一套应用源代码,能同时在客户端、服务器端、编译时里运行,能以静态 Web(SPA、MPA、SSG)、动态 Web(SSR、SPR)、微前端、桌面应用、小程序等不同模式运行,同时支持低门槛、全功能、一体化的 BFF (针对特定界面的服务器端 api)开发。

“MWA” 是 Serverless 优先的,内置产品级 Web Server。它能在开发、调试、部署、运行等所有环节做到尽可能“无服务器化”,同时确保“开发者体验”和“用户体验”,让更多“前端开发者”成为独立、全面的“应用开发者”和“产品开发者”。Modern.js 也原生支持微前端、Electron 桌面应用、Monorepo 等研发场景。

Modern.js 从最初就设计为 ESM 优先,在“编译时”环节能更好的支持 Unbundled 开发、非 JS 语言的编译器等第三代 JS 工具的发展。在“运行时”环节,Modern.js 提供开箱即用的应用架构,提供在“应用”工程方案、“模块”工程方案里都能无缝使用的 Runtime API 标准库。在“编写时”环节,Modern.js 鼓励尽可能让机器来生成源码的智能编程。


介绍

Modern.js 是一个现代 Web 工程体系,包含以下解决方案:

  • Modern.js Framework: 基于 react 的渐进式 Web 开发框架。
  • Modern.js Module: 简单、高性能的 npm 包开发方案。
  • Modern.js Doc: 现代文档站解决方案。
  • Modern.js Builder: 面向 Web 开发场景的构建引擎。


快速上手

  • 使用 Modern.js Framework 来开发一个 Web 应用。
  • 使用 Modern.js Module 来开发一个 npm 包。
  • 使用 Modern.js Doc 来开发一个文档站点。
  • 使用 Modern.js Builder 来为你的 Web 框架提供构建能力。


生态

Modern.js 生态提供了以下解决方案:

  • Rspack: 基于 Rust 的高性能模块打包工具。
  • Garfish: 一站式微前端解决方案。
  • Reduck: 基于 Redux 的状态管理库。


链接: https://www.fly63.com/nav/3939

more>>
相关栏目
webpack
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起
官网GitHub
npm
javascript 最流行的包管理器
官网GitHub
yarn
可替代NPM的快速、可靠、安全的可信赖包管理工具Yarn
官网GitHub
bower
解决js的依赖管理
官网GitHub
grunt
基于Node.js的项目构建工具。它可以自动运行你所设定的任务
官网GitHub
Parcel
快速,零配置的 Web 应用程序打包器
官网GitHub
babel
Babel 是一个 JavaScript 编译器,可用下一代JavaScript 语法写代码
官网GitHub
browserify
一个浏览器端代码模块化工具,require和module.exports来导入和导出.Browserify的原理:部署时处理代码依赖,将模块打包为一个文件。
官网GitHub
HEAD
一份你可以在 <head> 里设置的列表
官网GitHub
Snibox
一个可自建托管的代码片段管理器
官网GitHub
Flow
Facebook 推出一个静态类型检测工具
官网GitHub
WeFlow
一个高效、强大、跨平台的前端开发工作流工具
官网GitHub
Athena
前端自动化流程构建工具
官网GitHub
Cooking
更易上手的前端构建工具
官网GitHub
vue-cli
一个基于 Vue.js 进行快速开发的完整系统
官网GitHub
Turborepo
一个用于 JavaScript 和 TypeScript monorepos 的高性能构建系统
官网GitHub

手机预览