Merge pull request #18 from mpvue/revert-16-fix-relative-asset

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

Author: aOrz

lib/template-compiler/index.js

@@ -16,10 +16,7 @@ module.exports = function (html) {
   var vueOptions = this.options.__vueOptions__ || {}
   var options = loaderUtils.getOptions(this) || {}
 
-  var defaultModules = [transformRequire(options.transformToRequire, {
-    outputPath: this.options.output.path,
-    resourcePath: this.resourcePath
-  })]
+  var defaultModules = [transformRequire(options.transformToRequire)]
   var userModules = vueOptions.compilerModules || options.compilerModules
   // for HappyPack cross-process use cases
   if (typeof userModules === 'string') {

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

@@ -1,78 +1,50 @@
 // 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',
-  limit: 10 * 1024
+  image: 'xlink:href'
 }
 
-module.exports = (userOptions, fileOptions) => {
+module.exports = userOptions => {
   var options = userOptions
     ? Object.assign({}, defaultOptions, userOptions)
     : defaultOptions
 
   return {
     postTransformNode: node => {
-      transform(node, options, fileOptions)
+      transform(node, options)
     }
   }
 }
 
-function transform (node, options, fileOptions) {
+function transform (node, options) {
   for (var tag in options) {
     if (node.tag === tag && node.attrs) {
       var attributes = options[tag]
       if (typeof attributes === 'string') {
-        rewrite(node.attrsMap, attributes, fileOptions, options.limit)
+        node.attrs.some(attr => rewrite(attr, attributes))
       } else if (Array.isArray(attributes)) {
-        attributes.forEach(item => rewrite(node.attrsMap, item, fileOptions, options.limit))
+        attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item)))
       }
     }
   }
 }
 
-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))
-      }
+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
     }
-  }
-}
-
-function assetToBase64 (assetPath, limit) {
-  try {
-    var buffer = fs.readFileSync(assetPath)
-    if (buffer.length <= limit) {
-      return buffer.toString('base64')
+    var firstChar = value.charAt(1)
+    if (firstChar === '.' || firstChar === '~') {
+      if (firstChar === '~') {
+        var secondChar = value.charAt(2)
+        value = '"' + value.slice(secondChar === '/' ? 3 : 2)
+      }
+      attr.value = `require(${value})`
     }
-  } catch (err) {
-    console.error('ReadFile Error:' + err)
+    return true
   }
 }
-
-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.13",
+  "version": "1.0.11",
   "description": "mpvue single-file component loader for Webpack",
   "main": "index.js",
   "repository": {
@@ -56,8 +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",
     "postcss-selector-parser": "^2.0.0",
@@ -70,7 +68,7 @@
   },
   "peerDependencies": {
     "css-loader": "*",
-    "mpvue-template-compiler": "^1.0.10"
+    "mpvue-template-compiler": "^1.0.7"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",
@@ -92,8 +90,9 @@
     "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",