From 1b7ab79bd920b7858f450d09b3dc5173140aec46 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 9 Feb 2022 15:12:58 +0800 Subject: [PATCH 1/3] feat!: make `cache-loader` optional To get rid of the annoying peer dependency warning --- packages/@vue/cli-plugin-typescript/index.js | 22 +++++++++------ .../@vue/cli-plugin-typescript/package.json | 5 +++- packages/@vue/cli-service/lib/config/base.js | 28 ++++++++++++------- packages/@vue/cli-service/package.json | 5 +++- 4 files changed, 39 insertions(+), 21 deletions(-) diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js index 224758008a..54af685a4c 100644 --- a/packages/@vue/cli-plugin-typescript/index.js +++ b/packages/@vue/cli-plugin-typescript/index.js @@ -30,15 +30,19 @@ module.exports = (api, projectOptions) => { tsxRule.use(name).loader(loader).options(options) } - addLoader({ - name: 'cache-loader', - loader: require.resolve('cache-loader'), - options: api.genCacheConfig('ts-loader', { - 'ts-loader': require('ts-loader/package.json').version, - 'typescript': require('typescript/package.json').version, - modern: !!process.env.VUE_CLI_MODERN_BUILD - }, 'tsconfig.json') - }) + try { + const cacheLoaderPath = require.resolve('cache-loader') + + addLoader({ + name: 'cache-loader', + loader: cacheLoaderPath, + options: api.genCacheConfig('ts-loader', { + 'ts-loader': require('ts-loader/package.json').version, + 'typescript': require('typescript/package.json').version, + modern: !!process.env.VUE_CLI_MODERN_BUILD + }, 'tsconfig.json') + }) + } catch (e) {} if (useThreads) { addLoader({ diff --git a/packages/@vue/cli-plugin-typescript/package.json b/packages/@vue/cli-plugin-typescript/package.json index 132ff801df..3d6b8a880d 100644 --- a/packages/@vue/cli-plugin-typescript/package.json +++ b/packages/@vue/cli-plugin-typescript/package.json @@ -27,7 +27,6 @@ "@types/webpack-env": "^1.15.2", "@vue/cli-shared-utils": "^5.0.0-rc.2", "babel-loader": "^8.2.2", - "cache-loader": "^4.1.0", "fork-ts-checker-webpack-plugin": "^6.4.0", "globby": "^11.0.2", "thread-loader": "^3.0.0", @@ -37,11 +36,15 @@ }, "peerDependencies": { "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0", + "cache-loader": "^4.1.0", "typescript": ">=2", "vue": "^2 || ^3.2.13", "vue-template-compiler": "^2.0.0" }, "peerDependenciesMeta": { + "cache-loader": { + "optional": true + }, "vue-template-compiler": { "optional": true } diff --git a/packages/@vue/cli-service/lib/config/base.js b/packages/@vue/cli-service/lib/config/base.js index fc6b68c129..ab24533ba6 100644 --- a/packages/@vue/cli-service/lib/config/base.js +++ b/packages/@vue/cli-service/lib/config/base.js @@ -71,13 +71,18 @@ module.exports = (api, options) => { : 'vue/dist/vue.runtime.esm.js' ) + try { + webpackConfig.module + .rule('vue') + .test(/\.vue$/) + .use('cache-loader') + .loader(require.resolve('cache-loader')) + .options(vueLoaderCacheConfig) + } catch (e) {} + webpackConfig.module .rule('vue') .test(/\.vue$/) - .use('cache-loader') - .loader(require.resolve('cache-loader')) - .options(vueLoaderCacheConfig) - .end() .use('vue-loader') .loader(require.resolve('@vue/vue-loader-v15')) .options(Object.assign({ @@ -113,21 +118,24 @@ module.exports = (api, options) => { : 'vue/dist/vue.runtime.esm-bundler.js' ) + try { + webpackConfig.module + .rule('vue') + .test(/\.vue$/) + .use('cache-loader') + .loader(require.resolve('cache-loader')) + .options(vueLoaderCacheConfig) + } catch (e) {} + webpackConfig.module .rule('vue') .test(/\.vue$/) - .use('cache-loader') - .loader(require.resolve('cache-loader')) - .options(vueLoaderCacheConfig) - .end() .use('vue-loader') .loader(require.resolve('vue-loader')) .options({ ...vueLoaderCacheConfig, babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'] }) - .end() - .end() webpackConfig .plugin('vue-loader') diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json index b9d1a654a0..a13821dcf8 100644 --- a/packages/@vue/cli-service/package.json +++ b/packages/@vue/cli-service/package.json @@ -39,7 +39,6 @@ "address": "^1.1.2", "autoprefixer": "^10.2.4", "browserslist": "^4.16.3", - "cache-loader": "^4.1.0", "case-sensitive-paths-webpack-plugin": "^2.3.0", "cli-highlight": "^2.1.10", "clipboardy": "^2.3.0", @@ -85,6 +84,9 @@ "webpack-sources": "*" }, "peerDependenciesMeta": { + "cache-loader": { + "optional": true + }, "less-loader": { "optional": true }, @@ -108,6 +110,7 @@ } }, "devDependencies": { + "cache-loader": "^4.1.0", "sass": "^1.32.7", "sass-loader": "^12.0.0", "stylus-loader": "^6.1.0", From 963100987542919ee31343f6258234799a531f2b Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 9 Feb 2022 15:40:04 +0800 Subject: [PATCH 2/3] fix: fix cache loader path --- packages/@vue/cli-service/lib/config/base.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/base.js b/packages/@vue/cli-service/lib/config/base.js index ab24533ba6..fabe2413a7 100644 --- a/packages/@vue/cli-service/lib/config/base.js +++ b/packages/@vue/cli-service/lib/config/base.js @@ -72,11 +72,12 @@ module.exports = (api, options) => { ) try { + const cacheLoaderPath = require.resolve('cache-loader') webpackConfig.module .rule('vue') .test(/\.vue$/) .use('cache-loader') - .loader(require.resolve('cache-loader')) + .loader(cacheLoaderPath) .options(vueLoaderCacheConfig) } catch (e) {} @@ -119,11 +120,12 @@ module.exports = (api, options) => { ) try { + const cacheLoaderPath = require.resolve('cache-loader') webpackConfig.module .rule('vue') .test(/\.vue$/) .use('cache-loader') - .loader(require.resolve('cache-loader')) + .loader(cacheLoaderPath) .options(vueLoaderCacheConfig) } catch (e) {} From b62894539650768544bab7a45fcd2f8bf2592181 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 9 Feb 2022 16:17:08 +0800 Subject: [PATCH 3/3] fix: only add cache config to vue-loader v15 if cache-loader exists --- packages/@vue/cli-service/lib/config/base.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/@vue/cli-service/lib/config/base.js b/packages/@vue/cli-service/lib/config/base.js index fabe2413a7..3c8ff627bf 100644 --- a/packages/@vue/cli-service/lib/config/base.js +++ b/packages/@vue/cli-service/lib/config/base.js @@ -54,6 +54,11 @@ module.exports = (api, options) => { // js is handled by cli-plugin-babel --------------------------------------- // vue-loader -------------------------------------------------------------- + let cacheLoaderPath + try { + cacheLoaderPath = require.resolve('cache-loader') + } catch (e) {} + if (vueMajor === 2) { // for Vue 2 projects const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', { @@ -71,15 +76,14 @@ module.exports = (api, options) => { : 'vue/dist/vue.runtime.esm.js' ) - try { - const cacheLoaderPath = require.resolve('cache-loader') + if (cacheLoaderPath) { webpackConfig.module .rule('vue') .test(/\.vue$/) .use('cache-loader') .loader(cacheLoaderPath) .options(vueLoaderCacheConfig) - } catch (e) {} + } webpackConfig.module .rule('vue') @@ -90,7 +94,7 @@ module.exports = (api, options) => { compilerOptions: { whitespace: 'condense' } - }, vueLoaderCacheConfig)) + }, cacheLoaderPath ? vueLoaderCacheConfig : {})) webpackConfig .plugin('vue-loader') @@ -119,15 +123,14 @@ module.exports = (api, options) => { : 'vue/dist/vue.runtime.esm-bundler.js' ) - try { - const cacheLoaderPath = require.resolve('cache-loader') + if (cacheLoaderPath) { webpackConfig.module .rule('vue') .test(/\.vue$/) .use('cache-loader') .loader(cacheLoaderPath) .options(vueLoaderCacheConfig) - } catch (e) {} + } webpackConfig.module .rule('vue')