Webpack4 and Babel@7(@babel) Support

Author: v_zhihzhou

README.md

@@ -2,7 +2,7 @@
 
 >Webpack4 loader for mpvue components
 
-本仓库是 fork 自 [mpvue-loader](http://mpvue.com/build/mpvue-loader) 修改而来，主要为 webpack4 打包 mpvue components 提供能力。
+本仓库是 fork 自 [mpvue-loader](http://mpvue.com/build/mpvue-loader) 修改而来，主要为 webpack4 和 babel@7(@babel) 打包 mpvue components 提供能力。
 
 更多详细文档请查阅 [mpvue-loader](http://mpvue.com/build/mpvue-loader)。
 

lib/mp-compiler/parse.js

@@ -1,24 +1,8 @@
 // babel-plugin-parse-mp-info.js
 
-const generate = require('babel-generator').default
+const generate = require('@babel/generator').default
 const babelon = require('babelon')
-
-function getImportsMap (metadata) {
-  let { importsMap } = metadata
-  const { imports } = metadata.modules
-
-  if (!importsMap) {
-    importsMap = {}
-    imports.forEach(m => {
-      m.specifiers.forEach(v => {
-        importsMap[v.local] = m.source
-      })
-    })
-    metadata.importsMap = importsMap
-  }
-
-  return metadata
-}
+const { getImportsMap } = require('./util')
 
 // 解析 config
 const traverseConfigVisitor = {
@@ -44,8 +28,14 @@ const configVisitor = {
     path.remove()
   },
   NewExpression: function (path) {
-    const { metadata } = path.hub.file
-    const { importsMap } = getImportsMap(metadata)
+    const file = path.hub.file
+    const { metadata } = file
+    // enhance: 修复在babel@7(@babel)下获取以下参数的方式
+    const importsData = getImportsMap(file)
+    let importsMap = {}
+    importsData.forEach(item => {
+      importsMap = Object.assign(importsMap, item.importsMap)
+    })
 
     const calleeName = path.node.callee.name
     const isVue = /vue$/.test(importsMap[calleeName])
@@ -76,8 +66,10 @@ const traverseComponentsVisitor = {
     }
     path.stop()
 
-    const { metadata } = path.hub.file
-    const { importsMap } = getImportsMap(metadata)
+    const file = path.hub.file
+    const { metadata } = file
+    // enhance: 修复在babel@7(@babel)下获取以下参数的方式
+    const importsMap = getImportsMap(file)
 
     // 找到所有的 imports
     const { properties } = path.node.value
@@ -108,7 +100,8 @@ let globalComponents = {}
 const globalComponentsVisitor = {
   CallExpression (path) {
     const { callee, arguments: args } = path.node
-    const { metadata } = path.hub.file
+    const file = path.hub.file
+    const { metadata } = file
     if (!callee.object || !callee.property) {
       return
     }
@@ -119,7 +112,8 @@ const globalComponentsVisitor = {
       if (!args[1]) {
         throw new Error('Vue.component()需要两个参数')
       }
-      const { importsMap } = getImportsMap(metadata)
+      // enhance: 修复在babel@7(@babel)下获取以下参数的方式
+      const { importsMap } = getImportsMap(file)
       globalComponents[args[0].value] = importsMap[args[1].name]
     }
     metadata.globalComponents = globalComponents

lib/mp-compiler/util.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const fs = require('fs')
+const { isModuleDeclaration } = require('babel-types')
 const resolveSrc = require('../utils/resolve-src')
 const pagesNameMap = Object.create(null)
 
@@ -11,6 +12,76 @@ function getFileInfo (resourcePath) {
   return pagesNameMap[resourcePath] || {}
 }
 
+// enhance: 修复在babel@7(@babel)下获取以下参数的方式
+function getImportsMap (file) {
+  const imports = []
+  if (!file.ast) return imports
+
+  let isModule = false
+
+  for (const node of file.ast.program.body) {
+    if (isModuleDeclaration(node)) {
+      isModule = true
+      break
+    }
+  }
+
+  if (isModule) {
+    file.path.traverse({
+      ImportDeclaration: {
+        exit (path) {
+          const { node } = path
+          const imported = []
+          const importsMap = {}
+          const specifiers = []
+
+          for (const specifier of path.get('specifiers')) {
+            const local = specifier.node.local.name
+
+            importsMap[local] = node.source.value
+
+            if (specifier.isImportDefaultSpecifier()) {
+              imported.push('default')
+              specifiers.push({
+                kind: 'named',
+                imported: 'default',
+                local
+              })
+            }
+
+            if (specifier.isImportSpecifier()) {
+              const importedName = specifier.node.imported.name
+              imported.push(importedName)
+              specifiers.push({
+                kind: 'named',
+                imported: importedName,
+                local
+              })
+            }
+
+            if (specifier.isImportNamespaceSpecifier()) {
+              imported.push('*')
+              specifiers.push({
+                kind: 'namespace',
+                local
+              })
+            }
+          }
+
+          imports.push({
+            source: node.source.value,
+            imported,
+            specifiers,
+            importsMap
+          })
+        }
+      }
+    })
+  }
+
+  return imports
+}
+
 // 单文件的名字+hash
 // TODO: 调试时取个全名
 var hash = require('hash-sum')
@@ -149,5 +220,6 @@ module.exports = {
   getSlots,
   htmlBeautify,
   getBabelrc,
-  getPageSrc
+  getPageSrc,
+  getImportsMap
 }