添加对base64的支持

Author: linrui

lib/template-compiler/modules/transform-require.js

@@ -3,10 +3,12 @@
 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, fileOptions) => {
@@ -26,32 +28,43 @@ function transform (node, options, fileOptions) {
     if (node.tag === tag && node.attrs) {
       var attributes = options[tag]
       if (typeof attributes === 'string') {
-        node.attrs.some(attr => rewrite(attr, node.attrsMap, attributes, fileOptions))
+        rewrite(node.attrsMap, attributes, fileOptions, options.limit)
       } else if (Array.isArray(attributes)) {
-        attributes.forEach(item => node.attrs.some(attr => rewrite(attr, node.attrsMap, item, fileOptions)))
+        attributes.forEach(item => rewrite(node.attrsMap, item, fileOptions, options.limit))
       }
     }
   }
 }
 
-function rewrite (attr, attrsMap, name, fileOptions) {
-  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)
+function rewrite (attrsMap, name, fileOptions, limit) {
+  var value = attrsMap[name]
+  if (value) {
+    var firstChar = value.charAt(0)
     if (firstChar === '.') {
       // 资源路径
-      var assetPath = path.join(path.dirname(fileOptions.resourcePath), value.slice(1, -1))
-      // 重写路径，为了避免重名，在webpack输出目录下新建copy-asset目录，资源保存到这里
-      var assetOutputPath = path.join('copy-asset', path.relative(process.cwd(), assetPath).replace(/^src/, ''))
-      attrsMap[name] = `/${assetOutputPath}`
-      // 拷贝资源
-      copyAsset(assetPath, path.resolve(fileOptions.outputPath, assetOutputPath))
+      var assetPath = path.join(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}`
+        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')
     }
-    return true
+  } catch (err) {
+    console.error('ReadFile Error:' + err)
   }
 }
 

package.json

@@ -55,6 +55,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",
@@ -89,9 +91,8 @@
     "lint-staged": "^4.0.2",
     "marked": "^0.3.6",
     "memory-fs": "^0.4.1",
-    "mkdirp": "^0.5.1",
-    "mpvue-template-compiler": "^1.0.10",
     "mocha": "^3.4.2",
+    "mpvue-template-compiler": "^1.0.10",
     "node-libs-browser": "^2.0.0",
     "normalize-newline": "^3.0.0",
     "null-loader": "^0.1.1",