Skip to main content

升级至V5

本文摘录了reSKRipt V4 -> V5版本的所有破坏性变更,如果你正在使用4.x版本,可以参考本文进行升级。如果你在升级过程中遇到任何困难,欢迎在GitHub上提交Issue来咨询。

V5的主要变化是提供了Vite和Webpack的双引擎选项,对于原本使用Webpack引擎进行构建的你,只有少量的配置、常量变化需要关注。

自动检测

你可以先使用我们的迁移脚本对项目做一次快速地扫描:

# 保持在项目根目录下
npx @reskript/doctor migrate

按照报告的说明进行修复后,如果依然有问题,以下是各变更的详细介绍。

依赖升级

你需要将@reskript/*的包均升级到5.x最新版。你的package.json的变化大致如下:

{
"devDependencies": {
- "@reskript/cli": "4.3.0",
- "@reskript/cli-build": "4.3.0",
- "@reskript/cli-dev": "4.3.0",
- "@reskript/cli-lint": "4.3.0",
- "@reskript/cli-play": "4.3.0",
- "@reskript/cli-test": "4.3.0",
- "@reskript/config-lint": "4.3.0",
+ "@reskript/cli": "5.0.0",
+ "@reskript/cli-build": "5.0.0",
+ "@reskript/cli-dev": "5.0.0",
+ "@reskript/cli-lint": "5.0.0",
+ "@reskript/cli-play": "5.0.0",
+ "@reskript/cli-test": "5.0.0",
+ "@reskript/config-lint": "5.0.0",
+ "@reskript/settings": "5.0.0",
}
}

配置变更

如果你使用build.finalize配置,并且使用了第三个参数internals中的内容,需要注意:

  • 原有的lessSafe这个loader已经没有了,你也不再需要它,我们内置了更安全、全面的实现。
  • styleResources这个loader也已经移除,同样由更为高性能的实现替代。

常量变更

原有reSKRipt提供了以下2个特殊的常量:

  • $features对应配置中的featureMatrix的配置。
  • $build提供一部分构建相关的信息。

以上2个常量在V5版本中进行了重新命名,新名字为skr.featuresskr.build,你的改动大致如下:

-if ($features.enableBatch) {
+if (skr.features.enableBatch) {
// 一些逻辑
}

入口配置调整

如果你有使用到entries/*.config.ts的配置,并且在其中有export const html导出,需要注意此处的变化。

在V5版本中,如果你在html导出中的变量是用在入口HTML模板中的,那么需要将它移到export const templateData导出中,你的代码可能如下:

- export const html = {
+ export const templateData = {
copyright: 2020,
}

同时,在*.ejs模板中,也不再能通过<%= htmlWebpackPlugin.options.copyright %>使用它,你必须使用<%= templateData.copyright %>来引用:

<footer>
- Copyright@<%= htmlWebpackPlugin.options.copyright %>
+ Copyright@<%= templateData.copyright %>
</footer>

当然,像titlefaviconappContainerId等这些内置的数据也同样通过templateData获取。

Worker引入调整

在V4版本中,允许你使用*.worker.{ts,js}来把一个代码文件作为Web Worker引入。在V5中,为了实现与Vite的行为一致,以及为了TypeScript类型定义的准确性,这个规则调整为使用*.{ts,js}?worker来引入,你的代码需要在import语句上做一些调整:

- import Worker from './Background.worker';
+ import Worker from './Background?worker';

包调整

以下包已经废弃:

  • @reskript/webpack-plugin-extra-script@reskript/plugin-inject-html替代。
  • @reskript/safe-less-loader已废弃。
  • @reskript/style-resources-loader已废弃。