@mpxjs/webpack-plugin 2.6.113 → 2.6.114-alpha.2

package/lib/tenon/processJSON.js

@@ -0,0 +1,361 @@
+const async = require('async')
+const path = require('path')
+const JSON5 = require('json5')
+const loaderUtils = require('loader-utils')
+const parseRequest = require('../utils/parse-request')
+const toPosix = require('../utils/to-posix')
+const addQuery = require('../utils/add-query')
+const parseComponent = require('../parser')
+const readJsonForSrc = require('../utils/read-json-for-src')
+const isUrlRequest = require('../utils/is-url-request')
+
+module.exports = function (json, options, rawCallback) {
+  const mode = options.mode
+  const env = options.env
+  const defs = options.defs
+  const loaderContext = options.loaderContext
+  const resolveMode = options.resolveMode
+  const pagesMap = options.pagesMap
+  const componentsMap = options.componentsMap
+  const pagesEntryMap = options.pagesEntryMap
+  const projectRoot = options.projectRoot
+  const pathHash = options.pathHash
+  const localPagesMap = {}
+  const localComponentsMap = {}
+  const buildInfo = loaderContext._module.buildInfo
+
+  let output = '/* json */\n'
+  let jsonObj = {}
+  let tabBarMap
+  let tabBarStr
+  const context = loaderContext.context
+
+  const emitWarning = (msg) => {
+    loaderContext.emitWarning(
+      new Error('[json processor][' + loaderContext.resource + ']: ' + msg)
+    )
+  }
+
+  const emitError = (msg) => {
+    this.emitError(
+      new Error('[json compiler][' + this.resource + ']: ' + msg)
+    )
+  }
+
+  // const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
+
+  const callback = (err) => {
+    return rawCallback(err, {
+      output,
+      jsonObj,
+      localPagesMap,
+      localComponentsMap,
+      tabBarMap,
+      tabBarStr
+    })
+  }
+
+  if (!json) {
+    return callback()
+  }
+  // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
+  try {
+    jsonObj = JSON5.parse(json.content)
+  } catch (e) {
+    return callback(e)
+  }
+
+  const fs = loaderContext._compiler.inputFileSystem
+
+  const resolve = (context, request, callback) => {
+    // const { queryObj } = parseRequest(request)
+    // todo delete. parseRequest 不会返回 context 属性
+    // context = queryObj.context || context
+    return loaderContext.resolve(context, request, callback)
+  }
+
+  // const defaultTabbar = {
+  //   borderStyle: 'black',
+  //   position: 'bottom',
+  //   custom: false,
+  //   isShow: true
+  // }
+
+  // const processTabBar = (tabBar, callback) => {
+  //   if (tabBar) {
+  //     tabBar = Object.assign({}, defaultTabbar, tabBar)
+  //     tabBarMap = {}
+  //     jsonObj.tabBar.list.forEach(({ pagePath }) => {
+  //       tabBarMap[pagePath] = true
+  //     })
+  //     tabBarStr = JSON.stringify(tabBar)
+  //     tabBarStr = tabBarStr.replace(/"(iconPath|selectedIconPath)":"([^"]+)"/g, function (matched, $1, $2) {
+  //       if (isUrlRequest($2, projectRoot)) {
+  //         return `"${$1}":require(${stringifyRequest(loaderUtils.urlToRequest($2, projectRoot))})`
+  //       }
+  //       return matched
+  //     })
+  //   }
+  //   callback()
+  // }
+
+  const processPackages = (packages, context, callback) => {
+    if (packages) {
+      async.forEach(packages, (packagePath, callback) => {
+        const parsed = parseRequest(packagePath)
+        const queryObj = parsed.queryObj
+        // readFile无法处理query
+        packagePath = parsed.resourcePath
+        async.waterfall([
+          (callback) => {
+            resolve(context, packagePath, (err, result) => {
+              callback(err, result)
+            })
+          },
+          (result, callback) => {
+            loaderContext.addDependency(result)
+            fs.readFile(result, (err, content) => {
+              if (err) return callback(err)
+              callback(err, result, content.toString('utf-8'))
+            })
+          },
+          (result, content, callback) => {
+            const filePath = result
+            const extName = path.extname(filePath)
+            if (extName === '.mpx' || extName === '.vue') {
+              const parts = parseComponent(content, {
+                filePath,
+                needMap: loaderContext.sourceMap,
+                mode,
+                defs,
+                env
+              })
+              const json = parts.json || {}
+              if (json.content) {
+                content = json.content
+              } else if (json.src) {
+                return readJsonForSrc(json.src, loaderContext, (content) => {
+                  callback(null, result, content)
+                })
+              }
+            }
+            callback(null, result, content)
+          },
+          (result, content, callback) => {
+            try {
+              content = JSON5.parse(content)
+            } catch (err) {
+              return callback(err)
+            }
+
+            const processSelfQueue = []
+            const context = path.dirname(result)
+
+            if (content.pages) {
+              let tarRoot = queryObj.root
+              if (tarRoot) {
+                delete queryObj.root
+                let subPackage = {
+                  tarRoot,
+                  pages: content.pages,
+                  ...queryObj
+                }
+                processSelfQueue.push((callback) => {
+                  processSubPackage(subPackage, context, callback)
+                })
+              } else {
+                processSelfQueue.push((callback) => {
+                  processPages(content.pages, '', '', context, callback)
+                })
+              }
+            }
+            if (content.packages) {
+              processSelfQueue.push((callback) => {
+                processPackages(content.packages, context, callback)
+              })
+            }
+            if (processSelfQueue.length) {
+              async.parallel(processSelfQueue, callback)
+            } else {
+              callback()
+            }
+          }
+        ], callback)
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const getPageName = (resourcePath, ext) => {
+    const baseName = path.basename(resourcePath, ext)
+    return path.join('pages', baseName + pathHash(resourcePath), baseName)
+  }
+
+  const processPages = (pages, srcRoot = '', tarRoot = '', context, callback) => {
+    if (pages) {
+      context = path.join(context, srcRoot)
+      async.forEach(pages, (page, callback) => {
+        let aliasPath = ''
+        if (typeof page !== 'string') {
+          aliasPath = page.path
+          page = page.src
+        }
+        if (!isUrlRequest(page, projectRoot)) return callback()
+        if (resolveMode === 'native') {
+          page = loaderUtils.urlToRequest(page, projectRoot)
+        }
+        resolve(context, page, (err, resource) => {
+          if (err) return callback(err)
+          const { resourcePath, queryObj } = parseRequest(resource)
+          const ext = path.extname(resourcePath)
+          // 获取pageName
+          let pageName
+          if (aliasPath) {
+            pageName = toPosix(path.join(tarRoot, aliasPath))
+            // 判断 key 存在重复情况直接报错
+            for (let key in pagesMap) {
+              if (pagesMap[key] === pageName && key !== resourcePath) {
+                emitError(`Current page [${resourcePath}] registers a conflict page path [${pageName}] with existed page [${key}], which is not allowed, please rename it!`)
+                return callback()
+              }
+            }
+          } else {
+            const relative = path.relative(context, resourcePath)
+            if (/^\./.test(relative)) {
+              // 如果当前page不存在于context中，对其进行重命名
+              pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+              emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+            } else {
+              pageName = toPosix(path.join(tarRoot, /^(.*?)(\.[^.]*)?$/.exec(relative)[1]))
+              // 如果当前page与已有page存在命名冲突，也进行重命名
+              for (let key in pagesMap) {
+                // 此处引入pagesEntryMap确保相同entry下路由路径重复注册才报错，不同entry下的路由路径重复则无影响
+                if (pagesMap[key] === pageName && key !== resourcePath && pagesEntryMap[key] === loaderContext.resourcePath) {
+                  const pageNameRaw = pageName
+                  pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+                  emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+                  break
+                }
+              }
+            }
+          }
+          if (pagesMap[resourcePath]) {
+            emitWarning(`Current page [${resourcePath}] which is imported from [${loaderContext.resourcePath}] has been registered in pagesMap already, it will be ignored, please check it and remove the redundant page declaration!`)
+            return callback()
+          }
+          buildInfo.pagesMap = buildInfo.pagesMap || {}
+          buildInfo.pagesMap[resourcePath] = pagesMap[resourcePath] = pageName
+          pagesEntryMap[resourcePath] = loaderContext.resourcePath
+          localPagesMap[pageName] = {
+            resource: addQuery(resource, { page: true }),
+            async: tarRoot || queryObj.async,
+            isFirst: queryObj.isFirst
+          }
+          callback()
+        })
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processSubPackage = (subPackage, context, callback) => {
+    if (subPackage) {
+      let tarRoot = subPackage.tarRoot || subPackage.root || ''
+      let srcRoot = subPackage.srcRoot || subPackage.root || ''
+      if (!tarRoot) return callback()
+      processPages(subPackage.pages, srcRoot, tarRoot, context, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processSubPackages = (subPackages, context, callback) => {
+    if (subPackages) {
+      async.forEach(subPackages, (subPackage, callback) => {
+        processSubPackage(subPackage, context, callback)
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processComponents = (components, context, callback) => {
+    if (components) {
+      async.forEachOf(components, (component, name, callback) => {
+        processComponent(component, name, context, callback)
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processComponent = (component, name, context, callback) => {
+    if (!isUrlRequest(component, projectRoot)) return callback()
+
+    if (resolveMode === 'native') {
+      component = loaderUtils.urlToRequest(component, projectRoot)
+    }
+
+    resolve(context, component, (err, resource) => {
+      if (err) return callback(err)
+      const { resourcePath, queryObj } = parseRequest(resource)
+      const parsed = path.parse(resourcePath)
+      const componentId = parsed.name + pathHash(resourcePath)
+
+      buildInfo.packageName = 'main'
+      buildInfo.componentsMap = buildInfo.componentsMap || {}
+      buildInfo.componentsMap[resourcePath] = componentsMap[resourcePath] = componentId
+
+      localComponentsMap[name] = {
+        resource: addQuery(resource, { component: true, componentId }),
+        async: queryObj.async
+      }
+      callback()
+    })
+  }
+
+  // const processGenerics = (generics, context, callback) => {
+  //   if (generics) {
+  //     async.forEachOf(generics, (generic, name, callback) => {
+  //       if (generic.default) {
+  //         processComponent(generic.default, `${name}default`, context, callback)
+  //       } else {
+  //         callback()
+  //       }
+  //     }, callback)
+  //   } else {
+  //     callback()
+  //   }
+  // }
+
+  async.parallel([
+    (callback) => {
+      if (jsonObj.pages && jsonObj.pages[0]) {
+        // 标记首页
+        if (typeof jsonObj.pages[0] !== 'string') {
+          jsonObj.pages[0].src = addQuery(jsonObj.pages[0].src, { isFirst: true })
+        } else {
+          jsonObj.pages[0] = addQuery(jsonObj.pages[0], { isFirst: true })
+        }
+      }
+      processPages(jsonObj.pages, '', '', context, callback)
+    },
+    (callback) => {
+      processComponents(jsonObj.usingComponents, context, callback)
+    },
+    (callback) => {
+      processPackages(jsonObj.packages, context, callback)
+    },
+    (callback) => {
+      processSubPackages(jsonObj.subPackages || jsonObj.subpackages, context, callback)
+    }
+    // (callback) => {
+    //   processGenerics(jsonObj.componentGenerics, context, callback)
+    // },
+    // (callback) => {
+    //   processTabBar(jsonObj.tabBar, callback)
+    // }
+  ], callback)
+}

package/lib/tenon/processScript.js

@@ -0,0 +1,260 @@
+const genComponentTag = require('../utils/gen-component-tag')
+const loaderUtils = require('loader-utils')
+const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
+const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin')
+const AddEntryDependency = require('../dependency/AddEntryDependency')
+const builtInLoaderPath = normalize.lib('built-in-loader')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+
+function shallowStringify (obj) {
+  let arr = []
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      let value = obj[key]
+      if (Array.isArray(value)) {
+        value = `[${value.join(',')}]`
+      }
+      arr.push(`'${key}':${value}`)
+    }
+  }
+  return `{${arr.join(',')}}`
+}
+
+let entryDeps = new Set()
+
+let callbacked = false
+let cacheCallback
+
+module.exports = function (script, options, callback) {
+  const ctorType = options.ctorType
+  const builtInComponentsMap = options.builtInComponentsMap
+  const localComponentsMap = options.localComponentsMap
+  const localPagesMap = options.localPagesMap
+  const srcMode = options.srcMode
+  const loaderContext = options.loaderContext
+  const isProduction = options.isProduction
+  const componentId = options.componentId
+  const getRequireForSrc = options.getRequireForSrc
+  // const i18n = options.i18n
+  const jsonConfig = options.jsonConfig
+  // const tabBar = jsonConfig.tabBar
+  const tabBarMap = options.tabBarMap
+  // const tabBarStr = options.tabBarStr
+  const genericsInfo = options.genericsInfo
+  const componentGenerics = options.componentGenerics
+  const forceDisableBuiltInLoader = options.forceDisableBuiltInLoader
+
+  // add entry
+  const checkEntryDeps = (callback) => {
+    callback = callback || cacheCallback
+    if (callback && entryDeps.size === 0) {
+      callback()
+    } else {
+      cacheCallback = callback
+    }
+  }
+
+  const addEntryDep = (context, resource, name) => {
+    // 如果loader已经回调，就不再添加entry
+    if (callbacked) return
+    const dep = SingleEntryPlugin.createDependency(resource, name)
+    entryDeps.add(dep)
+    const virtualModule = new AddEntryDependency({
+      context: context._compiler.context,
+      dep,
+      name
+    })
+    /* eslint-disable camelcase */
+    context._module.__has_tenon_entry = true
+    context._module.addDependency(virtualModule)
+    entryDeps.delete(dep)
+    checkEntryDeps()
+  }
+
+  // const emitWarning = (msg) => {
+  //   loaderContext.emitWarning(
+  //     new Error('[script processor][' + loaderContext.resource + ']: ' + msg)
+  //   )
+  // }
+
+  const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
+  // let tabBarPagesMap = {}
+  // if (tabBar && tabBarMap) {
+  //   // 挂载tabBar组件
+  //   const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { component: true }))
+  //   tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
+  //   // 挂载tabBar页面
+  //   Object.keys(tabBarMap).forEach((pagePath) => {
+  //     const pageCfg = localPagesMap[pagePath]
+  //     if (pageCfg) {
+  //       const pageRequest = stringifyRequest(pageCfg.resource)
+  //       if (pageCfg.async) {
+  //         tabBarPagesMap[pagePath] = `()=>import(${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+  //       } else {
+  //         tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+  //       }
+  //     } else {
+  //       emitWarning(`TabBar page path ${pagePath} is not exist in local page map, please check!`)
+  //     }
+  //   })
+  // }
+
+  let output = '/* script */\n'
+
+  let scriptSrcMode = srcMode
+  if (script) {
+    scriptSrcMode = script.mode || scriptSrcMode
+  } else {
+    script = {
+      tag: 'script',
+      content: ''
+    }
+    switch (ctorType) {
+      case 'app':
+        script.content = 'import {createApp} from "@mpxjs/core"\n' +
+          'createApp({})\n'
+        break
+      case 'page':
+        script.content = 'import {createPage} from "@mpxjs/core"\n' +
+          'createPage({})\n'
+        break
+      case 'component':
+        script.content = 'import {createComponent} from "@mpxjs/core"\n' +
+          'createComponent({})\n'
+    }
+  }
+  output += genComponentTag(script, {
+    attrs (script) {
+      const attrs = Object.assign({}, script.attrs)
+      // src改为内联require，删除
+      delete attrs.src
+      return attrs
+    },
+    content (script) {
+      let content = `\n  import processOption, { getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
+      // add import
+      if (ctorType === 'app') {
+        content += `  import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
+  import Vue from 'vue'
+  const VueRouter = {}
+  global.getApp = function(){}
+  global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
+  global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
+  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}\n
+  global.currentPagePath = ""\n`
+      }
+      // 注入wxs模块
+      // content += '  const wxsModules = {}\n'
+      // if (options.wxsModuleMap) {
+      //   Object.keys(options.wxsModuleMap).forEach((module) => {
+      //     const src = loaderUtils.urlToRequest(options.wxsModuleMap[module], options.projectRoot)
+      //     const expression = `require(${stringifyRequest(src)})`
+      //     content += `  wxsModules.${module} = ${expression}\n`
+      //   })
+      // }
+      let firstPage = ''
+      const pagesMap = {}
+      const componentsMap = {}
+      Object.keys(localPagesMap).forEach((pagePath) => {
+        const pageCfg = localPagesMap[pagePath]
+        // const pageRequest = stringifyRequest(pageCfg.resource)
+        addEntryDep(loaderContext, addQuery(pageCfg.resource, { tenon: true }), pagePath)
+        // addEntrySafely(loaderContext, addQuery(pageCfg.resource, { tenon: true }), pagePath)
+        // loaderContext.resolve(loaderContext._compiler.context, addQuery(pageCfg.resource, { tenon: true }), (err, resource) => {
+        //   if(err) return callback(err)
+
+        // })
+        // if (pageCfg.async) {
+        //   pagesMap[pagePath] = `()=>import(${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+        // } else {
+        //   // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
+        //   pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+        // }
+
+        // if (pageCfg.isFirst) {
+        //   firstPage = pagePath
+        // }
+      })
+
+      Object.keys(localComponentsMap).forEach((componentName) => {
+        const componentCfg = localComponentsMap[componentName]
+        const componentRequest = stringifyRequest(componentCfg.resource)
+        if (componentCfg.async) {
+          componentsMap[componentName] = `()=>import(${componentRequest}).then(res => getComponent(res))`
+        } else {
+          componentsMap[componentName] = `getComponent(require(${componentRequest}))`
+        }
+      })
+
+      Object.keys(builtInComponentsMap).forEach((componentName) => {
+        const componentCfg = builtInComponentsMap[componentName]
+        const componentRequest = forceDisableBuiltInLoader ? stringifyRequest(componentCfg.resource) : stringifyRequest('builtInComponent.vue!=!' + builtInLoaderPath + '!' + componentCfg.resource)
+        componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
+      })
+
+      content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+      if (!isProduction) {
+        content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
+      }
+      // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
+      content += script.src
+        ? (getRequireForSrc('script', script) + '\n')
+        : (script.content + '\n') + '\n'
+      // createApp/Page/Component执行完成后立刻获取当前的option并暂存
+      content += `  const currentOption = global.currentOption\n`
+      // 获取pageConfig
+      const pageConfig = {}
+      if (ctorType === 'page') {
+        // 存储当前page路径
+        content += `  global.currentPagePath = ${JSON.stringify(loaderContext._compilation.__mpx__.pagesMap[loaderContext.resourcePath])}\n`
+        const uselessOptions = new Set([
+          'usingComponents',
+          'style',
+          'singlePage'
+        ])
+        Object.keys(jsonConfig)
+          .filter(key => !uselessOptions.has(key))
+          .forEach(key => {
+            pageConfig[key] = jsonConfig[key]
+          })
+      }
+
+      // 配置平台转换通过createFactory在core中convertor中定义和进行
+      // 通过processOption进行组件注册和路由注入
+      content += `  export default processOption(
+    currentOption,
+    ${JSON.stringify(ctorType)},
+    ${JSON.stringify(firstPage)},
+    ${JSON.stringify(componentId)},
+    ${JSON.stringify(pageConfig)},
+    // @ts-ignore
+    ${shallowStringify(pagesMap)},
+    // @ts-ignore
+    ${shallowStringify(componentsMap)},
+    ${JSON.stringify(tabBarMap)},
+    ${JSON.stringify(componentGenerics)},
+    ${JSON.stringify(genericsInfo)},
+    undefined`
+
+      //   if (ctorType === 'app') {
+      //     content += `,
+      // Vue,
+      // VueRouter`
+      //     if (i18n) {
+      //       content += `,
+      // i18n`
+      //     }
+      //   }
+      content += `\n  )\n`
+      return content
+    }
+  })
+  output += '\n'
+  checkEntryDeps(() => {
+    callbacked = true
+    callback(null, {
+      output
+    })
+  })
+}

package/lib/tenon/processStyles.js

@@ -0,0 +1,21 @@
+const genComponentTag = require('../utils/gen-component-tag')
+
+module.exports = function (styles, options, callback) {
+  let output = '/* styles */\n'
+  if (styles.length) {
+    styles.forEach((style) => {
+      output += genComponentTag(style, {
+        attrs (style) {
+          const attrs = Object.assign({}, style.attrs)
+          if (options.autoScope) attrs.scoped = true
+          return attrs
+        }
+      })
+      output += '\n'
+    })
+    output += '\n'
+  }
+  callback(null, {
+    output
+  })
+}