From eb58129eb6326cb866b9f9a93a9abdd123927a93 Mon Sep 17 00:00:00 2001 From: linrui Date: Sat, 5 May 2018 17:34:54 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=9B=B8=E5=AF=B9?= =?UTF-8?q?=E8=B7=AF=E5=BE=84=E8=B5=84=E6=BA=90=E6=97=A0=E6=B3=95=E6=AD=A3?= =?UTF-8?q?=E5=B8=B8=E5=BC=95=E5=85=A5=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/template-compiler/index.js | 6 +- .../modules/transform-require.js | 70 +++++++++++++------ package.json | 5 +- 3 files changed, 57 insertions(+), 24 deletions(-) diff --git a/lib/template-compiler/index.js b/lib/template-compiler/index.js index 9dfacd8..bd993b9 100644 --- a/lib/template-compiler/index.js +++ b/lib/template-compiler/index.js @@ -16,7 +16,11 @@ module.exports = function (html) { var vueOptions = this.options.__vueOptions__ || {} var options = loaderUtils.getOptions(this) || {} - var defaultModules = [transformRequire(options.transformToRequire)] + var defaultModules = [transformRequire(options.transformToRequire, { + outputPath: this.options.output.path, + resourcePath: this.resourcePath + })] + var userModules = vueOptions.compilerModules || options.compilerModules // for HappyPack cross-process use cases if (typeof userModules === 'string') { diff --git a/lib/template-compiler/modules/transform-require.js b/lib/template-compiler/modules/transform-require.js index 7d9be15..80848f6 100644 --- a/lib/template-compiler/modules/transform-require.js +++ b/lib/template-compiler/modules/transform-require.js @@ -1,50 +1,78 @@ // vue compiler module for transforming `:` to `require` +var fs = require('fs') +var path = require('path') +var mkdirp = require('mkdirp') +var mime = require('mime') + var defaultOptions = { img: 'src', - image: 'xlink:href' + image: 'xlink:href', + limit: 10 * 1024 } -module.exports = userOptions => { +module.exports = (userOptions, fileOptions) => { var options = userOptions ? Object.assign({}, defaultOptions, userOptions) : defaultOptions return { postTransformNode: node => { - transform(node, options) + transform(node, options, fileOptions) } } } -function transform (node, options) { +function transform (node, options, fileOptions) { for (var tag in options) { - if (node.tag === tag && node.attrs) { + if (tag !== 'limit' && node.tag === tag && node.attrs) { var attributes = options[tag] if (typeof attributes === 'string') { - node.attrs.some(attr => rewrite(attr, attributes)) + rewrite(node.attrsMap, attributes, fileOptions, options.limit) } else if (Array.isArray(attributes)) { - attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item))) + attributes.forEach(item => rewrite(node.attrsMap, item, fileOptions, options.limit)) } } } } -function rewrite (attr, name) { - if (attr.name === name) { - var value = attr.value - var isStatic = value.charAt(0) === '"' && value.charAt(value.length - 1) === '"' - if (!isStatic) { - return - } - var firstChar = value.charAt(1) - if (firstChar === '.' || firstChar === '~') { - if (firstChar === '~') { - var secondChar = value.charAt(2) - value = '"' + value.slice(secondChar === '/' ? 3 : 2) +function rewrite (attrsMap, name, fileOptions, limit) { + var value = attrsMap[name] + if (value) { + var firstChar = value.charAt(0) + if (firstChar === '.') { + // 资源路径 + var assetPath = path.resolve(path.dirname(fileOptions.resourcePath), value) + // 小于limit的资源转base64 + var str = assetToBase64(assetPath, limit) + if (str) { + attrsMap[name] = `data:${mime.getType(assetPath) || ''};base64,${str}` + } else { + // 重写路径，为了避免重名，在webpack输出目录下新建copy-asset目录，资源保存到这里 + var assetOutputPath = path.join('copy-asset', path.relative(process.cwd(), assetPath).replace(/^src/, '')) + attrsMap[name] = `/${assetOutputPath.split(path.sep).join('/')}` + copyAsset(assetPath, path.resolve(fileOptions.outputPath, assetOutputPath)) } - attr.value = `require(${value})` } - return true } } + +function assetToBase64 (assetPath, limit) { + try { + var buffer = fs.readFileSync(assetPath) + if (buffer.length <= limit) { + return buffer.toString('base64') + } + } catch (err) { + console.error('ReadFile Error:' + err) + } +} + +function copyAsset (from, to) { + var readStream = fs.createReadStream(from) + mkdirp(path.dirname(to), err => { + if (err) console.error(err) + var writeStream = fs.createWriteStream(to) + readStream.pipe(writeStream) + }) +} diff --git a/package.json b/package.json index 2ed3fc2..23f2425 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,8 @@ "js-beautify": "^1.6.14", "loader-utils": "^1.1.0", "lru-cache": "^4.1.1", + "mime": "^2.3.1", + "mkdirp": "^0.5.1", "postcss": "^6.0.6", "postcss-load-config": "^1.1.0", "postcss-selector-parser": "^2.0.0", @@ -90,9 +92,8 @@ "lint-staged": "^4.0.2", "marked": "^0.3.6", "memory-fs": "^0.4.1", - "mkdirp": "^0.5.1", - "mpvue-template-compiler": "^1.0.7", "mocha": "^3.4.2", + "mpvue-template-compiler": "^1.0.7", "node-libs-browser": "^2.0.0", "normalize-newline": "^3.0.0", "null-loader": "^0.1.1", From 841235ee4aaa43b5de1ff3eb4da5f08bf677df9c Mon Sep 17 00:00:00 2001 From: linrui Date: Fri, 11 May 2018 11:01:35 +0800 Subject: [PATCH 2/2] drop base64 --- .../modules/transform-require.js | 37 +++++-------------- package.json | 1 - 2 files changed, 9 insertions(+), 29 deletions(-) diff --git a/lib/template-compiler/modules/transform-require.js b/lib/template-compiler/modules/transform-require.js index 80848f6..b144265 100644 --- a/lib/template-compiler/modules/transform-require.js +++ b/lib/template-compiler/modules/transform-require.js @@ -3,12 +3,10 @@ var fs = require('fs') var path = require('path') var mkdirp = require('mkdirp') -var mime = require('mime') var defaultOptions = { img: 'src', - image: 'xlink:href', - limit: 10 * 1024 + image: 'xlink:href' } module.exports = (userOptions, fileOptions) => { @@ -25,46 +23,29 @@ module.exports = (userOptions, fileOptions) => { function transform (node, options, fileOptions) { for (var tag in options) { - if (tag !== 'limit' && node.tag === tag && node.attrs) { + if (node.tag === tag && node.attrs) { var attributes = options[tag] if (typeof attributes === 'string') { - rewrite(node.attrsMap, attributes, fileOptions, options.limit) + rewrite(node.attrsMap, attributes, fileOptions) } else if (Array.isArray(attributes)) { - attributes.forEach(item => rewrite(node.attrsMap, item, fileOptions, options.limit)) + attributes.forEach(item => rewrite(node.attrsMap, item, fileOptions)) } } } } -function rewrite (attrsMap, name, fileOptions, limit) { +function rewrite (attrsMap, name, fileOptions) { var value = attrsMap[name] if (value) { var firstChar = value.charAt(0) if (firstChar === '.') { // 资源路径 var assetPath = path.resolve(path.dirname(fileOptions.resourcePath), value) - // 小于limit的资源转base64 - var str = assetToBase64(assetPath, limit) - if (str) { - attrsMap[name] = `data:${mime.getType(assetPath) || ''};base64,${str}` - } else { - // 重写路径，为了避免重名，在webpack输出目录下新建copy-asset目录，资源保存到这里 - var assetOutputPath = path.join('copy-asset', path.relative(process.cwd(), assetPath).replace(/^src/, '')) - attrsMap[name] = `/${assetOutputPath.split(path.sep).join('/')}` - copyAsset(assetPath, path.resolve(fileOptions.outputPath, assetOutputPath)) - } - } - } -} - -function assetToBase64 (assetPath, limit) { - try { - var buffer = fs.readFileSync(assetPath) - if (buffer.length <= limit) { - return buffer.toString('base64') + // 重写路径，为了避免重名，在webpack输出目录下新建copy-asset目录，资源保存到这里 + var assetOutputPath = path.join('copy-asset', path.relative(process.cwd(), assetPath).replace(/^src/, '')) + attrsMap[name] = `/${assetOutputPath.split(path.sep).join('/')}` + copyAsset(assetPath, path.resolve(fileOptions.outputPath, assetOutputPath)) } - } catch (err) { - console.error('ReadFile Error:' + err) } } diff --git a/package.json b/package.json index 23f2425..286c586 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "js-beautify": "^1.6.14", "loader-utils": "^1.1.0", "lru-cache": "^4.1.1", - "mime": "^2.3.1", "mkdirp": "^0.5.1", "postcss": "^6.0.6", "postcss-load-config": "^1.1.0",