Document

--- theme: cyanosis highlight: atom-one-dark --- 由于本人最近沉迷于阅读 `React` 源码,对外界信息并没有怎么关注,在今天早上玩手机的时候,突然看到群群友发了一条推文,内容信息就是我们这篇文章要讲的内容,内容的标题是 `"字节跳动自研 Web 构建工具 Rspack 正式发布"`,怀着好奇的心的便尝试了一下,发现用着还不错,希望在后面能发展得更好吧! 因为我自己写有一个自己的脚手架,但是使用的构建工具是 `Webpack`,看到了简介中的 `rust`,听说这将是前端的未来,像我这个老传统就只能用旧的技术了,所以我今天打破常规,来试试 `Rspack` 这个构建工具。 # RsPack `Rspack` 是一个基于 `Rust` 的高性能构建引擎,具备与 `Webpack` 生态系统的互操作性,可以被 `Webpack` 项目低成本集成,并提供更好的构建性能。 `Rspack` 使用 `Rust` 语言编写,得益于 `Rust` 的高性能编译器支持,`Rust` 编译生成的 `Native Code`通常比 `JavaScript` 性能更为高效。根据官方文档介绍,它的优点,主要有以下几个方面: - 快熟的 `Dev` 启动性能; - 高效的 `Build` 性能; - 灵活的配置; - 生产环境的优化能力; 根据官网首页提供的6个特点,请看下图: ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b20cc2cfdc24af780d3da55fa1e974d~tplv-k3u1fbpfcp-watermark.image?) # Rspack使用废话不多说,赶紧上车。首先我们创建一个空文件并打开终端或者打开 `vscode` 也行,我用的是 `pnpm`,具体你们喜欢啥用啥,首先创建 `package,json`,并在本地安装 `@rspack/cli`,具体操作如下: ```sh pnpm init pnpm add @rspack/cli -D ``` `Rspack` 默认通过 `rspack.config.js` 来配置打包行为，我们可以在项目根目录下创建一个 `rspack.config.js` 文件,到这里,我们项目的初始化也算完成了,接下来开始配置。 ## 配置入口要想项目能启动起来,首先我们要有一个项目入口文件,配置如下: ```js // rspack.config.js const path = require("path"); module.exports = { entry: { main: "./src/index.jsx", }, output: { filename: "main.js", path: path.resolve(__dirname, "dist"), }, }; ``` 配置完成后并在根目录下创建一个入口文件 `src/index.jsx`,并在该文件下编写以下代码: ```js import * as ReactDOM from "react-dom/client"; const App = () => { return

hello Rspack

; }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` 要想正常使用 `React`,我们需要安装 `react` 作为依赖: ```sh pnpm add react react-dom --save ``` ## 添加 html 支持 `Rspack` 内置了对 `html` 的支持,无需自己手动的在 `html` 里配置产物 `js` 的地址,通过如下方式使用 `html` 功能: ```js // rspack.config.js module.exports = { // ... builtins: { html: [ { template: "./public/index.html", title: "moment",// d懂的都懂 inject: "head",// js文件引入存放的位置 }, ], }, }; ``` `Rspack` 配置好了,我们要在根目录上创建一个 `html` 文件 `public/index.html`,并编写以下代码: ```js Document

