将项目转换为 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",
},

devDependencies: {
- "@quasar/app-vite": "^2.0.0"
+ "@quasar/app-webpack": "^4.0.0"

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

- "postcss"
- "postcss-rtlcss"

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

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

记得运行 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'

export default {
  plugins: [
-   rtlcss()
  ]
}
```
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: {
+   // fix: true,
+   // include: [],
+   // exclude: [],
+   // cache: false,
+   // rawEsbuildEslintOptions: {},
+   // rawWebpackEslintPluginOptions: {},
+   warnings: true,
+   errors: true
+ },

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

+ webpackTranspile
+ webpackTranspileDependencies
+ webpackDevtool

+ htmlFilename
+ rtl
+ showProgress
+ gzip
+ vueCompiler

- extendViteConf (viteConf, { isServer, isClient }) {}
+ extendWebpack () {}
+ chainWebpack () {}

- viteVuePluginOptions
- vitePlugins

- useFilenameHashes
- polyfillModulePreload

+ uglifyOptions
+ scssLoaderOptions
+ sassLoaderOptions
+ stylusLoaderOptions
+ lessLoaderOptions
+ vueLoaderOptions
+ tsLoaderOptions
},

devServer: {
+ server: {
+  type: 'http'
+ }
},

sourceFiles: {
+ indexHtmlTemplate: 'index.html'
}

第 5 步：SSR 相关

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

第 6 步：BEX 相关

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

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

- declare module '@quasar/app-vite' {
+ declare module '@quasar/app-webpack' {
  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 步：大功告成