@mpxjs/webpack-plugin 2.6.114-alpha.6 → 2.6.114-alpha.9

package/lib/tenon/processScript.js

@@ -2,10 +2,10 @@ 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')
+const createJSONHelper = require('../json-compiler/helper')
+const async = require('async')
 
 function shallowStringify (obj) {
   let arr = []
@@ -21,11 +21,6 @@ function shallowStringify (obj) {
   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
@@ -35,7 +30,6 @@ module.exports = function (script, options, callback) {
   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
@@ -46,37 +40,52 @@ module.exports = function (script, options, callback) {
   const forceDisableBuiltInLoader = options.forceDisableBuiltInLoader
 
   // add entry
-  const checkEntryDeps = (callback) => {
-    callback = callback || cacheCallback
-    if (callback && entryDeps.size === 0) {
-      callback()
-    } else {
-      cacheCallback = callback
-    }
+  // 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('[tenon script processor][' + loaderContext.resource + ']: ' + msg)
+    )
   }
 
-  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 emitError = (msg) => {
+    loaderContext.emitError(
+      new Error('[tenon script processor][' + loaderContext.resource + ']: ' + msg)
+    )
   }
 
-  // const emitWarning = (msg) => {
-  //   loaderContext.emitWarning(
-  //     new Error('[script processor][' + loaderContext.resource + ']: ' + msg)
-  //   )
-  // }
+  const {
+    processPage,
+    processDynamicEntry
+  } = createJSONHelper({
+    loaderContext,
+    emitWarning,
+    emitError
+  })
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   // let tabBarPagesMap = {}
@@ -156,26 +165,6 @@ module.exports = function (script, options, callback) {
       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]
@@ -199,7 +188,7 @@ module.exports = function (script, options, callback) {
       }
       // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
       content += script.src
-        ? (getRequireForSrc('script', script) + '\n')
+        ? `require(${stringifyRequest(script.src)})\n`
         : (script.content + '\n') + '\n'
       // createApp/Page/Component执行完成后立刻获取当前的option并暂存
       content += `  const currentOption = global.currentOption\n`
@@ -246,13 +235,25 @@ module.exports = function (script, options, callback) {
       // i18n`
       //     }
       //   }
-      content += `\n  )\n`
+      content += `\n  )\n__dynamic_page_slot__\n`
       return content
     }
   })
   output += '\n'
-  checkEntryDeps(() => {
-    callbacked = true
+  // 处理pages
+  const pageSet = new Set()
+  let dynamicPageStr = ''
+  async.each(localPagesMap, (pageCfg, callback) => {
+    if (typeof pageCfg !== 'string') pageCfg.src = addQuery(pageCfg.src, { tenon: true })
+    processPage(pageCfg, loaderContext.context, '', (err, entry, { key }) => {
+      if (err) return callback()
+      if (pageSet.has(key)) return callback()
+      pageSet.add(key)
+      dynamicPageStr += `\n"${entry}"`
+      callback()
+    })
+  }, () => {
+    output = output.replace('__dynamic_page_slot__', processDynamicEntry(dynamicPageStr) || '')
     callback(null, {
       output
     })

package/lib/url-loader.js

@@ -1,51 +1,33 @@
 const loaderUtils = require('loader-utils')
 const mime = require('mime')
+const parseRequest = require('./utils/parse-request')
 const getOptions = loaderUtils.getOptions
-const parseQuery = loaderUtils.parseQuery
 
 function isStyleRequest (request) {
-  let elements = request.replace(/^-?!+/, '').replace(/!!+/g, '!').split('!')
-  elements.pop()
-  for (let i = 0; i < elements.length; i++) {
-    let element = elements[i]
-    let queryString = '?'
-    let loaderString = element
-    let idx = element.indexOf('?')
-    if (idx >= 0) {
-      queryString = element.substr(idx)
-      loaderString = element.substr(0, idx)
-    }
-    if (/css-loader/.test(loaderString)) {
-      return true
-    }
-    if (/content-loader/.test(loaderString)) {
-      let query = parseQuery(queryString)
-      if (query.type === 'styles') {
-        return true
-      }
-    }
-  }
+  const { loaderString, queryObj } = parseRequest(request)
+  if (queryObj.type === 'styles') return true
+  if (/(css-loader|wxss\/loader)/.test(loaderString)) return true
   return false
 }
 
 module.exports = function (src) {
   let transBase64 = false
   const options = Object.assign({}, getOptions(this))
-  const filePath = this.resourcePath
-  const mimetype = options.mimetype || mime.getType(filePath)
-  const issuer = this._module.issuer
+  const { resourcePath, queryObj } = parseRequest(this.resource)
+  const mimetype = options.mimetype || mime.getType(resourcePath)
+  const moduleGraph = this._compilation.moduleGraph
+  const issuer = moduleGraph.getIssuer(this._module)
   const publicPathScope = options.publicPathScope === 'all' ? 'all' : 'styleOnly'
-  const queryOption = parseQuery(this.resourceQuery || '?')
   const limit = options.limit
-  const useLocal = !limit || src.length < limit || queryOption.useLocal
-  const isStyle = (issuer && issuer.request && isStyleRequest(issuer.request)) || queryOption.isStyle
+  const useLocal = !limit || src.length < limit || queryObj.useLocal
+  const isStyle = (issuer && issuer.request && isStyleRequest(issuer.request)) || queryObj.isStyle
 
   if (isStyle) {
     if (options.publicPath) {
       if (useLocal) {
         transBase64 = true
       }
-      if (queryOption.fallback) {
+      if (queryObj.fallback) {
         transBase64 = false
       }
     } else {

package/lib/utils/add-query.js

@@ -3,7 +3,7 @@ const stringifyQuery = require('./stringify-query')
 const type = require('./type')
 
 // 默认为非强行覆盖原query，如需强行覆盖传递force为true
-module.exports = function (request, data = {}, force, removeKeys) {
+module.exports = function addQuery (request, data = {}, force, removeKeys) {
   const { rawResourcePath: resourcePath, loaderString, queryObj: queryObjRaw } = parseRequest(request)
   const queryObj = Object.assign({}, queryObjRaw)
   if (force) {

package/lib/utils/const.js

@@ -0,0 +1,10 @@
+module.exports = {
+  MPX_PROCESSED_FLAG: 'mpx_processed',
+  MPX_DISABLE_EXTRACTOR_CACHE: 'mpx_disable_extractor_cache',
+  DEFAULT_RESULT_SOURCE: '',
+  RESOLVE_IGNORED_ERR: new Error('Resolve ignored!'),
+  JSON_JS_EXT: '.json.js',
+  MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
+  MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
+  MPX_CURRENT_CHUNK: 'mpx_current_chunk'
+}

package/lib/utils/emit-file.js

@@ -0,0 +1,10 @@
+const { RawSource } = require('webpack').sources
+
+module.exports = (module, name, content, sourceMap, assetInfo) => {
+  if (!module.buildInfo.assets) {
+    module.buildInfo.assets = Object.create(null)
+    module.buildInfo.assetsInfo = new Map()
+  }
+  module.buildInfo.assets[name] = new RawSource(content)
+  module.buildInfo.assetsInfo.set(name, assetInfo)
+}

package/lib/utils/eval-json-js.js

@@ -0,0 +1,31 @@
+const path = require('path')
+
+module.exports = function evalJSONJS (source, filename, loaderContext) {
+  if (!loaderContext._compiler) return {}
+  const fs = loaderContext._compiler.inputFileSystem
+  const defs = loaderContext.getMpx().defs
+  const defKeys = Object.keys(defs)
+  const defValues = defKeys.map((key) => {
+    return defs[key]
+  })
+  const dirname = path.dirname(filename)
+  // eslint-disable-next-line no-new-func
+  const func = new Function('module', 'exports', 'require', '__filename', '__dirname', ...defKeys, source)
+  const module = {
+    exports: {}
+  }
+  // 此处采用readFileSync+evalJSONJS而不直接使用require获取依赖内容有两个原因：
+  // 1. 支持依赖中正常访问defs变量
+  // 2. 避免对应的依赖文件被作为buildDependencies
+  func(module, module.exports, function (request) {
+    if (request.startsWith('.')) {
+      request = path.join(dirname, request)
+    }
+    const filename = require.resolve(request)
+    loaderContext.addDependency(filename)
+    const source = fs.readFileSync(filename).toString('utf-8')
+    return evalJSONJS(source, filename, loaderContext)
+  }, filename, dirname, ...defValues)
+
+  return module.exports
+}

package/lib/utils/get-entry-name.js

@@ -0,0 +1,13 @@
+module.exports = function (loaderContext) {
+  if (!loaderContext._compilation) return ''
+  const moduleGraph = loaderContext._compilation.moduleGraph
+  let entryName = ''
+  for (const [name, { dependencies }] of loaderContext._compilation.entries) {
+    const entryModule = moduleGraph.getModule(dependencies[0])
+    if (entryModule.resource === loaderContext.resource) {
+      entryName = name
+      break
+    }
+  }
+  return entryName
+}

package/lib/utils/get-json-content.js

@@ -0,0 +1,42 @@
+const parseRequest = require('./parse-request')
+const evalJSONJS = require('./eval-json-js')
+const resolve = require('./resolve')
+const async = require('async')
+const { JSON_JS_EXT } = require('./const')
+
+module.exports = function getJSONContent (json, loaderContext, callback) {
+  if (!loaderContext._compiler) return callback(null, '{}')
+  const fs = loaderContext._compiler.inputFileSystem
+  async.waterfall([
+    (callback) => {
+      if (json.src) {
+        resolve(loaderContext.context, json.src, loaderContext, (err, result) => {
+          if (err) return callback(err)
+          const { rawResourcePath: resourcePath } = parseRequest(result)
+          fs.readFile(resourcePath, (err, content) => {
+            if (err) return callback(err)
+            callback(null, {
+              content: content.toString('utf-8'),
+              useJSONJS: json.useJSONJS || resourcePath.endsWith(JSON_JS_EXT),
+              filename: resourcePath
+
+            })
+          })
+        })
+      } else {
+        callback(null, {
+          content: json.content,
+          useJSONJS: json.useJSONJS,
+          filename: loaderContext.resourcePath
+        })
+      }
+    },
+    ({ content, useJSONJS, filename }, callback) => {
+      if (!content) return callback(null, '{}')
+      if (useJSONJS) {
+        content = JSON.stringify(evalJSONJS(content, filename, loaderContext))
+      }
+      callback(null, content)
+    }
+  ], callback)
+}

package/lib/utils/get-relative-path.js

@@ -1,8 +1,9 @@
 function getRelativePath (source, target) {
-  source = source && source.replace(/\/[^/]*$/, ''); // get dirname
   // make sure source and target are absolute path
   /^\//.test(source) || (source = '/' + source);
   /^\//.test(target) || (target = '/' + target)
+
+  source = source && source.replace(/\/[^/]*$/, '') // get dirname
   // check if source or target is root path
   let sourceArr = source.split('/').filter((item, index) => index !== 0 && !!item)
   let targetArr = target.split('/').filter((item, index) => index !== 0 && !!item)

package/lib/utils/is-url-request.js

@@ -1,7 +1,7 @@
 const isUrlRequestRaw = require('loader-utils').isUrlRequest
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
 
-module.exports = function isUrlRequest (url, root) {
+module.exports = function isUrlRequest (url, root, externals) {
   // 对于非字符串或空字符串url直接返回false
   if (!url || typeof url !== 'string') return false
   // 对于@开头且后续字符串为合法标识符的情况也返回false，识别为theme变量
@@ -9,5 +9,14 @@ module.exports = function isUrlRequest (url, root) {
   if (/^.+:\/\//.test(url)) return false
   // 对于url中存在Mustache插值的情况也返回false
   if (tagRE.test(url)) return false
+  // url存在于externals中也返回false
+  if (externals && externals.some((external) => {
+    if (typeof external === 'string') {
+      return external === url
+    } else if (external instanceof RegExp) {
+      return external.test(url)
+    }
+    return false
+  })) return false
   return isUrlRequestRaw(url, root)
 }

package/lib/utils/match-condition.js

@@ -45,4 +45,7 @@ const matchCondition = (resourcePath, condition = {}) => {
   return matched
 }
 
-module.exports = matchCondition
+module.exports = {
+  matchCondition,
+  normalizeCondition
+}

package/lib/utils/normalize.js

@@ -1,16 +1,5 @@
-const fs = require('fs')
-const path = require('path')
+// const path = require('path')
 
-exports.lib = file => path.resolve(__dirname, '../', file)
-
-exports.dep = dep => {
-  if (
-    fs.existsSync(path.resolve(__dirname, '../../node_modules', dep))
-  ) {
-    // npm 2 or npm linked
-    return '@mpxjs/webpack-plugin/node_modules/' + dep
-  } else {
-    // npm 3
-    return dep
-  }
-}
+// exports.lib = file => path.resolve(__dirname, '../', file)
+// support npm link debug
+exports.lib = file => '@mpxjs/webpack-plugin/lib/' + file

package/lib/utils/parse-request.js

@@ -4,7 +4,7 @@ const path = require('path')
 
 function genQueryObj (result) {
   // 避免外部修改queryObj影响缓存
-  result.queryObj = parseQuery(result.resourceQuery)
+  result.queryObj = parseQuery(result.resourceQuery || '?')
   return result
 }
 
@@ -16,13 +16,13 @@ module.exports = function parseRequest (request) {
   let resource = elements.pop()
   let loaderString = elements.join('!')
   let resourcePath = resource
-  let resourceQuery = '?'
+  let resourceQuery = ''
   const queryIndex = resource.indexOf('?')
   if (queryIndex >= 0) {
     resourcePath = resource.slice(0, queryIndex)
     resourceQuery = resource.slice(queryIndex)
   }
-  const queryObj = parseQuery(resourceQuery)
+  const queryObj = parseQuery(resourceQuery || '?')
   const rawResourcePath = resourcePath
   if (queryObj.resourcePath) {
     resourcePath = queryObj.resourcePath

package/lib/utils/resolve.js

@@ -0,0 +1,13 @@
+const parseRequest = require('./parse-request')
+const { RESOLVE_IGNORED_ERR } = require('./const')
+
+// todo 提供不记录dependency的resolve方法，非必要的情况下不记录dependency，提升缓存利用率
+module.exports = (context, request, loaderContext, callback) => {
+  const { queryObj } = parseRequest(request)
+  context = queryObj.context || context
+  return loaderContext.resolve(context, request, (err, resource, info) => {
+    if (err) return callback(err)
+    if (resource === false) return callback(RESOLVE_IGNORED_ERR)
+    callback(null, resource, info)
+  })
+}

package/lib/utils/set.js

@@ -0,0 +1,47 @@
+module.exports = {
+  every (set, fn) {
+    for (const item of set) {
+      if (!fn(item)) return false
+    }
+    return true
+  },
+  has (set, fn) {
+    for (const item of set) {
+      if (fn(item)) return true
+    }
+    return false
+  },
+  map (set, fn) {
+    const result = new Set()
+    set.forEach((item) => {
+      result.add(fn(item))
+    })
+    return result
+  },
+  filter (set, fn) {
+    const result = new Set()
+    set.forEach((item) => {
+      if (fn(item)) {
+        result.add(item)
+      }
+    })
+    return result
+  },
+  concat (setA, setB) {
+    const result = new Set()
+    setA.forEach((item) => {
+      result.add(item)
+    })
+    setB.forEach((item) => {
+      result.add(item)
+    })
+    return result
+  },
+  mapToArr (set, fn) {
+    const result = []
+    set.forEach((item) => {
+      result.push(fn(item))
+    })
+    return result
+  }
+}

package/lib/utils/stringify-loaders-resource.js

@@ -0,0 +1,25 @@
+const loaderToIdent = data => {
+  if (!data.options) {
+    return data.loader
+  }
+  if (typeof data.options === 'string') {
+    return data.loader + '?' + data.options
+  }
+  if (typeof data.options !== 'object') {
+    throw new Error('loader options must be string or object')
+  }
+  if (data.ident) {
+    return data.loader + '??' + data.ident
+  }
+  return data.loader + '?' + JSON.stringify(data.options)
+}
+
+const stringifyLoadersAndResource = (loaders, resource) => {
+  let str = ''
+  for (const loader of loaders) {
+    str += loaderToIdent(loader) + '!'
+  }
+  return str + resource
+}
+
+module.exports = stringifyLoadersAndResource

package/lib/utils/stringify-query.js

@@ -16,6 +16,10 @@ function stringifyQuery (obj, useJSON) {
       return
     }
 
+    if (val === true) {
+      return key
+    }
+
     if (Array.isArray(val)) {
       const key2 = `${key}[]`
       const result = []