feat: 升级 vite3 (#143)

* feat: 升级 vite3

* fix: 处理 postcss.config.js 不存在的情况

packages/fes-builder-vite/package.json

@@ -27,16 +27,17 @@
   "dependencies": {
     "@babel/core": "^7.17.9",
     "@fesjs/utils": "^3.0.0-beta.0",
-    "@vitejs/plugin-legacy": "^1.8.2",
-    "@vitejs/plugin-vue": "^2.2.4",
-    "@vitejs/plugin-vue-jsx": "^1.3.8",
+    "@vitejs/plugin-basic-ssl": "^0.1.1",
+    "@vitejs/plugin-legacy": "^2.0.0",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
     "autoprefixer": "^10.4.4",
     "babel-plugin-polyfill-corejs3": "^0.5.2",
     "less": "^4.1.2",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-safe-parser": "^6.0.0",
     "rollup-plugin-visualizer": "^5.6.0",
-    "vite": "^2.9.14",
+    "vite": "^3.0.4",
     "vite-plugin-html": "^3.2.0"
   },
   "peerDependencies": {

packages/fes-builder-vite/src/commands/build/getBuildConfig.js

@@ -1,5 +1,5 @@
-import { getInnerCommonConfig } from '../../common/getConfig';
 import legacy from '@vitejs/plugin-legacy';
+import { getInnerCommonConfig } from '../../common/getConfig';
 
 export default async (api) => {
     const { deepmerge, getTargetsAndBrowsersList } = api.utils;

packages/fes-builder-vite/src/commands/dev/getDevConfig.js

@@ -1,3 +1,4 @@
+import basicSsl from '@vitejs/plugin-basic-ssl';
 import { getInnerCommonConfig } from '../../common/getConfig';
 import viteMiddlewarePlugin from './viteMiddlewarePlugin';
 
@@ -24,15 +25,17 @@ export default async (api, args) => {
         args: {},
     });
 
+    const isHTTPS = !!(process.env.HTTPS || args.https);
+
     const bundleConfig = deepmerge(getInnerCommonConfig(api), {
         mode: 'development',
-        plugins: [viteMiddlewarePlugin(beforeMiddlewares, middlewares)],
+        plugins: [viteMiddlewarePlugin(beforeMiddlewares, middlewares), isHTTPS && basicSsl()].filter(Boolean),
         server: {
             ...server,
             proxy: server?.proxy || api.config.proxy,
             port,
             host: hostname,
-            https: process.env.HTTPS || args.https,
+            https: isHTTPS,
         },
     });
 

packages/fes-builder-vite/src/common/getConfig.js

@@ -1,10 +1,20 @@
 import { join } from 'path';
+import { existsSync } from 'fs';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import SFCConfigBlockPlugin from './SFCConfigBlockPlugin';
 import getDefine from './getDefine';
 
+function getPostcssConfig(api) {
+    // TODO 支持其他 postcss 配置文件类型
+    const configPath = `${api.paths.cwd}/postcss.config.js`;
+    if (existsSync(configPath)) {
+        return require(`${api.paths.cwd}/postcss.config.js`);
+    }
+    return {};
+}
+
 export function getInnerCommonConfig(api) {
     const { deepmerge, resolveRuntimeEnv } = api.utils;
     const { server, build, define, base, ...otherViteOption } = api.config.viteOption;
@@ -17,6 +27,11 @@ export function getInnerCommonConfig(api) {
             configFile: false,
             define: getDefine(api, publicPath),
             cacheDir: join(api.cwd, '.cache'),
+            css: {
+                postcss: {
+                    ...getPostcssConfig(api),
+                },
+            },
             plugins: [
                 vue(api.config.viteVuePlugin || {}),
                 SFCConfigBlockPlugin,

packages/fes-template-vite/package.json

@@ -43,25 +43,26 @@
     "access": "public"
   },
   "dependencies": {
+    "@fesjs/builder-vite": "^3.0.0-beta.0",
     "@fesjs/fes": "^3.0.0-beta.0",
+    "@fesjs/fes-design": "^0.5.0",
     "@fesjs/plugin-access": "^3.0.0-beta.0",
+    "@fesjs/plugin-enums": "^3.0.0-beta.0",
+    "@fesjs/plugin-icon": "^3.0.0-beta.0",
+    "@fesjs/plugin-jest": "^2.0.0",
     "@fesjs/plugin-layout": "^5.0.0-beta.0",
     "@fesjs/plugin-locale": "^4.0.0-beta.0",
     "@fesjs/plugin-model": "^3.0.0-beta.0",
-    "@fesjs/plugin-enums": "^3.0.0-beta.0",
-    "@fesjs/plugin-jest": "^2.0.0",
-    "@fesjs/plugin-vuex": "^3.0.0-beta.0",
-    "@fesjs/plugin-icon": "^3.0.0-beta.0",
+    "@fesjs/plugin-monaco-editor": "^3.0.0-beta.0",
+    "@fesjs/plugin-pinia": "^3.0.0-beta.0",
     "@fesjs/plugin-request": "^3.0.0-beta.0",
     "@fesjs/plugin-sass": "^3.0.0-beta.0",
-    "@fesjs/plugin-monaco-editor": "^3.0.0-beta.0",
+    "@fesjs/plugin-vuex": "^3.0.0-beta.0",
     "@fesjs/plugin-windicss": "^3.0.0-beta.0",
-    "@fesjs/plugin-pinia": "^3.0.0-beta.0",
-    "@fesjs/fes-design": "^0.5.0",
-    "@fesjs/builder-vite": "^3.0.0-beta.0",
+    "cssnano": "^5.1.12",
+    "pinia": "^2.0.11",
     "vue": "^3.0.5",
-    "vuex": "^4.0.0",
-    "pinia": "^2.0.11"
+    "vuex": "^4.0.0"
   },
   "private": true
-}
+}

packages/fes-template-vite/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('cssnano')({
+            preset: 'default',
+        }),
+    ],
+};

scripts/build.mjs

@@ -150,7 +150,7 @@ function watchFile(dir, outputDir, config, log) {
             const outputPath = changeFile.replace(dir, outputDir);
             const stat = fs.lstatSync(changeFile);
             log(`[${event}] ${shortChangeFile}`);
-            if (config.resolveCopy.some((item) => changeFile.startsWith(item))) {
+            if (config.resolveCopy?.some((item) => changeFile.startsWith(item))) {
                 fse.copySync(changeFile, outputPath);
             } else if (stat.isFile()) {
                 transformFile(changeFile, outputPath, config, log);