wip: suppoer vite2 -- hack xlsx

build/script/hackXlsx.ts

+import fs from 'fs';
+
+import path from 'path';
+
+// Because xlsx internally references the node module, the pre-optimization of vite2.0 fails. Since the node module inside xlsx is not used on the web side, all the code that uses the node module is replaced with `{}` to be compatible with'vite2'
+function replaceCjs() {
+  const xlsx = path.resolve(process.cwd(), 'node_modules/xlsx/xlsx.js');
+  let raw = fs.readFileSync(xlsx, 'utf-8');
+
+  raw = raw
+    .replace(`require('fs')`, '{}')
+    .replace(`require('stream')`, '{}')
+    .replace(`require('crypto')`, '{}');
+  fs.writeFileSync(xlsx, raw);
+}
+
+replaceCjs();

package.json

@@ -15,7 +15,9 @@
     "lint:eslint": "eslint --fix --ext \"src/**/*.{vue,less,css,scss}\"",
     "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
-    "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"
+    "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
+    "hack-esm:xlsx": "esno ./build/script/hackXlsx",
+    "postinstall": "npm run hack-esm:xlsx"
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.5",
@@ -39,6 +41,7 @@
     "vue-types": "^3.0.1",
     "vuex": "^4.0.0-rc.2",
     "vuex-module-decorators": "^1.0.1",
+    "xlsx": "^0.16.9",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
@@ -61,8 +64,8 @@
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "@typescript-eslint/parser": "^4.12.0",
-    "@vitejs/plugin-legacy": "^1.1.0",
-    "@vitejs/plugin-vue": "^1.0.4",
+    "@vitejs/plugin-legacy": "^1.1.1",
+    "@vitejs/plugin-vue": "^1.0.5",
     "@vitejs/plugin-vue-jsx": "^1.0.1",
     "@vue/compiler-sfc": "^3.0.5",
     "@vuedx/typecheck": "^0.4.1",
@@ -95,7 +98,7 @@
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.0",
     "typescript": "^4.1.3",
-    "vite": "^2.0.0-beta.15",
+    "vite": "^2.0.0-beta.16",
     "vite-plugin-html": "^2.0.0-beta.5",
     "vite-plugin-import-context": "^1.0.0-rc.1",
     "vite-plugin-mock": "^2.0.0-beta.1",

src/router/helper/routeHelper.ts

@@ -12,10 +12,11 @@ const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>()
 // 动态引入
 function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
   // TODO Because xlsx does not support vite2.0 temporarily. So filter the excel example first
+  // regexp: /^(?!.*\/demo\/excel).*\.(tsx?|vue)$/,
   const dynamicViewsModules = importContext({
     dir: '/@/views',
     deep: true,
-    regexp: /^(?!.*\/demo\/excel).*\.(tsx?|vue)$/,
+    regexp: /\.(tsx?|vue)$/,
     dynamicImport: true,
     dynamicEnabled: 'autoImportRoute',
   });

src/router/routes/modules/demo/feat.ts

@@ -172,51 +172,51 @@ const feat: AppRouteModule = {
         title: t('routes.demo.feat.errorLog'),
       },
     },
-    // {
-    //   path: 'excel',
-    //   name: 'Excel',
-    //   redirect: '/feat/excel/customExport',
-    //   component: getParentLayout('Excel'),
-    //   meta: {
-    //     // icon: 'mdi:microsoft-excel',
-    //     title: t('routes.demo.excel.excel'),
-    //   },
+    {
+      path: 'excel',
+      name: 'Excel',
+      redirect: '/feat/excel/customExport',
+      component: getParentLayout('Excel'),
+      meta: {
+        // icon: 'mdi:microsoft-excel',
+        title: t('routes.demo.excel.excel'),
+      },
 
-    //   children: [
-    //     {
-    //       path: 'customExport',
-    //       name: 'CustomExport',
-    //       component: () => import('/@/views/demo/excel/CustomExport.vue'),
-    //       meta: {
-    //         title: t('routes.demo.excel.customExport'),
-    //       },
-    //     },
-    //     {
-    //       path: 'jsonExport',
-    //       name: 'JsonExport',
-    //       component: () => import('/@/views/demo/excel/JsonExport.vue'),
-    //       meta: {
-    //         title: t('routes.demo.excel.jsonExport'),
-    //       },
-    //     },
-    //     {
-    //       path: 'arrayExport',
-    //       name: 'ArrayExport',
-    //       component: () => import('/@/views/demo/excel/ArrayExport.vue'),
-    //       meta: {
-    //         title: t('routes.demo.excel.arrayExport'),
-    //       },
-    //     },
-    //     {
-    //       path: 'importExcel',
-    //       name: 'ImportExcel',
-    //       component: () => import('/@/views/demo/excel/ImportExcel.vue'),
-    //       meta: {
-    //         title: t('routes.demo.excel.importExcel'),
-    //       },
-    //     },
-    //   ],
-    // },
+      children: [
+        {
+          path: 'customExport',
+          name: 'CustomExport',
+          component: () => import('/@/views/demo/excel/CustomExport.vue'),
+          meta: {
+            title: t('routes.demo.excel.customExport'),
+          },
+        },
+        {
+          path: 'jsonExport',
+          name: 'JsonExport',
+          component: () => import('/@/views/demo/excel/JsonExport.vue'),
+          meta: {
+            title: t('routes.demo.excel.jsonExport'),
+          },
+        },
+        {
+          path: 'arrayExport',
+          name: 'ArrayExport',
+          component: () => import('/@/views/demo/excel/ArrayExport.vue'),
+          meta: {
+            title: t('routes.demo.excel.arrayExport'),
+          },
+        },
+        {
+          path: 'importExcel',
+          name: 'ImportExcel',
+          component: () => import('/@/views/demo/excel/ImportExcel.vue'),
+          meta: {
+            title: t('routes.demo.excel.importExcel'),
+          },
+        },
+      ],
+    },
     {
       path: 'testTab/:id',
       name: 'TestTab',

vite.config.ts

@@ -69,7 +69,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       preprocessorOptions: {
         less: {
           modifyVars: {
-            // reference ： Avoid repeated references
+            // reference: Avoid repeated references
             hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
             ...modifyVars,
           },