将项目转换为 Quasar CLI with Webpack

Quasar CLI with Webpack - @quasar/app-webpack

本页将指导您如何将 Quasar CLI with Vite（@quasar/app-vite v2）项目转换为 Quasar CLI with Webpack（@quasar/app-webpack v4）项目。

第 1 步：编辑 package.json

dependencies: {
"core-js": "^3.6.5", // [!code ++]
},

devDependencies: {
"@quasar/app-vite": "^2.0.0" // [!code --]
"@quasar/app-webpack": "^4.0.0" // [!code ++]

"eslint-webpack-plugin": "^4.0.1", // [!code ++]
"ts-loader": "^9.4.2", // 如果使用 TS 则需要添加 // [!code ++]

"postcss" // [!code --]
"postcss-rtlcss" // [!code --]

// 如果启用了 PWA 模式：
"workbox-webpack-plugin": "^7.0.0" // [!code ++]
"workbox-build": "^7.0.0", // [!code --]
"workbox-cacheable-response": "^7.0.0", // [!code --]
"workbox-core": "^7.0.0", // [!code --]
"workbox-expiration": "^7.0.0", // [!code --]
"workbox-precaching": "^7.0.0", // [!code --]
"workbox-routing": "^7.0.0", // [!code --]
"workbox-strategies": "^7.0.0" // [!code --]
}

"browserslist": [ // [!code ++]
  "last 10 Chrome versions", // [!code ++]
  "last 10 Firefox versions", // [!code ++]
  "last 4 Edge versions", // [!code ++]
  "last 7 Safari versions", // [!code ++]
  "last 8 Android versions", // [!code ++]
  "last 8 ChromeAndroid versions", // [!code ++]
  "last 8 FirefoxAndroid versions", // [!code ++]
  "last 10 iOS versions", // [!code ++]
  "last 5 Opera versions" // [!code ++]
], // [!code ++]

记得运行 yarn/npm/pnpm/bun install 安装依赖。

Quasar CLI with Webpack 项目依赖 /package.json > browserslist 来指定目标浏览器。更多信息请查阅浏览器兼容性页面。

第 2 步：处理各种文件

创建 /babel.config.js：

export default (api) => {
  return {
    presets: [
      [
        "@quasar/babel-preset-app",
        api.caller((caller) => caller && caller.target === "node")
          ? { targets: { node: "current" } }
          : {},
      ],
    ],
  };
};

如果您使用了 RTL 支持，则需要编辑 /postcss.config.js。您需要移除 postcss-rtlcss 的导入和使用，因为 Quasar CLI 现在会自动处理它：
/postcss.config.js
```
import rtlcss from 'postcss-rtlcss' // [!code --]

export default {
 plugins: [
  rtlcss() // [!code --]
 ]
}
```
Copied to clipboard
同时，卸载 postcss-rtlcss 包。

第 3 步：从原项目文件夹复制目录

从您的原项目文件夹中，将以下目录原样复制过来：

/src
/src-cordova
/src-capacitor
/src-electron
/src-pwa
/src-ssr（有少量注意事项，见后续步骤）
/src-bex（有少量注意事项，见后续步骤）

第 4 步：检查新的 quasar.config 配置文件

以下属性的详细说明请参阅 quasar.config 配置文件页面。

eslint: { // [!code ++]
  // fix: true, // [!code ++]
  // include: [], // [!code ++]
  // exclude: [], // [!code ++]
  // cache: false, // [!code ++]
  // rawEsbuildEslintOptions: {}, // [!code ++]
  // rawWebpackEslintPluginOptions: {}, // [!code ++]
  warnings: true, // [!code ++]
  errors: true // [!code ++]
}, // [!code ++]

build: {
target: { // [!code --]
esbuildTarget: { // [!code ++]
   browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
   node: 'node20'
 },

webpackTranspile // [!code ++]
webpackTranspileDependencies // [!code ++]
webpackDevtool // [!code ++]

htmlFilename // [!code ++]
rtl // [!code ++]
showProgress // [!code ++]
gzip // [!code ++]
vueCompiler // [!code ++]

extendViteConf (viteConf, { isServer, isClient }) {} // [!code --]
extendWebpack () {} // [!code ++]
chainWebpack () {} // [!code ++]

viteVuePluginOptions // [!code --]
vitePlugins // [!code --]

useFilenameHashes // [!code --]
polyfillModulePreload // [!code --]

uglifyOptions // [!code ++]
scssLoaderOptions // [!code ++]
sassLoaderOptions // [!code ++]
stylusLoaderOptions // [!code ++]
lessLoaderOptions // [!code ++]
vueLoaderOptions // [!code ++]
tsLoaderOptions // [!code ++]
},

devServer: {
server: { // [!code ++]
 type: 'http' // [!code ++]
} // [!code ++]
},

sourceFiles: {
indexHtmlTemplate: 'index.html' // [!code ++]
}

第 5 步：SSR 相关

export const renderPreloadTag = defineSsrRenderPreloadTag((file/* , { ssrContext } */) => {
 if (jsRE.test(file) === true) {
  return `<link rel="modulepreload" href="${file}" crossorigin>`; // [!code --]
  return `<script src="${file}" defer crossorigin></script>`; // [!code ++]
 }

第 6 步：BEX 相关

declare module '@quasar/app-vite' { // [!code --]
declare module '@quasar/app-webpack' { // [!code ++]
 interface BexEventMap {
   // ...
 }
}

// 所有 content script 文件都需要修改：

declare module '@quasar/app-vite' { // [!code --]
declare module '@quasar/app-webpack' { // [!code ++]
 interface BexEventMap {
   // ...
 }
}

第 7 步：代码检查（Linting）

如果您使用了 ESLint，建议查看这里了解相关要求。

第 8 步：大功告成

quasar prepare
quasar dev
quasar build

发现错误？在浏览器中编辑此页

1. Introduction

1.1. 第 1 步：编辑 package.json

1.2. 第 2 步：处理各种文件

1.3. 第 3 步：从原项目文件夹复制目录

1.4. 第 4 步：检查新的 quasar.config 配置文件

1.5. 第 5 步：SSR 相关

1.6. 第 6 步：BEX 相关

1.7. 第 7 步：代码检查（Linting）

1.8. 第 8 步：大功告成