开发环境 + mockjs + requireContext - macros

babel.config.js

@@ -1,13 +1,13 @@
-module.exports = {
-  presets: [
-    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
-    '@vue/cli-plugin-babel/preset'
-  ],
-  'env': {
-    'development': {
-      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
-      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
-      'plugins': ['dynamic-import-node']
-    }
-  }
-}
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      'plugins': ['dynamic-import-node', 'macros']
+    }
+  }
+}

mock/index.js

@@ -1,17 +1,10 @@
 const Mock = require('mockjs')
 const { param2Obj } = require('./utils')
 
-const mockModules = require.context('./modules', false, /\.js$/)
-const mocks = mockModules.keys()
-  .map(key => mockModules(key))
-  .reduce(function(prev, current) {
-    return prev.concat(current)
-  }, [])
-
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,
 // which will cause many of your third-party libraries to be invalidated(like progress event).
-function mockXHR() {
+function mockXHR(mocks) {
   // mock patch
   // https://github.com/nuysoft/Mock/issues/300
   Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
@@ -49,8 +42,5 @@ function mockXHR() {
   }
 }
 
-module.exports = {
-  mocks,
-  mockXHR
-}
+module.exports = mockXHR
 

mock/modules/elective-generation.js

@@ -14,6 +14,7 @@ module.exports = [
         data: {
           year: 2021,
           roundId: 1,
+          roundName: '第X次选科',
           allMatched: false,
           currentGeneration: mockGeneration
         }
@@ -29,8 +30,6 @@ module.exports = [
         msg: 'success',
         'data|6': [{
           year: 2021,
-          roundId: 1,
-          roundName: '第X次选科'
         }]
       }
     }

package.json

@@ -74,11 +74,13 @@
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
+    "babel-plugin-macros": "^3.1.0",
     "chalk": "4.1.0",
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
+    "require-context.macro": "^1.2.2",
     "runjs": "4.4.2",
     "sass": "1.32.0",
     "sass-loader": "10.1.0",

src/main.js

@@ -115,9 +115,16 @@ Vue.use(Element, {
 })
 
 /* use mockjs in dev-environment */
+import requireContext from 'require-context.macro';
 if (process.env.NODE_ENV === 'development') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
+  const mockModules = requireContext('../mock/modules', false, /\.js$/)
+  const mocks = mockModules.keys()
+    .map(key => mockModules(key))
+    .reduce(function(prev, current) {
+      return prev.concat(current)
+    }, [])
+  const mockXHR = require('../mock')
+  mockXHR(mocks)
 }
 
 Vue.config.productionTip = false