功能导航

在这里,你可以了解到 Modern.js Builder 支持的主要功能。

JavaScript 编译

功能描述相关链接
Babel 编译默认开启 Babel 编译,将 JavaScript 和 TypeScript 代码转换为向后兼容的 JavaScript 语法
TS 编译默认通过 Babel 编译 TS 文件,支持切换为 ts-loader 编译
TS 类型检查默认通过 TS Checker 检查类型问题
JS 压缩默认在生产环境构建时开启压缩
Polyfill 注入默认会注入 core-js 等 Polyfill
SourceMap 生成默认在生产环境构建时生成高质量 SourceMap
文件别名可选功能,通过 alias 设置文件别名
限制源代码路径可选功能,限制源代码的引用路径
esbuild 编译可选功能,通过 esbuild 对 JavaScript 和 TypeScript 代码进行转译和压缩
SWC 编译可选功能,通过 SWC 对 JavaScript 和 TypeScript 代码进行转译和压缩
Node 产物可选功能,支持构建出运行在 Node.js 环境的 JavaScript 产物
Web Worker 产物可选功能,支持构建出运行在 Web Worker 环境的 JavaScript 产物
浏览器范围可选功能,通过 browserslist 来设置 Web 应用需要兼容的浏览器范围

CSS 编译

功能描述相关链接
PostCSS 编译默认开启 PostCSS 编译,内置 autoprefixer 等多个插件
Sass 预处理默认支持编译 Sass/Scss 文件
Less 预处理默认支持编译 Less 文件
Stylus 预处理可选功能,编译 Stylus 文件
CSS Modules 编译默认支持编译 CSS Modules 文件
CSS Modules 类型提示可选功能,自动生成 CSS Modules 的类型定义文件
CSS 压缩默认在生产环境构建时开启压缩
抽取 CSS 文件默认会将 CSS 抽取为独立的文件
Styled Components默认支持 styled-components 编译
内联 CSS 到 JS 中可选功能,将 CSS 文件内联到 JS 文件中

HTML 编译

功能描述相关链接
设置标题设置 HTML 的 title 标签
设置 meta设置 HTML 的 meta 标签
设置 favicon设置页面的 favicon 图标
设置 app 图标设置 iOS 系统下的 apple icon
使用 EJS 模板引擎可选功能,使用 EJS 模板语法
使用 Pug 模板引擎可选功能,使用 Pug 模板语法
内联 JS 文件可选功能,将 JS 内联到 HTML 中
内联 CSS 文件可选功能,将 CSS 内联到 HTML 中

开发调试相关

功能描述相关链接
自动打开页面可选功能,在启动 Dev Server 时自动在浏览器中打开页面 URL
HTTPS Dev Server可选功能,开启 Dev Server 对 HTTPS 的支持

React 相关

功能描述相关链接
React Refresh默认支持 React Refresh 热更新
SVG 转 React 组件默认支持在 React 组件中引用 SVG 作为组件

静态资源相关

功能描述相关链接
引用图片资源支持在代码中引用图片资源
引用字体资源支持在代码中引用字体资源
引用视频资源支持在代码中引用视频资源
引用 Wasm 资源支持在代码中引用 WebAssembly 资源
静态资源内联默认将体积较小的图片等资源内联到 JS 中
清理静态资源每次开始构建前,自动清理 dist 目录下的静态资源
拷贝静态资源可选功能,将静态资源拷贝到 dist 目录下
生成 manifest 文件可选功能,生成包含静态资源信息的 manifest 文件

性能相关

功能描述相关链接
产物自动拆包Builder 中内置了多种拆包策略,自动将代码包拆分为体积适中的文件
展示产物体积在生产环境构建后,默认展示所有静态资源的体积信息
分析产物体积可选功能,通过 Bundle Analyzer 分析产物体积
移除 console可选功能,移除代码中的 console.xx
优化 moment.js 体积可选功能,移除 moment.js 多余的 locale 文件
,