Merge pull request #5 from mpvue/develop

Develop

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)

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

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 `<import src="../../components/${templateName}" /><template is="${templateName}" data="{{ ...$root['0'], $root }}"/>`
+function genPageWxml (templateName, src) {
+  return `<import src="${getPathPrefix(src)}components/${templateName}" /><template is="${templateName}" data="{{ ...$root['0'], $root }}"/>`
 }
 
 module.exports = { genScript, genStyle, genPageWxml }

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
+}

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",