diff --git a/lib/loader.js b/lib/loader.js
index 49d90da..4cb2135 100644
--- a/lib/loader.js
+++ b/lib/loader.js
@@ -45,24 +45,10 @@ function getRawRequest (context, excludedPreLoaders) {
})
}
-const mpPages = []
-const mpInfo = {}
-
module.exports = function (content) {
// for mp
// 针对 entry 的 main.js 处理 page 和 app 的入口文件和配置等
const mpOptions = loaderUtils.getOptions(this) || {}
- if (!mpPages.length) {
- const { entry = {}} = this.options
- Object.keys(entry).forEach(k => {
- mpInfo[entry[k]] = k
- if (k !== 'app') {
- mpPages.push(`pages/${k}/${k}`)
- }
- })
- }
- mpOptions.pages = mpPages
- mpOptions.mpInfo = mpInfo
if (mpOptions.checkMPEntry) {
return compileMP.call(this, content, mpOptions)
diff --git a/lib/mp-compiler/index.js b/lib/mp-compiler/index.js
index 39e82f7..1ca8536 100644
--- a/lib/mp-compiler/index.js
+++ b/lib/mp-compiler/index.js
@@ -1,29 +1,29 @@
// for mp
const compiler = require('mpvue-template-compiler')
-const htmlBeautify = require('js-beautify').html
-const path = require('path')
const babel = require('babel-core')
const { parseConfig, parseComponentsDeps } = require('./parse')
const { genScript, genStyle, genPageWxml } = require('./templates')
-const { cacheFileInfo, getFileInfo, getCompNameBySrc, resolveTarget, covertCCVar, cacheSlots, getSlots } = require('./util')
-
-const htmlBeautifyOptions = {
- wrap_line_length: '80',
- indent_size: 2,
- preserve_newlines: true,
- max_preserve_newlines: 0,
- e4x: true,
- unformatted: ['a', 'span', 'img', 'code', 'pre', 'sub', 'sup', 'em', 'strong', 'b', 'i', 'u', 'strike', 'big', 'small', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
-}
+const {
+ cacheFileInfo,
+ getFileInfo,
+ getCompNameBySrc,
+ resolveTarget,
+ covertCCVar,
+ cacheSlots,
+ getSlots,
+ htmlBeautify,
+ getBabelrc,
+ getPageSrc
+} = require('./util')
function createSlotsWxml (emitFile, slots) {
cacheSlots(slots)
const allSlots = getSlots()
const content = Object.keys(allSlots).map(v => allSlots[v].code).join('\n')
if (content.trim()) {
- emitFile('components/slots.wxml', htmlBeautify(content, htmlBeautifyOptions))
+ emitFile('components/slots.wxml', htmlBeautify(content))
}
}
@@ -47,7 +47,7 @@ function genComponentWxml (compiled, options, emitFile, emitError, emitWarning)
mpTips.map(e => ` - ${e}`).join('\n') + '\n'
)
}
- return htmlBeautify(wxmlCodeStr, htmlBeautifyOptions)
+ return htmlBeautify(wxmlCodeStr)
}
function createWxml (emitWarning, emitError, emitFile, resourcePath, rootComponent, compiled, html) {
@@ -63,7 +63,7 @@ function createWxml (emitWarning, emitError, emitFile, resourcePath, rootCompone
if (rootComponent) {
const componentName = getCompNameBySrc(rootComponent)
- wxmlContent = genPageWxml(componentName)
+ wxmlContent = genPageWxml(componentName, src)
wxmlSrc = src
} else {
// TODO, 这儿传 options 进去
@@ -91,8 +91,8 @@ function compileWxml (compiled, html) {
// 针对 .vue 单文件的脚本逻辑的处理
// 处理出当前单文件组件的子组件依赖
-function compileMPScript (script, optioins, moduleId) {
- const babelrc = optioins.globalBabelrc ? optioins.globalBabelrc : path.resolve('./.babelrc')
+function compileMPScript (script, mpOptioins, moduleId) {
+ const babelrc = getBabelrc(mpOptioins.globalBabelrc)
const { metadata } = babel.transform(script.content, { extends: babelrc, plugins: [parseComponentsDeps] })
// metadata: importsMap, components
@@ -124,7 +124,7 @@ function compileMPScript (script, optioins, moduleId) {
components.isCompleted = true
}
- const fileInfo = resolveTarget(this.resourcePath, optioins.mpInfo)
+ const fileInfo = resolveTarget(this.resourcePath, this.options.entry)
cacheFileInfo(this.resourcePath, fileInfo, { importsMap, components, moduleId })
return script
@@ -135,16 +135,16 @@ function compileMPScript (script, optioins, moduleId) {
const startPageReg = /^\^/
-function compileMP (content, optioins) {
- const { resourcePath, emitError, emitFile, emitWarning, resolve, context } = this
+function compileMP (content, mpOptioins) {
+ const { resourcePath, emitError, emitFile, emitWarning, resolve, context, options } = this
- const babelrc = optioins.globalBabelrc ? optioins.globalBabelrc : path.resolve('./.babelrc')
+ const babelrc = getBabelrc(mpOptioins.globalBabelrc)
const { metadata } = babel.transform(content, { extends: babelrc, plugins: [parseConfig] })
// metadata: config
const { config, rootComponent } = metadata
- const fileInfo = resolveTarget(resourcePath, optioins.mpInfo)
+ const fileInfo = resolveTarget(resourcePath, options.entry)
cacheFileInfo(resourcePath, fileInfo)
const { src, name, isApp, isPage } = fileInfo
@@ -155,7 +155,7 @@ function compileMP (content, optioins) {
// 只有 app 才处理 pages
if (isApp) {
- const pages = (configObj.pages || []).concat(optioins.pages)
+ const pages = Object.keys(options.entry).concat(configObj.pages).filter(v => v && v !== 'app').map(getPageSrc)
// ^ 开头的放在第一个
const startPageIndex = pages.findIndex(v => startPageReg.test(v))
@@ -170,10 +170,10 @@ function compileMP (content, optioins) {
}
// 生成入口 js
- emitFile(`${src}.js`, genScript(name, isPage))
+ emitFile(`${src}.js`, genScript(name, isPage, src))
// 生成入口 wxss
- emitFile(`${src}.wxss`, genStyle(name, isPage))
+ emitFile(`${src}.wxss`, genStyle(name, isPage, src))
// 这儿应该异步在所有的模块都清晰后再生成
// 生成入口 wxml
diff --git a/lib/mp-compiler/templates.js b/lib/mp-compiler/templates.js
index ff59787..a69c707 100644
--- a/lib/mp-compiler/templates.js
+++ b/lib/mp-compiler/templates.js
@@ -1,20 +1,22 @@
-function genScript (name, isPage) {
- const prefix = isPage ? '../..' : '.'
+const { getPathPrefix } = require('./util')
+
+function genScript (name, isPage, src) {
+ const prefix = isPage ? getPathPrefix(src) : '.'
return `
- import '${prefix}/static/js/manifest'
- import '${prefix}/static/js/vendor'
- import '${prefix}/static/js/${name}'
- `
+require('${prefix}/static/js/manifest')
+require('${prefix}/static/js/vendor')
+require('${prefix}/static/js/${name}')
+`
}
-function genStyle (name, isPage) {
- const prefix = isPage ? '../..' : '.'
+function genStyle (name, isPage, src) {
+ const prefix = isPage ? getPathPrefix(src) : '.'
return `@import "${prefix}/static/css/${name}.wxss";`
}
-function genPageWxml (templateName) {
- return ``
+function genPageWxml (templateName, src) {
+ return ``
}
module.exports = { genScript, genStyle, genPageWxml }
diff --git a/lib/mp-compiler/util.js b/lib/mp-compiler/util.js
index 2e39bfa..b4caea6 100644
--- a/lib/mp-compiler/util.js
+++ b/lib/mp-compiler/util.js
@@ -1,4 +1,5 @@
const path = require('path')
+const fs = require('fs')
const pagesNameMap = Object.create(null)
@@ -28,17 +29,32 @@ function getNameByFile (dir) {
return path.parse(dir).name
}
+function getKeyFromObjByVal (obj, val) {
+ for (const i in obj) {
+ if (obj[i] === val) {
+ return i
+ }
+ }
+}
+
+function getPageSrc (pageName) {
+ return path.parse(pageName).dir ? pageName : `pages/${pageName}/${pageName}`
+}
+
+// TODO, 这儿应该按照 main.js 导出的 config 来进行 isApp isPage 识别,暂时不改,下次大版本升级 loader 的时候改
// 计算目标输出的路径等信息
// pageType 默认为 null === component, 目前共 3 种类型: component, app, page
-function resolveTarget (dir, mpInfo = {}) {
- const originName = mpInfo[dir]
+function resolveTarget (dir, entry) {
+ const originName = getKeyFromObjByVal(entry, dir)
const name = originName || getNameByFile(dir)
const isApp = name === 'app'
const pageType = isApp ? 'app' : (originName ? 'page' : 'component')
const isPage = pageType === 'page'
- // components 目录暂时无用
- const src = isApp ? 'app' : isPage ? `pages/${name}/${name}` : `components/${name}`
+ let src = 'app'
+ if (isPage) {
+ src = getPageSrc(name)
+ }
return { pageType, src, name, isApp, isPage }
}
@@ -63,4 +79,51 @@ function getSlots (slotName) {
return slotName ? slotsCache[slotName] : slotsCache
}
-module.exports = { cacheFileInfo, getFileInfo, getCompNameBySrc, resolveTarget, covertCCVar, cacheSlots, getSlots }
+// 包大小优化: build 模式不需要美化 wxml
+const jsBeautify = require('js-beautify')
+const isProduction = process.env.NODE_ENV === 'production'
+function htmlBeautify (content) {
+ const htmlBeautifyOptions = {
+ // wrap_line_length: '80',
+ indent_size: 2,
+ preserve_newlines: false,
+ max_preserve_newlines: 0,
+ e4x: true,
+ unformatted: ['a', 'span', 'img', 'code', 'pre', 'sub', 'sup', 'em', 'strong', 'b', 'i', 'u', 'strike', 'big', 'small', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+ }
+
+ if (isProduction) {
+ return content
+ }
+ return jsBeautify.html(content, htmlBeautifyOptions)
+}
+
+function getBabelrc (src) {
+ if (src && fs.existsSync(src)) {
+ return src
+ }
+ const curBabelRc = path.resolve('./.babelrc')
+ if (fs.existsSync(curBabelRc)) {
+ return curBabelRc
+ }
+ return ''
+}
+
+function getPathPrefix (src) {
+ const length = src.split('/').length - 1
+ return `${'../'.repeat(length)}`
+}
+
+module.exports = {
+ cacheFileInfo,
+ getFileInfo,
+ getCompNameBySrc,
+ resolveTarget,
+ covertCCVar,
+ cacheSlots,
+ getSlots,
+ htmlBeautify,
+ getBabelrc,
+ getPathPrefix,
+ getPageSrc
+}
diff --git a/package.json b/package.json
index 08ad212..6524888 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mpvue-loader",
- "version": "1.0.2",
+ "version": "1.0.6",
"description": "mpvue single-file component loader for Webpack",
"main": "index.js",
"repository": {
@@ -67,7 +67,7 @@
},
"peerDependencies": {
"css-loader": "*",
- "mpvue-template-compiler": "^1.0.1"
+ "mpvue-template-compiler": "^1.0.5"
},
"devDependencies": {
"babel-core": "^6.25.0",
@@ -90,7 +90,7 @@
"marked": "^0.3.6",
"memory-fs": "^0.4.1",
"mkdirp": "^0.5.1",
- "mpvue-template-compiler": "^1.0.1",
+ "mpvue-template-compiler": "^1.0.5",
"mocha": "^3.4.2",
"node-libs-browser": "^2.0.0",
"normalize-newline": "^3.0.0",