fix: 修正svgsprite引用模块问题

zuzucheFE · May 16, 2019 · 4e2f58a · 4e2f58a
1 parent 7b836f7
commit 4e2f58a
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 79 deletions.
diff --git a/lib/utils/svgSpriteRuntimeGenerator.js b/lib/utils/svgSpriteRuntimeGenerator.js
@@ -1,5 +1,6 @@
 'use strict';
 
+const path = require('path');
 const stringifyRequest = require('loader-utils').stringifyRequest;
 const pascalCase = require('pascalcase');
 
@@ -9,55 +10,80 @@ const generateExport = require('svg-sprite-loader/lib/utils/generate-export.js')
 const generateSpritePlaceholder = require('svg-sprite-loader/lib/utils/generate-sprite-placeholder.js');
 
 function stringifySymbol(symbol) {
-    let content = symbol.render().replace(/id="(.*)--sprite"/, 'id="$1"');
-    return stringify({
-        id: symbol.id.replace('--sprite', ''),
-        use: symbol.useId.replace('--sprite', ''),
-        viewBox: symbol.viewBox,
-        content: content
-    });
+	let content = symbol.render().replace(/id="(.*)--sprite"/, 'id="$1"');
+	return stringify({
+		id: symbol.id.replace('--sprite', ''),
+		use: symbol.useId.replace('--sprite', ''),
+		viewBox: symbol.viewBox,
+		content: content,
+	});
 }
 
 module.exports = function svgSpriteRuntimeGenerator(params) {
-    const { symbol, config, context, loaderContext } = params;
-    const { extract, esModule, spriteModule, symbolModule, runtimeCompat } = config;
+	const { symbol, config, context, loaderContext } = params;
+	const {
+		extract,
+		esModule,
+		spriteModule,
+		symbolModule,
+		runtimeCompat,
+		publicPath,
+	} = config;
 
-    let runtime;
-    let symbolId = symbol.id.replace('--sprite', '');
+	let runtime;
+	let symbolId = symbol.id.replace('--sprite', '');
 
-    if (extract) {
-        const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
-        const publicPath = loaderContext._compiler.options.output.publicPath || '__webpack_public_path__';
+	if (extract) {
+		const spritePlaceholder = generateSpritePlaceholder(
+			symbol.request.file
+		);
+		const publicPath = stringify(publicPath) || '__webpack_public_path__';
 
-        const viewBoxParts = symbol.viewBox.split(' ');
-        const width = parseInt(viewBoxParts[2], 10);
-        const height = parseInt(viewBoxParts[3], 10);
+		const viewBoxParts = symbol.viewBox.split(' ');
+		const width = parseInt(viewBoxParts[2], 10);
+		const height = parseInt(viewBoxParts[3], 10);
 
-        const data = `{
+		const data = `{
             id: ${stringify(symbolId)},
             viewBox: ${stringify(symbol.viewBox)},
             url: ${publicPath} + ${stringify(spritePlaceholder)},
             width: ${width},
-            height: ${height}
+            height: ${height},
+            toString: function () {
+                return this.url;
+            }
         }`;
 
-        runtime = generateExport(data, esModule);
-    } else {
-        const spriteModuleImport = stringifyRequest({ context }, spriteModule);
-        const symbolModuleImport = stringifyRequest({ context }, symbolModule);
+		runtime = generateExport(data, esModule);
+	} else {
+		const spriteModuleAbsPath = path.isAbsolute(spriteModule)
+			? spriteModule
+			: path.join(context, spriteModule);
+		const symbolModuleAbsPath = path.isAbsolute(symbolModule)
+			? symbolModule
+			: path.join(context, symbolModule);
 
-        runtime = [
-            generateImport('SpriteSymbol', symbolModuleImport, esModule),
-            generateImport('sprite', spriteModuleImport, esModule),
-            generateImport('React', 'react', esModule),
+		const spriteModuleImport = stringifyRequest(
+			loaderContext,
+			spriteModuleAbsPath
+		);
+		const symbolModuleImport = stringifyRequest(
+			loaderContext,
+			symbolModuleAbsPath
+		);
 
-            `let symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,
-            'sprite.add(symbol)',
-        ];
+		runtime = [
+			generateImport('SpriteSymbol', symbolModuleImport, esModule),
+			generateImport('sprite', spriteModuleImport, esModule),
+			generateImport('React', 'react', esModule),
 
-        let rcDisplayName = `${pascalCase(symbolId)}SpriteSymbolComponent`;
-        runtime.push(
-            `export default function ${rcDisplayName}(props) {
+			`let symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,
+			'sprite.add(symbol)',
+		];
+
+		let rcDisplayName = `${pascalCase(symbolId)}SpriteSymbolComponent`;
+		runtime.push(
+			`export default function ${rcDisplayName}(props) {
                 let newProps = {};
                 if (props.className !== undefined) {
                     newProps.className = props.className;
@@ -72,16 +98,16 @@ module.exports = function svgSpriteRuntimeGenerator(params) {
                     React.createElement('use', { xlinkHref: '#${symbolId}' })
                 );
             }`
-        );
+		);
 
-        if (runtimeCompat) {
-            runtime.push(`export let symbolData = "#${symbolId}"`);
-        } else {
-            runtime.push(`export let symbolData = symbol`);
-        }
+		if (runtimeCompat) {
+			runtime.push(`export let symbolData = "#${symbolId}"`);
+		} else {
+			runtime.push(`export let symbolData = symbol`);
+		}
 
-        runtime = runtime.join(';\n');
-    }
+		runtime = runtime.join(';\n');
+	}
 
