diff --git a/lib/mp-compiler/index.js b/lib/mp-compiler/index.js index 753d8d3..2938960 100644 --- a/lib/mp-compiler/index.js +++ b/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') @@ -27,10 +26,9 @@ let slotsHookAdded = false // 调用 compiler 生成 wxml function genComponentWxml (compiled, options, emitFile, emitError, emitWarning) { - options.components['slots'] = { src: 'slots', name: 'slots' } + options.components['slots'] = { src: '/components/slots', name: 'slots' } const { code: wxmlCodeStr, compiled: cp, slots, importCode } = compiler.compileToWxml(compiled, options) const { mpErrors, mpTips } = cp - // 缓存 slots,延迟编译 cacheSlots(slots, importCode) @@ -51,7 +49,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 +116,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 +137,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 +182,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 +219,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() }) diff --git a/lib/mp-compiler/util.js b/lib/mp-compiler/util.js index 4bfeb42..26aa5b1 100644 --- a/lib/mp-compiler/util.js +++ b/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] } @@ -88,7 +86,7 @@ function cacheSlots (slots, importCode) { importCodeCache[importCode] = importCode } function getSlots () { - const allImportCode = Object.keys(importCodeCache).map(v => importCodeCache[v]).join('\n').replace('', '') + const allImportCode = Object.keys(importCodeCache).map(v => importCodeCache[v]).join('\n').replace('', '') const allSlots = Object.keys(slotsCache).map(v => slotsCache[v].code).join('\n') return allImportCode + allSlots } @@ -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 } diff --git a/lib/template-compiler/modules/transform-require.js b/lib/template-compiler/modules/transform-require.js index 960d72f..3a3effe 100644 --- a/lib/template-compiler/modules/transform-require.js +++ b/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)) } } } diff --git a/lib/utils/resolve-src.js b/lib/utils/resolve-src.js new file mode 100644 index 0000000..712aeae --- /dev/null +++ b/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/') +} diff --git a/package.json b/package.json index 5db4bf6..77f7435 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mpvue-loader", - "version": "1.1.0", + "version": "1.1.2-rc.5", "description": "mpvue single-file component loader for Webpack", "main": "index.js", "repository": {