第 11 周作业

src/directory-parser.js

@@ -6,9 +6,57 @@ function parsePagesDirectory(
   { prependName, prependPath } = { prependName: '', prependPath: '/' },
 ) {
   let routes = []
-
-  //TODO
-
+  // prependPath = prependPath.replace(/\:/g, "_")
+  let pathAddress = path.resolve(__dirname, '../', dir, prependPath.substring(1).replace(/\:/g, "_"))
+  // 当前路径的文件夹下有哪些文件和子文件夹
+  let subFileorDir = fs.readdirSync(pathAddress)
+  // 用来记录拥有子组件的元素的索引
+  let hasChildren = []
+  routes = subFileorDir.reduce((arr, curr) => {
+    let { name, base } = path.parse(curr)
+    name = name.replace(/^_/, ':')
+    if (fs.statSync(path.resolve(pathAddress, curr)).isFile()) {
+      if (name.indexOf('ignored') !== -1) {
+        return arr
+      }
+      if (subFileorDir.includes(name.replace(/\:/, '_'))) {
+        hasChildren.push({ valIdx: arr.length, name: name })
+      }
+      if (name === 'index') {
+        arr.push(`{ name: '${prependName ? `${prependName}` : `${name.replace(/\:/g, '')}`}', path: '${prependPath}', component: () => import('/${dir}${prependPath.replace(/\:/g, "_")}${base}') }`)
+        return arr
+      }
+      arr.push(`{ name: '${prependName ? `${prependName}-${name.replace(/\:/g, '')}` : `${name.replace(/\:/g, '')}`}', path: '${prependPath}${name}', component: () => import('/${dir}${prependPath.replace(/\:/g, "_")}${base}') }`)
+      return arr
+    } else if (fs.statSync(path.resolve(pathAddress, curr)).isDirectory()) {
+      let { routes: routesTemp } = parsePagesDirectory(dir, { prependName: `${prependName ? prependName+'-' : ''}${name.replace(/\:/g, '')}`, prependPath: `${prependPath}${name}/` })
+      arr.push(...routesTemp)
+      return arr
+    }
+  }, [])
+  // 处理存在子组件的情况
+  hasChildren.forEach(({ valIdx, name }) => {
+    let tempStr = ''
+    // 遍历 routes 找到子组件，进行处理
+    routes.forEach((item, index) => {
+      if (item && item.indexOf(`${name.replace(/\:/, '')}-`) !== -1) {
+        item = item.replace(new RegExp(`path: '/:?${name}/`), `path: '`)
+        tempStr += `${item}, `
+        delete routes[index]
+        return
+      }
+      if (item && item.indexOf(`name: '${name.replace(/\:/, '')}'`) !== -1 && index !== valIdx) {
+        item = item.replace(new RegExp(`path: '/:?${name}/`), `path: '`)
+        tempStr += `${item}, `
+        delete routes[index]
+        return
+      }
+    })
+    tempStr = tempStr.replace(/, $/, '')
+    routes[valIdx] = routes[valIdx].replace(`name: '${name.replace(/\:/, '')}', `, '')
+    routes[valIdx] = routes[valIdx].replace(' }', `, children: [ ${tempStr} ] }`)
+  })
+  routes = routes.filter(val => val)
   return { routes }
 }
 

tests/directory-parser.spec.js

@@ -39,9 +39,9 @@ test('directory with a little nesting', () => {
     `{ name: 'contact', path: '/contact', component: () => import('/${dir}/contact.vue') }`,
     `{ name: 'index', path: '/', component: () => import('/${dir}/index.vue') }`,
     `{ name: 'level1-about', path: '/level1/about', component: () => import('/${dir}/level1/about.vue') }`,
-    `{ name: 'level1-team', path: '/level1/team', component: () => import('/${dir}/level1/team.vue') }`,
     `{ name: 'level1-level2-deep', path: '/level1/level2/deep', component: () => import('/${dir}/level1/level2/deep.vue') }`,
     `{ name: 'level1-level2', path: '/level1/level2/', component: () => import('/${dir}/level1/level2/index.vue') }`,
+    `{ name: 'level1-team', path: '/level1/team', component: () => import('/${dir}/level1/team.vue') }`
   ])
 })
 
@@ -69,10 +69,10 @@ test('directory with some params', () => {
 
   expect(routes).toEqual([
     `{ name: 'about', path: '/about', component: () => import('/${dir}/about.vue') }`,
+    `{ name: 'team-join', path: '/team/join', component: () => import('/${dir}/team/join.vue') }`,
+    `{ name: 'team-name', path: '/team/:name', component: () => import('/${dir}/team/_name.vue') }`,
     `{ name: 'product-buy', path: '/:product/buy', component: () => import('/${dir}/_product/buy.vue') }`,
     `{ name: 'product-sell', path: '/:product/sell', component: () => import('/${dir}/_product/sell.vue') }`,
-    `{ name: 'team-name', path: '/team/:name', component: () => import('/${dir}/team/_name.vue') }`,
-    `{ name: 'team-join', path: '/team/join', component: () => import('/${dir}/team/join.vue') }`,
   ])
 })
 
@@ -81,18 +81,8 @@ test('directory with everything', () => {
   const { routes } = parsePagesDirectory(dir)
 
   expect(routes).toEqual([
-    oneLine`{
-      path: '/:product',
-      component: () => import('/${dir}/_product.vue'),
-      children: [
-        { name: 'product-buy', path: 'buy', component: () => import('/${dir}/_product/buy.vue') },
-        { name: 'product', path: '', component: () => import('/${dir}/_product/index.vue') },
-        { name: 'product-sell', path: 'sell', component: () => import('/${dir}/_product/sell.vue') }
-      ]
-    }`,
     `{ name: 'about', path: '/about', component: () => import('/${dir}/about.vue') }`,
     oneLine`{
-      name: 'contact',
       path: '/contact',
       component: () => import('/${dir}/contact.vue'),
       children: [
@@ -101,5 +91,14 @@ test('directory with everything', () => {
       ]
     }`,
     `{ name: 'index', path: '/', component: () => import('/${dir}/index.vue') }`,
+    oneLine`{
+      path: '/:product',
+      component: () => import('/${dir}/_product.vue'),
+      children: [
+        { name: 'product-buy', path: 'buy', component: () => import('/${dir}/_product/buy.vue') },
+        { name: 'product', path: '', component: () => import('/${dir}/_product/index.vue') },
+        { name: 'product-sell', path: 'sell', component: () => import('/${dir}/_product/sell.vue') }
+      ]
+    }`,
   ])
 })