加强门户网站建设提升,租服务器去哪里租,做盗版网站的,上海做外贸网站的公司前言
rspack 即将开源#xff0c;但社区中不乏有已经落地的 case #xff0c;比如 rspack-migration-showcase 、 modern.js 等。
基于此#xff0c;本文将介绍如何迁移一个近似于 CRA#xff08; create-react-app #xff09; 的项目到 rspack 。
在阅读本文前#…前言
rspack 即将开源但社区中不乏有已经落地的 case 比如 rspack-migration-showcase 、 modern.js 等。
基于此本文将介绍如何迁移一个近似于 CRA create-react-app 的项目到 rspack 。
在阅读本文前我们认为读者已经熟练掌握了 webpack 配置本文将略过所有前置知识。
注由于 rspack 处于 0.0.x 版本可能会发生较大变化故本文可能存在过时的部分请仔细甄别。
正文
启动层
启动层分 实例实现 和 DevServer 实现他们的区别是
webpack
// webpack 实例
import webpack from webpack
webpack()// webpack dev server
import WebpackDevServer from webpack-dev-server
WebpackDevServer()rspack
// rspack 实例
import * as rspack from rspack/core
rspack.rspack()// rspack dev server
import * as rspackDevServer from rspack/dev-server
rspackDevServer.RspackDevServer()// 不支持合成导入
// import rspack from rspack
// import rspackDevServer from rspack/dev-server无论是 webpack 还是 rspack 在启动层几乎一致通过 实例实现 传入配置得到 compiler 即可引导启动 DevServer 或进行构建细节略
// 获取 compiler
const instanceImpl rspack.rspack // or webpack
const compilerImpl instanceImpl(webpackConfig)// 获取 dev server
const devServerImpl rspackDevServer.RspackDevServer // or WebpackDevServer
const devServer devServerImpl(devServerConfig, compilerImpl)可以看到两者无明显区别需要注意的是使用 compiler 的后续 api 可能存在 rspack 未支持的情况。
配置层
配置类型
两者配置类型获取方式
import type { Configuration as WebpackConfig } from webpack
import type { Configuration as RspConfig } from rspack/core基本一致的配置项
这里指的是直接把 webpack 的配置原模原样拷贝给 rspack 也可以兼容的选项经作者尝试常用选项如下
modeentrycontextoutputdevtooldevServertargetstatsinfrastructureLogging
有区别的配置项
webpack 的复杂配置需要进行一些调整才能给予 rspack 使用。
resolve
rspack 的 resolve 配置项要在 webpack 的基础上加一个 tsConfigPath 表示当前项目 tsconfig.json 的路径 rspackConfig.resolve {...webpackConfig.resolve,tsConfigPath: ...}module - JavaScript 资源
rspack 的每个 rule 配置必须指明他的 type 如 module: {rules: [{test: /\.tsx$/,// type: tsx}]}这和 webpack 中的 asset type 等相似但 rspack 不光有自己独有的 type 类型比如 tsx 、ts 等也支持 asset type 见下文。
目前常用的 type 有
ts / tsxjs / jsxcss / css/module
请各取所需。
module - CSS 资源
由于 webpack 的 css 配置过于繁琐此处仅介绍重点 无需配置 style-loader 、css-loader 在 rspack 我们用不到。 postcss-loader 需要替换成 rspack/postcss-loader 选项的区别是插件必须传递实例如 // 获取 postcss optionsconst postcssOptions {plugins: [require(require.resolve(postcss-flexbugs-fixes))// ...]}在 webpack 的 postcss-loader 选项中插件是可以传递路径的如仅传递 require.resolve(postcss-flexbugs-fixes) 但传递实例也可以但 rspack 只能传递实例。 别忘了设定 css / css/module 的 type 给对应规则。 sass-loader / less-loader 使用、配置方式不变。
module - Asset 静态资源
和 webpack 配置方式一致可正常使用 asset type 注明静态资源 {test: /\.(png|jpe?g|gif|webp)(\?.*)?$/i,type: asset/resource}注意 svgr 需要额外设定 type: tsx 表示以 JavaScript 方式承接否则将得到错误的静态资源另外由于 svgr 在内部使用 babel 转译组件将花费较长时间可 fork 后修改为 esbuild 转译加速或一律将 .svg 作为静态资源输出。
plugins - 非内置能力
目前 rspack 对 webpack 插件 hooks api 支持较少大部分插件无法使用可用经典插件如下
clean-webpack-pluginwebpack-bundle-analyzer
对于 html-webpack-plugin 的平替有两个方式可选 使用 rspack/plugin-html 替代目的是用来支持其他需要调用 HtmlWebpackPlugin 的后续插件如有些插件需要在 html 模板中进一步加工若你有二次使用 HtmlWebpackPlugin 的插件请采用此方案。 使用内置能力 builtins.html 详见下文。
在迁移过程中作者发现的不可用插件如下
fork-ts-checker-webpack-plugin
明确了哪些经典插件可以直接使用哪些不可以后我们距离完整补全 webpack 插件相同的能力还差一些这些能力已在 rspack 中内置 builtins 通过 builtins.xxx 方式配置。
plugins - 内置能力
builtins.define
// rspack configbuiltins: {define: {process.env.SOME: JSON.stringify(value),// ...}}该能力可以平替 DefinePlugin 插件传值方式一致。
builtins.copy
该能力可以平替 copy-webpack-plugin 大部分选项与 webpack 一致但不完整不支持 globOptions 这意味着无法忽略某些文件不被拷贝从而我们无法做到将 index.html 模板文件放到静态资源目录。
比如我们预期拷贝 public/* 到产物目录但 index.html 我们无法放到 public/index.html 里因为不支持配置忽略就会造成多份相同资源 emit 冲突解决方法是 html 模板只能放到项目根目录。
builtins.react
swc 的 react 开发时配置如下配置即可 builtins: {react: {development: isDev,refresh: isDev,runtime: automatic}}builtins.bar
相当于 webpackbar 的替代但打印容易错位同时 rspack 非常快没有必要展示进度条不建议配置该选项。
builtins.html
内置的 html 能力缺点是没有提供 HtmlWebpackPlugin 插件实例无法和其他插件联动同时配置项不够完整。
值得庆幸的是 lodash template 语法无论是 builtins.html 还是 rspack/plugin-html 均支持如 % htmlWebpackPlugin.options.title % 。
若你需支持类似 CRA 的 %PUBLIC_URL% 变量替换请使用 react-dev-utils/InterpolateHtmlPlugin 搭配 rspack/plugin-html 使用方式见 CRA eject 结果。
plugins - 其他
到这里如果严格和 webpack 插件相比我们还缺少一些比如 MiniCssExtractPlugin 、ReactRefreshWebpackPlugin 、ProvidePlugin 这些由 rspack 内置支持我们无需配置。
当你需要更多功能时请优先寻找平替他可能是一个 builtins.xxx 内置能力或是某个选项或是某个 rspack/plugin-xxx 包。
optimization
对于 optimization.minimize 两者一致。
对于 optimization.minimizer 我们无需外部提供压缩能力已经内置。
对于 optimization.splitChunks 目前支持的分包选项不够全面不支持调用函数如 name() 、test() 等此处推荐手动使用 webpack 拆包语法分包 () import() 可以尝试配置非函数选项但是否生效未知。
cache
虽然 rspack 有 cache 选项但截止本文发稿时只能配置 true / false 并未发现有缓存出现。
由于截止本文发稿时rspack 暂未开源文档未释出请后续自行探索。
其他
经作者探索将某个 JavaScript 对象传递至 webpack 构建流程中是可以通过引用的方式双向同步数据的但在 rspack 不可以推测这与 Rust 不支持有关。
总结
本文介绍了 webpack 迁移至 rspack 的基本流程和相关探索至此已经完成了 CRA 所有基本能力的平替代码详见 xn-sakina / xn 。
在作者尝试开发过程中热更新仍存在丢失样式等问题经刷新页面后恢复请酌情采用如开发时 rspack 构建时 webpack。
关于更多 rspack 能力请自行探索开源后的文档的选项。
以上。
