@mpxjs/webpack-plugin 2.7.0-beta.2 → 2.7.0-beta.6

package/lib/wxs/loader.js

@@ -3,7 +3,7 @@ const EntryPlugin = require('webpack/lib/EntryPlugin')
 const LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin')
 const path = require('path')
 const WxsPlugin = require('./WxsPlugin')
-const RecordStaticResourceDependency = require('../dependencies/RecordStaticResourceDependency')
+const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const parseRequest = require('../utils/parse-request')
 const toPosix = require('../utils/to-posix')
 const fixRelative = require('../utils/fix-relative')
@@ -14,8 +14,7 @@ module.exports = function () {
   const moduleGraph = this._compilation.moduleGraph
   const mpx = this.getMpx()
   const mode = mpx.mode
-  const wxsMap = mpx.wxsMap
-  const appInfo = mpx.appInfo
+  const getOutputPath = mpx.getOutputPath
   let { resourcePath, queryObj } = parseRequest(this.resource)
   const issuer = moduleGraph.getIssuer(this._module)
   const { resourcePath: issuerResourcePath, queryObj: issuerQueryObj } = parseRequest(queryObj.issuerResource || issuer.resource)
@@ -23,7 +22,7 @@ module.exports = function () {
   const pagesMap = mpx.pagesMap
   const componentsMap = mpx.componentsMap[issuerPackageName]
   const staticResourcesMap = mpx.staticResourcesMap[issuerPackageName]
-  const issuerName = issuerResourcePath === appInfo.resourcePath ? appInfo.name : (pagesMap[issuerResourcePath] || componentsMap[issuerResourcePath] || staticResourcesMap[issuerResourcePath])
+  const issuerName = pagesMap[issuerResourcePath] || componentsMap[issuerResourcePath] || staticResourcesMap[issuerResourcePath]
   const issuerDir = path.dirname(issuerName)
 
   const getName = (raw) => {
@@ -36,9 +35,9 @@ module.exports = function () {
     resourcePath = `${resourcePath}~${wxsModule}`
   }
   const packageRoot = queryObj.packageRoot || ''
-  const name = path.parse(resourcePath).name + mpx.pathHash(resourcePath)
-  const filename = toPosix(path.join(packageRoot, /^\.([^.]+)/.exec(config[mode].wxs.ext)[1], `${name}${config[mode].wxs.ext}`))
-  this._module.addPresentationalDependency(new RecordStaticResourceDependency(resourcePath, filename, packageRoot))
+  const ext = config[mode].wxs.ext
+  const filename = toPosix(path.join(packageRoot, getOutputPath(resourcePath, ext.slice(1), { ext })))
+  this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', filename, packageRoot))
 
   const callback = (err) => {
     if (err) return nativeCallback(err)
@@ -47,16 +46,6 @@ module.exports = function () {
     nativeCallback(null, `module.exports = ${JSON.stringify(relativePath)};`)
   }
 
-  if (wxsMap[filename]) {
-    wxsMap[filename].modules.push(this._module)
-    return callback()
-  }
-
-  wxsMap[filename] = {
-    dep: null,
-    modules: [this._module]
-  }
-
   const outputOptions = {
     filename
   }
@@ -71,15 +60,6 @@ module.exports = function () {
 
   const childCompiler = this._compilation.createChildCompiler(resourcePath, outputOptions, plugins)
 
-  // let entryModule
-  // childCompiler.hooks.thisCompilation.tap('MpxWebpackPlugin ', (compilation) => {
-  //   compilation.hooks.succeedEntry.tap('MpxWebpackPlugin', (entry, name, module) => {
-  //     entryModule = module
-  //     // const dep = new ChildCompileDependency(entryModule)
-  //     // wxsMap[filename].dep = dep
-  //   })
-  // })
-
   childCompiler.hooks.afterCompile.tap('MpxWebpackPlugin', (compilation) => {
     // 持久化缓存，使用module.buildInfo.assets来输出文件
     compilation.getAssets().forEach(({ name, source, info }) => {

package/lib/wxs/pre-loader.js

@@ -1,22 +1,21 @@
-const babylon = require('babylon')
-const traverse = require('babel-traverse').default
-const t = require('babel-types')
-const generate = require('babel-generator').default
-const getMainCompilation = require('../utils/get-main-compilation')
+const babylon = require('@babel/parser')
+const traverse = require('@babel/traverse').default
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 const parseRequest = require('../utils/parse-request')
 const isEmptyObject = require('../utils/is-empty-object')
 const parseQuery = require('loader-utils').parseQuery
 
 module.exports = function (content) {
   this.cacheable()
-  const mainCompilation = getMainCompilation(this._compilation)
+  const mpx = this.getMpx()
   const module = this._module
-  const mode = mainCompilation.__mpx__.mode
+  const mode = mpx.mode
   const wxsModule = parseQuery(this.resourceQuery || '?').wxsModule
 
   // 处理内联wxs
   if (wxsModule) {
-    const wxsContentMap = mainCompilation.__mpx__.wxsContentMap
+    const wxsContentMap = mpx.wxsContentMap
     const resourcePath = parseRequest(this.resource).resourcePath
     content = wxsContentMap[`${resourcePath}~${wxsModule}`] || content
   }

package/lib/wxss/processCss.js

@@ -3,37 +3,37 @@
   Author Tobias Koppers @sokra
   Modified by @hiyuki
 */
-var formatCodeFrame = require('babel-code-frame')
-var Tokenizer = require('css-selector-tokenizer')
-var postcss = require('postcss')
-var loaderUtils = require('loader-utils')
-var assign = require('object-assign')
-var getLocalIdent = require('./getLocalIdent')
+const formatCodeFrame = require('@babel/code-frame')
+const Tokenizer = require('css-selector-tokenizer')
+const postcss = require('postcss')
+const loaderUtils = require('loader-utils')
+const assign = require('object-assign')
+const getLocalIdent = require('./getLocalIdent')
 
-var icssUtils = require('icss-utils')
-var localByDefault = require('postcss-modules-local-by-default')
-var extractImports = require('postcss-modules-extract-imports')
-var modulesScope = require('postcss-modules-scope')
-var modulesValues = require('postcss-modules-values')
-var valueParser = require('postcss-value-parser')
-var isUrlRequest = require('../utils/is-url-request')
+const icssUtils = require('icss-utils')
+const localByDefault = require('postcss-modules-local-by-default')
+const extractImports = require('postcss-modules-extract-imports')
+const modulesScope = require('postcss-modules-scope')
+const modulesValues = require('postcss-modules-values')
+const valueParser = require('postcss-value-parser')
+const isUrlRequest = require('../utils/is-url-request')
 
-var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
+const parserPlugin = postcss.plugin('css-loader-parser', function (options) {
   return function (css) {
-    var imports = {}
-    var exports = {}
-    var importItems = []
-    var urlItems = []
+    const imports = {}
+    let exports = {}
+    const importItems = []
+    const urlItems = []
 
     function replaceImportsInString (str) {
       if (options.import) {
-        var tokens = valueParser(str)
+        const tokens = valueParser(str)
         tokens.walk(function (node) {
           if (node.type !== 'word') {
             return
           }
-          var token = node.value
-          var importIndex = imports['$' + token]
+          const token = node.value
+          const importIndex = imports['$' + token]
           if (typeof importIndex === 'number') {
             node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
           }
@@ -45,8 +45,8 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
 
     if (options.import) {
       css.walkAtRules(/^import$/i, function (rule) {
-        var values = Tokenizer.parseValues(rule.params)
-        var url = values.nodes[0].nodes[0]
+        const values = Tokenizer.parseValues(rule.params)
+        let url = values.nodes[0].nodes[0]
         if (url && url.type === 'url') {
           url = url.url
         } else if (url && url.type === 'string') {
@@ -56,7 +56,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
           return
         }
         values.nodes[0].nodes.shift()
-        var mediaQuery = Tokenizer.stringifyValues(values)
+        const mediaQuery = Tokenizer.stringifyValues(values)
 
         if (isUrlRequest(url, options.root)) {
           url = loaderUtils.urlToRequest(url, options.root)
@@ -70,10 +70,10 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
       })
     }
 
-    var icss = icssUtils.extractICSS(css)
+    const icss = icssUtils.extractICSS(css)
     exports = icss.icssExports
     Object.keys(icss.icssImports).forEach(function (key) {
-      var url = loaderUtils.parseString(key)
+      const url = loaderUtils.parseString(key)
       Object.keys(icss.icssImports[key]).forEach(function (prop) {
         imports['$' + prop] = importItems.length
         importItems.push({
@@ -101,7 +101,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
           item.nodes.forEach(processNode)
           break
         case 'item':
-          var importIndex = imports['$' + item.name]
+          const importIndex = imports['$' + item.name]
           if (typeof importIndex === 'number') {
             item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
           }
@@ -112,7 +112,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
             item.stringType = ''
             delete item.innerSpacingBefore
             delete item.innerSpacingAfter
-            var url = item.url
+            const url = item.url
             item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
             urlItems.push({
               url: url
@@ -123,7 +123,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
     }
 
     css.walkDecls(function (decl) {
-      var values = Tokenizer.parseValues(decl.value)
+      const values = Tokenizer.parseValues(decl.value)
       values.nodes.forEach(function (value) {
         value.nodes.forEach(processNode)
       })
@@ -142,17 +142,17 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
 })
 
 module.exports = function processCss (inputSource, inputMap, options, callback) {
-  var query = options.query
-  var root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
-  var context = query.context
-  var localIdentName = query.localIdentName || '[hash:base64]'
-  var localIdentRegExp = query.localIdentRegExp
-  var forceMinimize = query.minimize
-  var minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
+  const query = options.query
+  const root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
+  const context = query.context
+  const localIdentName = query.localIdentName || '[hash:base64]'
+  const localIdentRegExp = query.localIdentRegExp
+  const forceMinimize = query.minimize
+  const minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
 
-  var customGetLocalIdent = query.getLocalIdent || getLocalIdent
+  const customGetLocalIdent = query.getLocalIdent || getLocalIdent
 
-  var parserOptions = {
+  const parserOptions = {
     root: root,
     mode: options.mode,
     url: query.url !== false,
@@ -160,7 +160,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     resolve: options.resolve
   }
 
-  var pipeline = postcss([
+  const pipeline = postcss([
     modulesValues,
     localByDefault({
       mode: options.mode,
@@ -192,8 +192,8 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
   ])
 
   if (minimize) {
-    var cssnano = require('cssnano')
-    var minimizeOptions = assign({}, query.minimize);
+    const cssnano = require('cssnano')
+    const minimizeOptions = assign({}, query.minimize);
     ['zindex', 'normalizeUrl', 'discardUnused', 'mergeIdents', 'reduceIdents', 'autoprefixer', 'svgo'].forEach(function (name) {
       if (typeof minimizeOptions[name] === 'undefined') {
         minimizeOptions[name] = false
@@ -226,7 +226,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     })
   }).catch(function (err) {
     if (err.name === 'CssSyntaxError') {
-      var wrappedError = new CSSLoaderError(
+      const wrappedError = new CSSLoaderError(
         'Syntax Error',
         err.reason,
         err.line != null && err.column != null
@@ -242,7 +242,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
 }
 
 function formatMessage (message, loc, source) {
-  var formatted = message
+  let formatted = message
   if (loc) {
     formatted = formatted +
       ' (' + loc.line + ':' + loc.column + ')'
@@ -260,7 +260,7 @@ function CSSLoaderError (name, message, loc, source, error) {
   this.name = name
   this.error = error
   this.message = formatMessage(message, loc, source)
-  this.hideStack = true
+  this.message = formatMessage(message, loc, source)
 }
 
 CSSLoaderError.prototype = Object.create(Error.prototype)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.0-beta.2",
+  "version": "2.7.0-beta.6",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -15,6 +15,11 @@
     "lib"
   ],
   "dependencies": {
+    "@babel/code-frame": "^7.16.0",
+    "@babel/generator": "^7.16.0",
+    "@babel/parser": "^7.16.2",
+    "@babel/traverse": "^7.16.0",
+    "@babel/types": "^7.16.0",
     "@better-scroll/core": "^2.2.1",
     "@better-scroll/movable": "^2.2.1",
     "@better-scroll/observe-dom": "^2.2.1",
@@ -24,11 +29,6 @@
     "@better-scroll/zoom": "^2.2.1",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
-    "babel-code-frame": "^6.26.0",
-    "babel-generator": "^6.26.1",
-    "babel-traverse": "^6.26.0",
-    "babel-types": "^6.26.0",
-    "babylon": "^6.18.0",
     "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
@@ -40,7 +40,7 @@
     "html-minifier": "^3.5.8",
     "icss-utils": "^2.1.0",
     "json5": "^2.1.3",
-    "loader-utils": "1.1.0",
+    "loader-utils": "^2.0.2",
     "lodash": "^4.17.15",
     "lodash.camelcase": "^4.3.0",
     "lru-cache": "^4.1.2",
@@ -77,5 +77,5 @@
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
   },
-  "gitHead": "a3d84b47c8d4456cc217b1e628560dcb4c4f6202"
+  "gitHead": "c04233503af0b1c7b4410fd03582d9dd883182d9"
 }

package/lib/built-in-loader.js

@@ -1,49 +0,0 @@
-const parseComponent = require('./parser')
-const loaderUtils = require('loader-utils')
-const parseRequest = require('./utils/parse-request')
-const normalize = require('./utils/normalize')
-const selectorPath = normalize.lib('selector')
-const genComponentTag = require('./utils/gen-component-tag')
-const getMainCompilation = require('./utils/get-main-compilation')
-
-module.exports = function (content) {
-  this.cacheable()
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
-  if (!mpx) {
-    return content
-  }
-  const mode = mpx.mode
-  const env = mpx.env
-  const defs = mpx.defs
-  const resourcePath = parseRequest(this.resource).resourcePath
-  const parts = parseComponent(content, {
-    filePath: resourcePath,
-    needMap: this.sourceMap,
-    mode,
-    defs,
-    env
-  })
-
-  let output = ''
-
-  // 内建组件编写规范比较统一，不需要处理太多情况
-  if (parts.template) {
-    output += genComponentTag(parts.template)
-  }
-
-  if (parts.script) {
-    output += '\n' + genComponentTag(parts.script, (script) => {
-      let content = ''
-      if (parts.styles && parts.styles.length) {
-        parts.styles.forEach((style, i) => {
-          const requestString = loaderUtils.stringifyRequest(this, `builtInComponent.styl!=!${selectorPath}?type=styles&index=${i}!${loaderUtils.getRemainingRequest(this)}`)
-          content += `\n  import ${requestString}`
-        })
-      }
-      content += script.content
-      return content
-    })
-  }
-  return output
-}

package/lib/record-loader.js

@@ -1,11 +0,0 @@
-const parseRequest = require('./utils/parse-request')
-const RecordStaticResourceDependency = require('./dependencies/RecordStaticResourceDependency')
-
-module.exports = function (source) {
-  const mpx = this.getMpx()
-  const { resourcePath, queryObj } = parseRequest(this.resource)
-  const file = mpx.getExtractedFile(this.resource)
-  const packageRoot = queryObj.packageRoot || ''
-  this._module.addPresentationalDependency(new RecordStaticResourceDependency(resourcePath, file, packageRoot))
-  return source
-}

package/lib/utils/get-main-compilation.js

@@ -1,6 +0,0 @@
-module.exports = function (compilation) {
-  while (compilation.compiler.parentCompilation) {
-    compilation = compilation.compiler.parentCompilation
-  }
-  return compilation
-}

package/lib/utils/read-json-for-src.js

@@ -1,34 +0,0 @@
-const parseRequest = require('./parse-request')
-const mpxJSON = require('./mpx-json')
-const getMainCompilation = require('./get-main-compilation')
-
-module.exports = function readJsonForSrc (src, loaderContext, callback) {
-  const fs = loaderContext._compiler.inputFileSystem
-  const mpx = getMainCompilation(loaderContext._compilation).__mpx__
-  const defs = mpx.defs
-  const resolve = (context, request, callback) => {
-    const { queryObj } = parseRequest(request)
-    context = queryObj.context || context
-    return loaderContext.resolve(context, request, callback)
-  }
-
-  resolve(loaderContext.context, src, (err, result) => {
-    if (err) return callback(err)
-    const { rawResourcePath: resourcePath } = parseRequest(result)
-    loaderContext.addDependency(resourcePath)
-    fs.readFile(resourcePath, (err, content) => {
-      if (err) {
-        return callback(err)
-      }
-      content = content.toString('utf-8')
-      if (resourcePath.endsWith('.json.js')) {
-        try {
-          content = mpxJSON.compileMPXJSONText({ source: content, defs, filePath: resourcePath })
-        } catch (e) {
-          return callback(e)
-        }
-      }
-      callback(null, content)
-    })
-  })
-}