``` ## devServer 因为 `Rspack` 中的 `devServer` 配置可以和 `webpack` 中的无缝衔接,这里我就直接拷贝我之前写好的了嘻嘻嘻嘻,配置代码如下: ```js // rspack.config.js module.exports = { // ... devServer: { hot: true, compress: true, // 是否启用 gzip 压缩 historyApiFallback: true, // 解决前端路由刷新404现象 client: { logging: "info", overlay: false, }, open: true, }, }; ``` ## 配置 package.json 文件到现在为止,整个 `React` 项目的基本已经配置完成了,已经可以运行,这个时候我们只需配置一下项目的启动方式即可,在 `package.json` 文件中添加如下配置: ```json "scripts": { "build": "npx rspack build", "start": "npx rspack serve" }, ``` 怕有些基础不太好的同学跟丢了,我在这里添加 `rspack.config.js` 配置的完整代码,具体如下: ```js const path = require("path"); module.exports = { entry: { main: "./src/index.jsx", }, output: { filename: "main.js", path: path.resolve(__dirname, "dist"), }, devServer: { hot: true, compress: true, // 是否启用 gzip 压缩 historyApiFallback: true, // 解决前端路由刷新404现象 client: { logging: "info", overlay: false, }, open: true, }, builtins: { html: [ { template: "./public/index.html", title: "moment", // d懂的都懂 inject: "head", // js文件存放的位置 }, ], }, }; ``` 当我们在终端里输入 `pnpm start` 时,项目就为我们自动运行起来了,并为我们自动打开了浏览器 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/121341ebc0334af8b3b5ece36848d4f4~tplv-k3u1fbpfcp-watermark.image?) 不得不说,这 `ui` 配色还挺好看的,浏览器这时候也正常显示了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b229473acc948b3a5575e35330900e3~tplv-k3u1fbpfcp-watermark.image?) 有用过 `webpack` 的同学可能就好奇了,就这么简单就把项目启动起来了? 没错,`Rspack` 给我们内置了很多配置项,例如它默认给我们开启了模块热替换功能,并且默认支持 `jsx`,省去了我们配置 `babel` 的时间了。 ## 路径别名配置路径别名和 `webpack` 的配置一模一样,具体配置请看代码: ```js // rspack.config.js module.exports = { // ... resolve: { alias: { "@": path.resolve(__dirname, "./src/pages"), }, }, }; ``` 在 `src\pages\home\index.jsx` 创建一个页面,具体代码如下配置: ```js import React from "react"; const Home = () => { return

Home

; }; export default Home; ``` 并在项目的入口文件中通过路径别名引入 `import Home from "@/home";`,效果正常显示在页面上了: ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c5ace95191143a3a30dece992d50e38~tplv-k3u1fbpfcp-watermark.image?) ## 区分生产环境和开发环境你可以通过 `process.env.NODE_ENV` 来获取环境变量,当你执行 `pnpm start` 返回的值是 `"development"`,而通过 `pnpm build` 执行的返回的结果是 `"production"`,在这里我们可以这样这样区分环境变量: ```js // rspack.config.js const path = require("path"); const isProduction = process.env.NODE_ENV === "production"; module.exports = { mode: process.env.NODE_ENV, }; ``` ## devtool 该配置同于控制 `Source Map` 的生成行为,来方便我们对项目进行调试,具体配置如下: ```js // rspack.config.js module.exports = { // ... devtool: !isProduction ? "source-map" : false, }; ``` 以上配置就是当在生成环境下 `devtool` 设置成 `"source-map"`,否则为 `false`,当项目出错了,可以立刻定位到具体位置: ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21a84b3bf1524ec9885238e0a5a53325~tplv-k3u1fbpfcp-watermark.image?) ## 支持sass的支持由于 `Rspack` 已经完成了对 `sass-loader` 的兼容,你可以直接这样配置: ```js // rspack.config.js module.exports = { // ... module: { rules: [ { test: /\.scss$/, use: [ { loader: "sass-loader", options: { // ... }, }, ], type: "css", }, ], }, }; ``` 紧接着编写 `style.scss` 文件,直接着在项目里面引入,代码如下: ```js import React from "react"; import style from "./style.scss"; const Home = () => { return

Home

; }; export default Home; ``` 你会看到浏览器显示正常 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe4596c8e6c24e0597a632704ff3cdc8~tplv-k3u1fbpfcp-watermark.image?) 好了,最近比较忙,没什么空看额外的文档,本篇文章的讲解就到这里吧。 # 参考 - [Rspack官网](https://www.rspack.dev/zh/guide/introduction.html) # 一些想法文章写到这里的时候,本平台上讲 `Rspack` 的相关文章已经有两篇了,而讲解 `Rspack` + `React` 文章的为第一篇,这速度够快吧。正好我自己的脚手架的功能还比较单薄,过段时间忙完春招会添加对 `Rspack` 的支持,本人对 `Rspack` 接触的那么点时间也是感觉到挺不错的感觉。最后再给我的脚手架打一下广告,目前只有我一个人开发能力优先,寻求伙伴中 [我开源了一个好玩且好用的前端脚手架](https://juejin.cn/post/7202891949380173880) ***本文正在参加[「金石计划」](https://juejin.cn/post/7207698564641996856/ "https://juejin.cn/post/7207698564641996856/")***