feat: add farm startup mode

build/info.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from "vite";
 import { getPackageSize } from "./utils";
 import dayjs, { type Dayjs } from "dayjs";
-import duration from "dayjs/plugin/duration";
+import duration from "dayjs/plugin/duration.js";
 import gradientString from "gradient-string";
 import boxen, { type Options as BoxenOptions } from "boxen";
 dayjs.extend(duration);

build/plugins.ts

@@ -19,13 +19,18 @@ export function getPluginsList(
   VITE_COMPRESSION: ViteCompression
 ): PluginOption[] {
   const lifecycle = process.env.npm_lifecycle_event;
+
   return [
     vue(),
     // jsx、tsx语法支持
     vueJsx(),
     VueI18nPlugin({
+      runtimeOnly: true,
       jitCompilation: false,
-      include: [pathResolve("../locales/**")]
+      compositionOnly: true,
+      include: [
+        pathResolve(process.env.FARM_FE ? "./locales/**" : "../locales/**")
+      ]
     }),
     viteBuildInfo(),
     /**
@@ -53,7 +58,9 @@ export function getPluginsList(
     VITE_CDN ? cdn : null,
     configCompressPlugin(VITE_COMPRESSION),
     // 线上环境删除console
-    removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
+    process.env.FARM_FE
+      ? null
+      : removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
     // 打包分析
     lifecycle === "report"
       ? visualizer({ open: true, brotliSize: true, filename: "report.html" })

build/utils.ts

@@ -19,7 +19,23 @@ const root: string = process.cwd();
  * @param dir 路径片段，默认`build`
  * @param metaUrl 模块的完整`url`，如果在`build`目录外调用必传`import.meta.url`
  */
-const pathResolve = (dir = ".", metaUrl = import.meta.url) => {
+const pathResolveFarm = (dir = ".", metaUrl = root) => {
+  // 当前文件目录的绝对路径
+  const currentFileDir = metaUrl;
+  // build 目录的绝对路径
+  const buildDir = resolve(currentFileDir, "build");
+  // 解析的绝对路径
+  const resolvedPath = resolve(currentFileDir, dir);
+  // 检查解析的绝对路径是否在 build 目录内
+  if (resolvedPath.startsWith(buildDir)) {
+    // 在 build 目录内，返回当前文件路径
+    return fileURLToPath(metaUrl);
+  }
+  // 不在 build 目录内，返回解析后的绝对路径
+  return resolvedPath;
+};
+
+const pathResolveVite = (dir = ".", metaUrl = import.meta.url) => {
   // 当前文件目录的绝对路径
   const currentFileDir = dirname(fileURLToPath(metaUrl));
   // build 目录的绝对路径
@@ -35,15 +51,18 @@ const pathResolve = (dir = ".", metaUrl = import.meta.url) => {
   return resolvedPath;
 };
 
+const pathResolve = process.env.FARM_FE ? pathResolveFarm : pathResolveVite;
+
 /** 设置别名 */
 const alias: Record<string, string> = {
-  "@": pathResolve("../src"),
+  "@": pathResolve(process.env.FARM_FE ? "src" : "../src"),
   "@build": pathResolve()
 };
 
 /** 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示 */
 const __APP_INFO__ = {
   pkg: { name, version, engines, dependencies, devDependencies },
+  // lastBuildTime: "2024-03-24 14:39:02"
   lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
 };
 

farm.config.ts

@@ -0,0 +1,71 @@
+import { getPluginsList } from "./build/plugins";
+import { type UserConfigExport, type ConfigEnv, loadEnv } from "@farmfe/core";
+import { root, alias, warpperEnv, __APP_INFO__ } from "./build/utils";
+import postcss from "@farmfe/js-plugin-postcss";
+import sass from "@farmfe/js-plugin-sass";
+
+export default ({ mode }: ConfigEnv): UserConfigExport => {
+  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =
+    warpperEnv(loadEnv(mode, root)[0]);
+  return {
+    compilation: {
+      presetEnv: false,
+      output: {
+        publicPath: VITE_PUBLIC_PATH,
+        targetEnv: "browser-es2015",
+        filename: "static/[ext]/[name]-[hash].[ext]",
+        assetsFilename: "static/[ext]/[name]-[hash].[ext]"
+      },
+      resolve: {
+        alias
+      },
+      script: {
+        plugins: [
+          {
+            name: "@swc/plugin-remove-console",
+            options: {
+              exclude: ["error"]
+            },
+            filters: {
+              moduleTypes: ["js", "ts", "jsx", "tsx"]
+            }
+          }
+        ]
+      },
+      externalNodeBuiltins: false,
+      define: {
+        __INTLIFY_PROD_DEVTOOLS__: false,
+        __APP_INFO__: process.env.FARM_FE
+          ? __APP_INFO__
+          : JSON.stringify(__APP_INFO__)
+      }
+    },
+    root,
+    // 服务端渲染
+    server: {
+      // open: true,
+      port: VITE_PORT
+    },
+    plugins: [
+      sass({
+        legacy: true
+      }),
+      postcss(),
+      {
+        name: "remove-css-filter-plugin",
+        priority: 0,
+        transform: {
+          filters: {
+            resolvedPaths: ["element-plus/dist/index.css"]
+          },
+          async executor({ content }) {
+            return {
+              content: content.replace(/filter:\s*alpha\(opacity=0\);/g, "")
+            };
+          }
+        }
+      }
+    ],
+    vitePlugins: getPluginsList(VITE_CDN, VITE_COMPRESSION)
+  };
+};

package.json

@@ -5,11 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
+    "dev:farm": "NODE_OPTIONS=--max-old-space-size=4096 FARM_FE=true farm",
     "serve": "pnpm dev",
     "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build && generate-version-file",
+    "build:farm": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 FARM_FE=true farm build && generate-version-file",
     "build:staging": "rimraf dist && vite build --mode staging",
     "report": "rimraf dist && vite build",
     "preview": "vite preview",
+    "preview:farm": "farm preview",
     "preview:build": "pnpm build && vite preview",
     "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
     "svgo": "svgo -f . -r",
@@ -117,11 +120,17 @@
     "@commitlint/types": "^19.0.3",
     "@eslint/js": "^8.57.0",
     "@faker-js/faker": "^8.4.1",
+    "@farmfe/cli": "^1.0.0",
+    "@farmfe/core": "^1.0.10",
+    "@farmfe/js-plugin-postcss": "^1.5.0",
+    "@farmfe/js-plugin-sass": "^2.5.1",
+    "@farmfe/plugin-sass": "^1.0.0",
     "@iconify-icons/ep": "^1.2.12",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@pureadmin/theme": "^3.2.0",
+    "@swc/plugin-remove-console": "1.5.113",
     "@types/dagre": "^0.7.52",
     "@types/gradient-string": "^1.1.5",
     "@types/intro.js": "^5.1.5",

postcss.config.js

@@ -3,7 +3,7 @@
 /** @type {import('postcss-load-config').Config} */
 export default {
   plugins: {
-    "postcss-import": {},
+    // "postcss-import": {},
     "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},

src/plugins/i18n.ts

@@ -12,7 +12,7 @@ const siphonI18n = (function () {
   // 仅初始化一次国际化配置
   let cache = Object.fromEntries(
     Object.entries(
-      import.meta.glob("../../locales/*.y(a)?ml", { eager: true })
+      import.meta.glob("../../locales/*.{yml,yaml}", { eager: true })
     ).map(([key, value]: any) => {
       const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1];
       return [matched, value.default];