|
| 1 | +import assert from 'node:assert'; |
1 | 2 | import { type Rspack, rspack } from '@rsbuild/core'; |
2 | 3 | import { getUndoPath } from '../css/utils'; |
3 | 4 |
|
4 | | -type Options = { |
5 | | -} |
6 | 5 | /** |
7 | 6 | * these codes is written according to |
8 | 7 | * https://github.com/web-infra-dev/rspack/blob/61f0cd2b4e313445a9d3329ca71240e99edfb352/crates/rspack_plugin_asset/src/lib.rs#L531 |
9 | 8 | */ |
10 | | -const pattern: RegExp = /__webpack_require__\.p\s\+\s["'](.+)["']/g; |
11 | | -function extractAssetFilenames (content: string): string[] { |
12 | | - console.log([...content.matchAll(pattern)]) |
13 | | - return [...content.matchAll(pattern)].map(i => { |
14 | | - return i?.[1] |
15 | | - }).filter(Boolean) as string[]; |
16 | | -} |
17 | 9 |
|
| 10 | +// 1. bundleless: single file |
| 11 | +const BUNDLELESS_ASSET_PATTERN: RegExp = |
| 12 | + /__webpack_require__\.p\s\+\s["'](.+)["']/g; |
18 | 13 | const RSLIB_NAMESPACE_OBJECT = '__rslib_asset__'; |
19 | | - |
20 | | -const esmSingleFileTemplate = (url: string) => `import ${RSLIB_NAMESPACE_OBJECT} from '${url}'; |
| 14 | +const esmSingleFileTemplate = ( |
| 15 | + url: string, |
| 16 | +) => `import ${RSLIB_NAMESPACE_OBJECT} from '${url}'; |
21 | 17 | export default ${RSLIB_NAMESPACE_OBJECT};`; |
| 18 | +const cjsSingleFileTemplate = (url: string) => |
| 19 | + `module.exports = require('${url}');`; |
| 20 | + |
| 21 | +function extractAssetFilenames(content: string): string[] { |
| 22 | + return [...content.matchAll(BUNDLELESS_ASSET_PATTERN)] |
| 23 | + .map((i) => { |
| 24 | + return i?.[1]; |
| 25 | + }) |
| 26 | + .filter(Boolean) as string[]; |
| 27 | +} |
| 28 | + |
| 29 | +// 2. bundle: concatenated |
| 30 | +const CONCATENATED_PATTERN: RegExp = |
| 31 | + /(const|var) (\w+) = __webpack_require__\.p\s\+\s["'](.+)["']/g; |
| 32 | +const concatenatedEsmReplaceTemplate = (variableName: string, url: string) => |
| 33 | + `import ${variableName} from '${url}';`; |
| 34 | +const concatenatedCjsReplaceTemplate = ( |
| 35 | + declarationKind: string, |
| 36 | + variableName: string, |
| 37 | + url: string, |
| 38 | +) => `${declarationKind} ${variableName} = require('${url}');`; |
22 | 39 |
|
23 | | -const cjsSingleFileTemplate = (url: string) => `module.exports = require('${url}');`; |
| 40 | +// 3. bundle: not concatenated, in __webpack_require__.m |
| 41 | +const NOT_CONCATENATED_PATTERN: RegExp = |
| 42 | + /module\.exports = __webpack_require__\.p\s\+\s["'](.+)["']/g; |
| 43 | +const nonConcatenatedReplaceTemplate = (url: string) => |
| 44 | + `module.exports = require('${url}');`; |
24 | 45 |
|
25 | 46 | const pluginName = 'LIB_ASSET_EXTRACT_PLUGIN'; |
26 | 47 |
|
| 48 | +type Options = { |
| 49 | + // just for perf, in bundleless we can replace the entire file |
| 50 | + bundle: boolean; |
| 51 | +}; |
| 52 | + |
27 | 53 | class LibAssetExtractPlugin implements Rspack.RspackPluginInstance { |
28 | 54 | readonly name: string = pluginName; |
29 | 55 | options: Options; |
30 | | - constructor(options?: Options) { |
31 | | - this.options = options ?? {}; |
| 56 | + constructor(options: Options) { |
| 57 | + this.options = options; |
32 | 58 | } |
33 | 59 |
|
34 | 60 | apply(compiler: Rspack.Compiler): void { |
35 | 61 | compiler.hooks.make.tap(pluginName, (compilation) => { |
36 | | - compilation.hooks.processAssets.tap(pluginName, (assets) => { |
37 | | - const chunkAsset = Object.keys(assets).filter((name) => |
38 | | - /js/.test(name), |
39 | | - ); |
40 | | - for (const name of chunkAsset) { |
41 | | - const isEsmFormat = compilation.options.output.module; |
42 | | - const undoPath = getUndoPath( |
43 | | - name, |
44 | | - compilation.outputOptions.path!, |
45 | | - true, |
| 62 | + compilation.hooks.processAssets.tap(pluginName, (assets) => { |
| 63 | + const chunkAsset = Object.keys(assets).filter((name) => |
| 64 | + /js$/.test(name), |
46 | 65 | ); |
47 | | - compilation.updateAsset(name, (old) => { |
48 | | - const oldSource = old.source().toString(); |
49 | | - const assetFilenames = extractAssetFilenames(oldSource); |
50 | | - |
51 | | - if (assetFilenames.length === 1) { |
52 | | - const assetFilename = assetFilenames[0]; |
53 | | - let newSource: string = ''; |
54 | | - const url = `${undoPath}${assetFilename}`; |
55 | | - |
56 | | - if(isEsmFormat) { |
57 | | - newSource = esmSingleFileTemplate(url); |
58 | | - } else { |
59 | | - newSource = cjsSingleFileTemplate(url); |
| 66 | + for (const name of chunkAsset) { |
| 67 | + const isEsmFormat = compilation.options.output.module; |
| 68 | + const undoPath = getUndoPath( |
| 69 | + name, |
| 70 | + compilation.outputOptions.path!, |
| 71 | + true, |
| 72 | + ); |
| 73 | + compilation.updateAsset(name, (old) => { |
| 74 | + const oldSource = old.source().toString(); |
| 75 | + |
| 76 | + // bundleless |
| 77 | + if (this.options.bundle === false) { |
| 78 | + const assetFilenames = extractAssetFilenames(oldSource); |
| 79 | + if (assetFilenames.length === 0) { |
| 80 | + return old; |
| 81 | + } |
| 82 | + assert( |
| 83 | + assetFilenames.length === 1, |
| 84 | + `in bundleless mode, each asset file should only generate one js module, but generated ${assetFilenames}, ${oldSource}`, |
| 85 | + ); |
| 86 | + const assetFilename = assetFilenames[0]; |
| 87 | + let newSource = ''; |
| 88 | + const url = `${undoPath}${assetFilename}`; |
| 89 | + |
| 90 | + if (isEsmFormat) { |
| 91 | + newSource = esmSingleFileTemplate(url); |
| 92 | + } else { |
| 93 | + newSource = cjsSingleFileTemplate(url); |
| 94 | + } |
| 95 | + return new rspack.sources.RawSource(newSource); |
60 | 96 | } |
61 | | - return new rspack.sources.RawSource(newSource); |
62 | | - } else { |
| 97 | + |
| 98 | + // bundle |
63 | 99 | const newSource = new rspack.sources.ReplaceSource(old); |
64 | | - assetFilenames.forEach(() => { |
65 | | - }) |
| 100 | + function replace( |
| 101 | + pattern: RegExp, |
| 102 | + replacer: (match: RegExpMatchArray) => string, |
| 103 | + ) { |
| 104 | + const matches = oldSource.matchAll(pattern); |
| 105 | + for (const match of matches) { |
| 106 | + const replaced = replacer(match); |
| 107 | + newSource.replace( |
| 108 | + match.index, |
| 109 | + match.index + match[0].length - 1, |
| 110 | + replaced, |
| 111 | + ); |
| 112 | + } |
| 113 | + } |
| 114 | + replace(CONCATENATED_PATTERN, (match) => { |
| 115 | + const declarationKind = match[1]; |
| 116 | + const variableName = match[2]; |
| 117 | + const url = `${undoPath}${match[3]}`; |
| 118 | + return isEsmFormat |
| 119 | + ? concatenatedEsmReplaceTemplate(variableName!, url) |
| 120 | + : concatenatedCjsReplaceTemplate( |
| 121 | + declarationKind!, |
| 122 | + variableName!, |
| 123 | + url, |
| 124 | + ); |
| 125 | + }); |
| 126 | + replace(NOT_CONCATENATED_PATTERN, (match) => { |
| 127 | + const url = `${undoPath}${match[1]}`; |
| 128 | + return nonConcatenatedReplaceTemplate(url); |
| 129 | + }); |
66 | 130 | return newSource; |
67 | | - } |
68 | | - |
69 | | - }); |
70 | | - } |
71 | | - }) |
72 | | -})} |
| 131 | + }); |
| 132 | + } |
| 133 | + }); |
| 134 | + }); |
| 135 | + } |
73 | 136 | } |
74 | | -export { LibAssetExtractPlugin}; |
| 137 | +export { LibAssetExtractPlugin }; |
0 commit comments