Merge pull request mpvue#38 from mpvue/wz/fix-img-path-error

过滤 node_modules 路径

Author: aOrz

lib/mp-compiler/index.js

@@ -5,7 +5,6 @@ const babel = require('babel-core')
 const path = require('path')
 const fs = require('fs')
 const deepEqual = require('deep-equal')
-const relative = require('../utils/relative')
 
 const { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents } = require('./parse')
 const { parseComponentsDeps: parseComponentsDepsTs } = require('./parse-ts')
@@ -51,7 +50,7 @@ function genComponentWxml (compiled, options, emitFile, emitError, emitWarning)
 function createAppWxml (emitFile, resourcePath, rootComponent, context) {
   const { src } = getFileInfo(resourcePath) || {}
   const { name: componentName, filePath: wxmlSrc } = getCompNameAndSrc(context, rootComponent)
-  const wxmlContent = genPageWxml(componentName, relative(`/${src}.wxml`, `/${wxmlSrc}`))
+  const wxmlContent = genPageWxml(componentName, wxmlSrc)
   emitFile(`${src}.wxml`, wxmlContent)
 }
 // 更新全局组件时，需要重新生成wxml，用这个字段保存所有需要更新的页面及其参数
@@ -118,12 +117,13 @@ function compileWxml (compiled, html) {
 // 针对 .vue 单文件的脚本逻辑的处理
 // 处理出当前单文件组件的子组件依赖
 function compileMPScript (script, mpOptioins, moduleId) {
+  const { resourcePath, options, resolve, context } = this
   const babelrc = getBabelrc(mpOptioins.globalBabelrc)
   let result, metadata
   let scriptContent = script.content
   const babelOptions = { extends: babelrc, plugins: [parseComponentsDeps] }
   if (script.src) { // 处理src
-    const scriptpath = path.join(path.dirname(this.resourcePath), script.src)
+    const scriptpath = path.join(path.dirname(resourcePath), script.src)
     scriptContent = fs.readFileSync(scriptpath).toString()
   }
   if (script.lang === 'ts') { // 处理ts
@@ -138,16 +138,16 @@ function compileMPScript (script, mpOptioins, moduleId) {
 
   // 处理子组件的信息
   const components = {}
-  const fileInfo = resolveTarget(this.resourcePath, this.options.entry)
+  const fileInfo = resolveTarget(resourcePath, options.entry)
   if (originComponents) {
-    resolveSrc(originComponents, components, this.resolve, this.context).then(() => {
-      resolveComponent(this.resourcePath, fileInfo, importsMap, components, moduleId)
+    resolveSrc(originComponents, components, resolve, context, options.context).then(() => {
+      resolveComponent(resourcePath, fileInfo, importsMap, components, moduleId)
     }).catch(err => {
       console.error(err)
-      resolveComponent(this.resourcePath, fileInfo, importsMap, components, moduleId)
+      resolveComponent(resourcePath, fileInfo, importsMap, components, moduleId)
     })
   } else {
-    resolveComponent(this.resourcePath, fileInfo, importsMap, components, moduleId)
+    resolveComponent(resourcePath, fileInfo, importsMap, components, moduleId)
   }
 
   return script
@@ -183,7 +183,7 @@ function compileMP (content, mpOptioins) {
 
     // 解析全局组件的路径
     const components = {}
-    resolveSrc(globalComps, components, resolve, context).then(() => {
+    resolveSrc(globalComps, components, resolve, context, options.context).then(() => {
       handleResult(components)
     }).catch(err => {
       console.error(err)
@@ -220,13 +220,13 @@ function compileMP (content, mpOptioins) {
   return content
 }
 
-function resolveSrc (originComponents, components, resolveFn, context) {
+function resolveSrc (originComponents, components, resolveFn, context, projectRoot) {
   return Promise.all(Object.keys(originComponents).map(k => {
     return new Promise((resolve, reject) => {
       resolveFn(context, originComponents[k], (err, realSrc) => {
         if (err) return reject(err)
         const com = covertCCVar(k)
-        const { filePath, name } = getCompNameAndSrc(context, realSrc)
+        const { filePath, name } = getCompNameAndSrc(projectRoot, realSrc)
         components[com] = { src: filePath, name }
         resolve()
       })

lib/mp-compiler/util.js

@@ -1,7 +1,6 @@
 const path = require('path')
 const fs = require('fs')
-const relative = require('../utils/relative')
-
+const resolveSrc = require('../utils/resolve-src')
 const pagesNameMap = Object.create(null)
 
 function cacheFileInfo (resourcePath, ...arg) {
@@ -17,7 +16,7 @@ function getFileInfo (resourcePath) {
 var hash = require('hash-sum')
 const cache = Object.create(null)
 function getCompNameAndSrc (context, file) {
-  const filePath = `${relative(context, file).replace(/^src\//, '')}.wxml`
+  const filePath = `/${resolveSrc(context, file)}.wxml`
   if (!cache[file]) {
     cache[file] = hash(file)
   }
@@ -31,7 +30,6 @@ function getCompNameAndSrc (context, file) {
 function getNameByFile (dir) {
   // const arr = dir.match(/[pages?/components?]\/(.*?)(\/)/)
   const arr = dir.match(/pages\/(.*?)\//)
-  // 兼容 win 下的路径格式不统一的问题
   if (arr && arr[1]) {
     return arr[1]
   }
@@ -123,11 +121,6 @@ function getBabelrc (src) {
   return ''
 }
 
-function getPathPrefix (src) {
-  const length = src.split('/').length - 1
-  return `${'../'.repeat(length)}`
-}
-
 const defaultStylePart = {
   type: 'style',
   content: '\n',
@@ -154,6 +147,5 @@ module.exports = {
   getSlots,
   htmlBeautify,
   getBabelrc,
-  getPathPrefix,
   getPageSrc
 }

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

@@ -3,7 +3,7 @@
 var fs = require('fs')
 var path = require('path')
 var mkdirp = require('mkdirp')
-var relative = require('../../utils/relative')
+var resolveSrc = require('../../utils/resolve-src')
 
 var defaultOptions = {
   img: 'src',
@@ -42,10 +42,9 @@ function rewrite (attrsMap, name, fileOptions) {
     if (firstChar === '.') {
       var { resourcePath, outputPath, context } = fileOptions
       var assetPath = path.resolve(resourcePath, '..', value)
-      // 资源路径, 为了分包，去掉了 src 目录
-      var toPath = relative(context, assetPath).replace(/^\/src\//, '')
-      attrsMap[name] = path.join(outputPath, toPath)
-      copyAsset(assetPath, attrsMap[name])
+      var toPath = resolveSrc(context, assetPath)
+      attrsMap[name] = `/${toPath}`
+      copyAsset(assetPath, path.join(outputPath, toPath))
     }
   }
 }

lib/utils/resolve-src.js

@@ -0,0 +1,7 @@
+const relative = require('relative')
+const upath = require('upath')
+
+// 获取文件路径，去掉 src 和 node_modules 目录
+module.exports = function (...arv) {
+  return upath.normalize(relative(...arv)).replace(/^src\//, '').replace(/node_modules\//g, 'modules/')
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mpvue-loader",
-  "version": "1.1.0",
+  "version": "1.1.2-rc.3",
   "description": "mpvue single-file component loader for Webpack",
   "main": "index.js",
   "repository": {