fix(loader): 缓存Page 和 App 源码的同时也对 sourcemap 进行缓存,并将其传递下去,避免 sourcemap 链断裂

Author: chenzhiyong

packages/taro-loader/src/app.ts

@@ -6,9 +6,8 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const stringify = (s: string): string => stringifyRequest(this, s)
-
   const options = this.getOptions()
   const { importFrameworkStatement, frameworkArgs, creator, creatorLocation, modifyInstantiate } = options.loaderMeta
   const config = JSON.stringify(options.config)
@@ -17,7 +16,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const pxTransformConfig = options.pxTransformConfig
   const { globalObject } = this._compilation?.outputOptions || { globalObject: 'wx' }
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + '?name=app'
-  entryCache.set('app', source)
+  entryCache.set('app', {
+    source,
+    map
+  })
 
   const prerender = `
 if (typeof PRERENDER !== 'undefined') {

packages/taro-loader/src/component.ts

@@ -5,15 +5,18 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const stringify = (s: string): string => stringifyRequest(this, s)
   const pageName = options.name
   const { isNeedRawLoader } = options.loaderMeta
   // raw is a placeholder loader to locate changed .vue resource
   const raw = path.join(__dirname, 'raw.js')
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')
     : ['!', entryCacheLoader, this.resourcePath].join('!')

packages/taro-loader/src/entry-cache.ts

@@ -1,10 +1,12 @@
-export const entryCache = new Map<string, string>()
+export const entryCache = new Map<string, any>()
 
 export default function () {
+  const callback = this.async()
   const { name } = this.getOptions()
   if (name && entryCache.has(name)) {
     const content = entryCache.get(name)
-    entryCache.delete(name)
-    return content
+    // just in case, delete cache in next tick
+    setImmediate(() => entryCache.delete(name))
+    callback(null, content!.source, content!.map)
   }
 }

packages/taro-loader/src/independentPage.ts

@@ -11,7 +11,7 @@ interface PageConfig {
   path: string
 }
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const config = getPageConfig(options.config, this.resourcePath)
   const configString = JSON.stringify(config)
@@ -31,7 +31,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const frameworkArgsCopy = frameworkArgsArray.join(',')
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')

packages/taro-loader/src/native-component.ts

@@ -6,7 +6,7 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const { loaderMeta = {}, config: loaderConfig, isNewBlended = false, runtimePath } = options
   const { importFrameworkStatement, frameworkArgs, isNeedRawLoader, creatorLocation } = loaderMeta
@@ -18,7 +18,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const behaviorsName = options.behaviorsName
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')

packages/taro-loader/src/native-page.ts

@@ -6,7 +6,7 @@ import { stringifyRequest } from './util'
 
 import type * as webpack from 'webpack'
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const { importFrameworkStatement, frameworkArgs, isNeedRawLoader, creatorLocation } = options.loaderMeta
   const { config: loaderConfig } = options
@@ -17,7 +17,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const behaviorsName = options.behaviorsName
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')

packages/taro-loader/src/page.ts

@@ -12,7 +12,7 @@ interface PageConfig {
   path: string
 }
 
-export default function (this: webpack.LoaderContext<any>, source: string) {
+export default function (this: webpack.LoaderContext<any>, source: string, map?: any) {
   const options = this.getOptions()
   const { config: loaderConfig } = options
   const config = getPageConfig(loaderConfig, this.resourcePath)
@@ -23,7 +23,10 @@ export default function (this: webpack.LoaderContext<any>, source: string) {
   const { isNeedRawLoader, modifyInstantiate } = options.loaderMeta
   // raw is a placeholder loader to locate changed .vue resource
   const entryCacheLoader = path.join(__dirname, 'entry-cache.js') + `?name=${pageName}`
-  entryCache.set(pageName, source)
+  entryCache.set(pageName, {
+    source,
+    map
+  })
   const raw = path.join(__dirname, 'raw.js')
   const componentPath = isNeedRawLoader
     ? ['!', raw, entryCacheLoader, this.resourcePath].join('!')