-    return runtime;
+	return runtime;
 };
diff --git a/lib/utils/svgSpriteRuntimeGeneratorNotReact.js b/lib/utils/svgSpriteRuntimeGeneratorNotReact.js
@@ -1,3 +1,6 @@
+'use strict';
+
+const path = require('path');
 const stringifyRequest = require('loader-utils').stringifyRequest;
 
 const stringify = require('svg-sprite-loader/lib/utils/stringify.js');
@@ -6,59 +9,84 @@ const generateExport = require('svg-sprite-loader/lib/utils/generate-export.js')
 const generateSpritePlaceholder = require('svg-sprite-loader/lib/utils/generate-sprite-placeholder.js');
 
 function stringifySymbol(symbol) {
-    let content = symbol.render().replace(/id="(.*)--sprite-notrc"/, 'id="$1"');
-    return stringify({
-        id: symbol.id.replace('--sprite-notrc', ''),
-        use: symbol.useId.replace('--sprite-notrc', ''),
-        viewBox: symbol.viewBox,
-        content: content
-    });
+	let content = symbol.render().replace(/id="(.*)--sprite-notrc"/, 'id="$1"');
+	return stringify({
+		id: symbol.id.replace('--sprite-notrc', ''),
+		use: symbol.useId.replace('--sprite-notrc', ''),
+		viewBox: symbol.viewBox,
+		content: content,
+	});
 }
 
 module.exports = function runtimeGenerator(params) {
-    const { symbol, config, context, loaderContext } = params;
-    const { extract, esModule, spriteModule, symbolModule, runtimeCompat } = config;
+	const { symbol, config, context, loaderContext } = params;
+	const {
+		extract,
+		esModule,
+		spriteModule,
+		symbolModule,
+		runtimeCompat,
+		publicPath,
+	} = config;
 
-    let runtime;
-    let symbolId = symbol.id.replace('--sprite-notrc', '');
+	let runtime;
+	let symbolId = symbol.id.replace('--sprite-notrc', '');
 
-    if (extract) {
-        const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
-        const publicPath = loaderContext._compiler.options.output.publicPath || '__webpack_public_path__';
+	if (extract) {
+		const spritePlaceholder = generateSpritePlaceholder(
+			symbol.request.file
+		);
+		const publicPath = stringify(publicPath) || '__webpack_public_path__';
 
-        const viewBoxParts = symbol.viewBox.split(' ');
-        const width = parseInt(viewBoxParts[2], 10);
-        const height = parseInt(viewBoxParts[3], 10);
+		const viewBoxParts = symbol.viewBox.split(' ');
+		const width = parseInt(viewBoxParts[2], 10);
+		const height = parseInt(viewBoxParts[3], 10);
 
-        const data = `{
+		const data = `{
             id: ${stringify(symbolId)},
             viewBox: ${stringify(symbol.viewBox)},
             url: ${publicPath} + ${stringify(spritePlaceholder)},
             width: ${width},
-            height: ${height}
+            height: ${height},
+            toString: function () {
+                return this.url;
+            }
         }`;
 
-        runtime = generateExport(data, esModule);
-    } else {
-        const spriteModuleImport = stringifyRequest({ context }, spriteModule);
-        const symbolModuleImport = stringifyRequest({ context }, symbolModule);
+		runtime = generateExport(data, esModule);
+	} else {
+		const spriteModuleAbsPath = path.isAbsolute(spriteModule)
+			? spriteModule
+			: path.join(context, spriteModule);
+		const symbolModuleAbsPath = path.isAbsolute(symbolModule)
+			? symbolModule
+			: path.join(context, symbolModule);
+
+		const spriteModuleImport = stringifyRequest(
+			loaderContext,
+			spriteModuleAbsPath
+		);
+		const symbolModuleImport = stringifyRequest(
+			loaderContext,
+			symbolModuleAbsPath
+		);
 
-        runtime = [
-            generateImport('SpriteSymbol', symbolModuleImport, esModule),
-            generateImport('sprite', spriteModuleImport, esModule),
+		runtime = [
+			generateImport('SpriteSymbol', symbolModuleImport, esModule),
+			generateImport('sprite', spriteModuleImport, esModule),
 
-            `let symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,
-            'sprite.add(symbol)',
-        ];
+			`let symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,
+			'sprite.add(symbol)',
+		];
 
-        if (runtimeCompat) {
-            runtime.push(`export let symbolData = "#${symbolId}"`);
-        } else {
-            runtime.push(`export let symbolData = symbol`);
-        }
+		if (runtimeCompat) {
+			runtime.push(`export let symbolData = "#${symbolId}"`);
+		} else {
+			runtime.push(`export let symbolData = symbol`);
+		}
 
-        runtime = runtime.join(';\n');
-    }
+		runtime = runtime.join(';\n');
+	}
 
-    return runtime;
+	return runtime;
 };