Merge pull request #16 from linrui1994/fix-relative-asset

修复无法引入相对路径资源的bug

Author: aOrz

lib/template-compiler/index.js

@@ -16,7 +16,10 @@ 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') {

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

@@ -1,50 +1,78 @@
 // vue compiler module for transforming `<tag>:<attribute>` 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) {
       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.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))
       }
-      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)
+  })
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mpvue-loader",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "mpvue single-file component loader for Webpack",
   "main": "index.js",
   "repository": {
@@ -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",
@@ -67,7 +69,7 @@
   },
   "peerDependencies": {
     "css-loader": "*",
-    "mpvue-template-compiler": "^1.0.7"
+    "mpvue-template-compiler": "^1.0.10"
   },
   "devDependencies": {
     "babel-core": "^6.25.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.7",
     "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",