feat: 初步实现 vite dev 构建

packages/fes-build-vite/package.json

@@ -24,6 +24,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@fesjs/utils": "^2.0.4",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vitejs/plugin-vue-jsx": "^1.3.8",
     "postcss-flexbugs-fixes": "^5.0.2",

packages/fes-build-vite/src/commands/build/index.js

@@ -1,3 +1,11 @@
+/**
+ * outputPath
+ * inlineLimit: 如何实现
+ * publicPath: 就是 base
+ * polyfill： @vitejs/plugin-legacy
+ * 确认 css 最终构建实现 autoprefixer postcss-safe-parser postcss-flexbugs-fixes
+ */
+
 export default () => {
     // console.log(api, 'TODO: 实现 vite build');
 };

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

@@ -0,0 +1,40 @@
+import { getInnerCommonConfig } from '../../common/getConfig';
+import viteMiddlewarePlugin from './viteMiddlewarePlugin';
+
+export default async (api, args) => {
+    const { deepmerge, getPort, changePort, getHostName } = api.utils;
+
+    const port = await getPort(args.port || api.config.viteOption.server?.port);
+    changePort(port);
+
+    const hostname = getHostName(api.config.viteOption.server?.host);
+
+    const { server } = api.config.viteOption;
+
+    const beforeMiddlewares = await api.applyPlugins({
+        key: 'addBeforeMiddlewares',
+        type: api.ApplyPluginsType.add,
+        initialValue: [],
+        args: {},
+    });
+    const middlewares = await api.applyPlugins({
+        key: 'addMiddlewares',
+        type: api.ApplyPluginsType.add,
+        initialValue: [],
+        args: {},
+    });
+
+    return deepmerge(
+        {
+            mode: 'development',
+            plugins: [viteMiddlewarePlugin(beforeMiddlewares, middlewares)],
+            server: {
+                ...server,
+                port,
+                host: hostname,
+                https: process.env.HTTPS || args.https,
+            },
+        },
+        getInnerCommonConfig(api),
+    );
+};

packages/fes-build-vite/src/commands/dev/index.js

@@ -1,49 +1,21 @@
 import { createServer } from 'vite';
-import vue from '@vitejs/plugin-vue';
+import getDevConfig from './getDevConfig';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import { createHtmlPlugin } from 'vite-plugin-html';
-import { join } from 'path';
-import SFCConfigBlockPlugin from '../SFCConfigBlockPlugin';
 
 /**
  * TODO
- * 如何处理 html （比较麻烦，晚点再看看有无更好的方案）
+
- * exportStatic： vite 如何针对不同的路径输出不同的 html
- *
- * 动态更改页面内容
- *
- * 可以支持的能力
- *
- * port
- * host
- * https
- * alias
- * mountElementId
- * outputPath
- * inlineLimit: 如何实现
- * publicPath: 就是 base
- * typescript 的支持，tsx 的支持: vite 默认支持
- * css modules: vite 默认支持
- * 确认 css 最终构建实现 autoprefixer postcss-safe-parser postcss-flexbugs-fixes
- * babel-plugin-import 的支持: 用 vite-plugin-babel-import
- * define and resolveDefine 和 webpack 一致
- * polyfill： @vitejs/plugin-legacy
- *
- * proxy
- *      createRouteMiddleware 能力
- * 确认 mock 能用
- * 可以给 server 添加 middlewares
- *
  *
  * analyze: rollup-plugin-visualizer
  *
  * 其他插件如何对内部配置进行修改
+ *
+ * 共享 webpack 和 vite 的部分配置，降低熟悉 vite 的成本
  */
 
 export default (api) => {
     const {
         paths,
-        utils: { chalk, rimraf, getPort, changePort, getHostName },
+        utils: { chalk, rimraf },
     } = api;
 
     let server;
@@ -68,11 +40,6 @@ export default (api) => {
         async fn({ args = {} }) {
             rimraf.sync(paths.absTmpPath);
 
-            const port = await getPort(args.port || api.config.viteOption?.server?.port);
-            changePort(port);
-
-            const hostname = getHostName(api.config.viteOption?.server?.host);
-
             await api.applyPlugins({
                 key: 'onGenerateFiles',
                 type: api.ApplyPluginsType.event,
@@ -80,41 +47,7 @@ export default (api) => {
 
             api.startWatch();
 
-            server = await createServer({
+            server = await createServer(await getDevConfig(api, args));
-                mode: 'development',
-                define: {
-                    PAGE_TITLE: 'Vite',
-                },
-                plugins: [
-                    vue(),
-                    SFCConfigBlockPlugin,
-                    vueJsx(),
-                    createHtmlPlugin({
-                        minify: true,
-                        entry: join(api.paths.absTmpPath, 'fes.js'),
-                        template: 'public/index.html',
-                        inject: {
-                            data: {
-                                title: 'Vite',
-                            },
-                        },
-                    }),
-                ],
-                configFile: false,
-                cacheDir: join(api.cwd, '.cache'),
-                resolve: {
-                    alias: {
-                        '@': paths.absSrcPath,
-                        '@@': paths.absTmpPath,
-                        '@fesInner': '/',
-                    },
-                },
-                server: {
-                    port,
-                    host: hostname,
-                    https: process.env.HTTPS || args.https,
-                },
-            });
             await server.listen();
 
             server.printUrls();

packages/fes-build-vite/src/commands/dev/viteMiddlewarePlugin.js

@@ -0,0 +1,14 @@
+export default (beforeMiddlewares = [], afterMiddlewares = []) => ({
+    name: 'server-middleware-plugin',
+    configureServer(server) {
+        beforeMiddlewares.forEach((middleware) => {
+            server.middlewares.use(middleware);
+        });
+
+        return () => {
+            afterMiddlewares.forEach((middleware) => {
+                server.middlewares.use(middleware);
+            });
+        };
+    },
+});

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

@@ -1,3 +1,48 @@
-export function getConfig() {
+import { join } from 'path';
-    return {};
+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';
+
+// TODO
+// * 如何处理 html (改 mountId or title 等)（比较麻烦，晚点再看看有无更好的方案）
+
+export function getInnerCommonConfig(api) {
+    const { deepmerge } = api.utils;
+    const { server, build, define, base, ...otherViteOption } = api.config.viteOption;
+
+    const publicPath = base || api.config.publicPath;
+
+    return deepmerge(
+        {
+            configFile: false,
+            define: getDefine(api, publicPath),
+            cacheDir: join(api.cwd, '.cache'),
+            plugins: [
+                vue(api.config.viteVuePlugin || {}),
+                SFCConfigBlockPlugin,
+                vueJsx(api.config.viteVueJsx || {}),
+                createHtmlPlugin({
+                    minify: true,
+                    entry: join(api.paths.absTmpPath, 'fes.js'),
+                    template: 'public/index.html',
+                    inject: {
+                        data: {
+                            title: 'Fes.js',
+                            mountElementId: api.config.mountElementId,
+                        },
+                    },
+                }),
+            ],
+            resolve: {
+                alias: {
+                    '@': api.paths.absSrcPath,
+                    '@@': api.paths.absTmpPath,
+                    [api.builder.innerDepPrefix]: '/',
+                },
+            },
+        },
+        otherViteOption,
+    );
 }

packages/fes-build-vite/src/common/getDefine.js

@@ -0,0 +1,16 @@
+import { resolveRuntimeEnv, stringifyObjValue } from '@fesjs/utils';
+
+export default (api, publicPath) => {
+    const viteOption = api.config.viteOption;
+    const env = resolveRuntimeEnv(publicPath);
+
+    const define = stringifyObjValue({
+        ...api.config.define,
+        ...viteOption.define,
+    });
+
+    return {
+        'process.env': env,
+        ...define,
+    };
+};

packages/fes-build-vite/src/features/viteOption.js

@@ -0,0 +1,11 @@
+export default (api) => {
+    api.describe({
+        key: 'viteOption',
+        config: {
+            schema(joi) {
+                return joi.object();
+            },
+            default: {},
+        },
+    });
+};

packages/fes-build-vite/src/features/viteVueJsx.js

@@ -0,0 +1,11 @@
+export default (api) => {
+    api.describe({
+        key: 'viteVueJsx',
+        config: {
+            schema(joi) {
+                return joi.object();
+            },
+            default: {},
+        },
+    });
+};

packages/fes-build-vite/src/features/viteVuePlugin.js

@@ -0,0 +1,11 @@
+export default (api) => {
+    api.describe({
+        key: 'viteVuePlugin',
+        config: {
+            schema(joi) {
+                return joi.object();
+            },
+            default: {},
+        },
+    });
+};

packages/fes-build-vite/src/index.js

@@ -2,6 +2,9 @@ export default function () {
     return {
         plugins: [
             // bundle configs
+            require.resolve('./features/viteOption'),
+            require.resolve('./features/viteVueJsx'),
+            require.resolve('./features/viteVuePlugin'),
 
             // commands
             require.resolve('./commands/build'),

packages/fes-build-vite/types.d.ts

@@ -0,0 +1,10 @@
+import type {UserConfig} from 'vite';
+import type {Options} from '@vitejs/plugin-vue'
+import createPlugin from '@vitejs/plugin-vue-jsx'
+
+
+export interface ViteBuildConfig {
+    viteOption: UserConfig;
+    viteVuePlugin: Options;
+    viteVueJsx: Parameters<typeof createPlugin>[0];
+}

packages/fes-build-webpack/package.json

@@ -42,7 +42,6 @@
     "babel-plugin-import": "1.13.3",
     "cli-highlight": "^2.1.4",
     "cliui": "7.0.4",
-    "connect-history-api-fallback": "^1.6.0",
     "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^3.0.0",

packages/fes-build-webpack/src/plugins/commands/dev/createRouteMiddleware.js

@@ -1,19 +0,0 @@
-import { extname, join } from 'path';
-import historyFallback from 'connect-history-api-fallback';
-
-const ASSET_EXT_NAMES = ['.ico', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
-
-export default (api) => (req, res, next) => {
-    const proxyConfig = api.config.proxy;
-    if (proxyConfig && Object.keys(proxyConfig).some((path) => req.path.startsWith(path))) {
-        return next();
-    }
-    if (req.path === '/favicon.ico') {
-        return res.sendFile(join(__dirname, 'fes.png'));
-    }
-    if (ASSET_EXT_NAMES.includes(extname(req.path))) {
-        return next();
-    }
-    const history = historyFallback();
-    history(req, res, next);
-};

packages/fes-build-webpack/src/plugins/commands/dev/index.js

@@ -36,9 +36,7 @@ export default (api) => {
         ],
         async fn({ args = {} }) {
             const { cleanTmpPathExceptCache, getBundleAndConfigs } = require('../buildDevUtils');
-            const createRouteMiddleware = require('./createRouteMiddleware').default;
 
-            console.log(args.port || api.config.devServer?.port);
             port = await getPort(args.port || api.config.devServer?.port);
             changePort(port);
 
@@ -82,7 +80,7 @@ export default (api) => {
                 port,
                 proxy: api.config.proxy,
                 https: isHTTPS,
-                beforeMiddlewares: [...beforeMiddlewares, createRouteMiddleware(api)],
+                beforeMiddlewares: [...beforeMiddlewares],
                 afterMiddlewares: [...middlewares],
                 customerDevServerConfig: api.config.devServer,
             });

packages/fes-build-webpack/src/plugins/commands/webpackConfig/define.js

@@ -1,6 +1,19 @@
 import webpack from 'webpack';
-import resolveDefine from './resolveDefine';
+import { resolveRuntimeEnv, stringifyObjValue } from '@fesjs/utils';
 
-export default function createDefineWebpackConfig({ config, webpackConfig }) {
+export default function createDefineWebpackConfig({ config, publicPath, webpackConfig }) {
-    webpackConfig.plugin('define').use(webpack.DefinePlugin, [resolveDefine(config)]);
+    const env = stringifyObjValue(resolveRuntimeEnv(publicPath));
+
+    const define = stringifyObjValue({
+        __VUE_OPTIONS_API__: true,
+        __VUE_PROD_DEVTOOLS__: false,
+        ...config.define,
+    });
+
+    webpackConfig.plugin('define').use(webpack.DefinePlugin, [
+        {
+            'process.env': env,
+            ...define,
+        },
+    ]);
 }

packages/fes-build-webpack/src/plugins/commands/webpackConfig/html.js

@@ -1,14 +1,13 @@
 import { join, resolve } from 'path';
 import { existsSync } from 'fs';
-import { winPath } from '@fesjs/utils';
+import { winPath, resolveRuntimeEnv } from '@fesjs/utils';
-import resolveDefine from './resolveDefine';
 
-export default async function createHtmlWebpackConfig({ api, cwd, config, webpackConfig, headScripts, isProd }) {
+export default async function createHtmlWebpackConfig({ api, cwd, config, webpackConfig, headScripts, isProd, publicPath }) {
     const htmlOptions = {
         title: 'fes.js',
         filename: '[name].html',
         ...config.html,
-        templateParameters: resolveDefine(config, true),
+        templateParameters: resolveRuntimeEnv(publicPath),
         mountElementId: config.mountElementId,
     };
 
@@ -48,7 +47,7 @@ export default async function createHtmlWebpackConfig({ api, cwd, config, webpac
                             ...config.html,
                             title: route?.meta?.title || config.html.title || 'fes.js',
                             filename: _fileName,
-                            templateParameters: resolveDefine(config, true),
+                            templateParameters: resolveRuntimeEnv(publicPath),
                             mountElementId: config.mountElementId,
                         };
                         webpackConfig.plugin(_fileName).use(require.resolve('html-webpack-plugin'), [_htmlOptions]);

packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js

@@ -214,6 +214,7 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         webpackConfig,
         headScripts,
         isProd,
+        publicPath,
     });
 
     // --------------- copy -----------
@@ -256,6 +257,7 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
     // --------------- define -----------
     createDefineWebpackConfig({
         config,
+        publicPath,
         webpackConfig,
     });
 

packages/fes-build-webpack/src/plugins/commands/webpackConfig/resolveDefine.js

@@ -1,41 +0,0 @@
-const prefixRE = /^FES_APP_/;
-
-const ENV_SHOULD_PASS = ['NODE_ENV', 'FES_ENV'];
-
-export default function resolveDefine(opts = {}, raw) {
-    const env = {};
-    Object.keys(process.env).forEach((key) => {
-        if (prefixRE.test(key) || ENV_SHOULD_PASS.includes(key)) {
-            env[key] = process.env[key];
-        }
-    });
-
-    env.BASE_URL = opts.publicPath;
-
-    if (raw) {
-        return env;
-    }
-
-    for (const key in env) {
-        if (Object.prototype.hasOwnProperty.call(env, key)) {
-            env[key] = JSON.stringify(env[key]);
-        }
-    }
-
-    const define = {
-        __VUE_OPTIONS_API__: true,
-        __VUE_PROD_DEVTOOLS__: false,
-        ...opts.define,
-    };
-
-    for (const key in define) {
-        if (Object.prototype.hasOwnProperty.call(define, key)) {
-            define[key] = JSON.stringify(define[key]);
-        }
-    }
-
-    return {
-        'process.env': env,
-        ...define,
-    };
-}

packages/fes-build-webpack/src/plugins/registerMethods.js

@@ -1,7 +1,6 @@
 export default function (api) {
     [
         'addHTMLHeadScripts',
-        'addMiddlewares',
         'modifyBundleConfigOpts',
         'modifyBundleConfig',
         'modifyBabelOpts',

packages/fes-build-webpack/types.d.ts

@@ -0,0 +1,5 @@
+
+
+export interface WebpackBuildConfig {
+    
+}

packages/fes-compiler/src/config/utils/mergeDefault.js

@@ -1,6 +1,5 @@
 import { deepmerge, lodash } from '@fesjs/utils';
 
-
 export default ({ defaultConfig, config }) => {
     if (lodash.isPlainObject(defaultConfig) && lodash.isPlainObject(config)) {
         return deepmerge(defaultConfig, config);

packages/fes-preset-built-in/package.json

@@ -28,11 +28,14 @@
     "@fesjs/compiler": "^2.0.5",
     "@fesjs/utils": "^2.0.4",
     "body-parser": "^1.19.0",
+    "connect-history-api-fallback": "^1.6.0",
+    "cookie": "^0.4.2",
     "cookie-parser": "^1.4.5",
     "envinfo": "^7.7.3",
+    "mime": "^3.0.0",
     "mockjs": "^1.1.0"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.0.5"
   }
-}
+}

packages/fes-preset-built-in/src/plugins/features/mock.js

@@ -3,7 +3,28 @@ import { resolve } from 'path';
 import { chokidar, lodash, parseRequireDeps } from '@fesjs/utils';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
+import cookie from 'cookie';
 import mockjs from 'mockjs';
+import mime from 'mime';
+
+function getContentType(type) {
+    return type.indexOf('/') === -1 ? mime.getType(type) : type;
+}
+
+function setCookie(res, name, value, opts = {}) {
+    const val = typeof value === 'object' ? `j:${JSON.stringify(value)}` : String(value);
+
+    if ('maxAge' in opts) {
+        opts.expires = new Date(Date.now() + opts.maxAge);
+        opts.maxAge /= 1000;
+    }
+
+    if (opts.path == null) {
+        opts.path = '/';
+    }
+
+    res.setHeader('Set-Cookie', cookie.serialize(name, String(val), opts));
+}
 
 export default (api) => {
     let mockFlag = false; // mock 开关flag
@@ -132,40 +153,44 @@ export default (api) => {
 
         return (req, res, next) => {
             // 如果请求不是以 cgiMock.prefix 开头，直接 next
-            if (!req.path.startsWith(mockPrefix)) {
+            if (!req.url.startsWith(mockPrefix)) {
                 return next();
             }
             // 请求以 cgiMock.prefix 开头，匹配处理
-            const matchRequet = requestList.find((item) => req.path.search(item.url) !== -1);
+            const matchRequet = requestList.find((item) => req.url.search(item.url) !== -1);
             if (!matchRequet) {
                 return next();
             }
 
             const sendData = () => {
-                // set header
+                if (matchRequet.headers) {
-                res.set(matchRequet.headers);
+                    for (const [key, value] of Object.entries(matchRequet.headers)) {
-                // set Content-Type
+                        res.setHeader(key, value);
-                matchRequet.type && res.type(matchRequet.type);
+                    }
+                }
+                if (matchRequet.type) {
+                    res.setHeader('Content-Type', getContentType(matchRequet.type));
+                }
                 // set status code
-                res.status(matchRequet.statusCode);
+                res.statusCode = matchRequet.statusCode;
                 // set cookie
                 traversalHandler(matchRequet.cookies, (item) => {
                     const name = item.name;
                     const value = item.value;
                     delete item.name;
                     delete item.value;
-                    res.cookie(name, value, item);
+                    setCookie(res, name, value, item);
                 });
 
                 // do result
                 if (lodash.isFunction(matchRequet.result)) {
                     matchRequet.result(req, res);
                 } else if (lodash.isArray(matchRequet.result) || lodash.isPlainObject(matchRequet.result)) {
-                    !matchRequet.type && res.type('json');
+                    !matchRequet.type && res.setHeader('Content-Type', getContentType('json'));
-                    res.json(matchRequet.result);
+                    res.end(JSON.stringify(matchRequet.result));
                 } else {
-                    !matchRequet.type && res.type('text');
+                    !matchRequet.type && res.setHeader('Content-Type', getContentType('text'));
-                    res.send(matchRequet.result.toString());
+                    res.end(matchRequet.result.toString());
                 }
             };
 

packages/fes-preset-built-in/src/plugins/features/proxy.js

@@ -1,3 +1,21 @@
+import { extname } from 'path';
+import historyFallback from 'connect-history-api-fallback';
+
+const ASSET_EXT_NAMES = ['.ico', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
+
+const proxyMiddleware = (api) => (req, res, next) => {
+    const proxyConfig = api.config.proxy;
+    if (proxyConfig && Object.keys(proxyConfig).some((path) => req.url.startsWith(path))) {
+        return next();
+    }
+
+    if (ASSET_EXT_NAMES.includes(extname(req.url))) {
+        return next();
+    }
+    const history = historyFallback();
+    history(req, res, next);
+};
+
 export default (api) => {
     api.describe({
         key: 'proxy',
@@ -10,4 +28,6 @@ export default (api) => {
             },
         },
     });
+
+    api.addBeforeMiddlewares(() => proxyMiddleware(api));
 };

packages/fes-preset-built-in/src/plugins/registerMethods.js

@@ -22,6 +22,7 @@ export default function (api) {
         'addTmpGenerateWatcherPaths',
 
         'addBeforeMiddlewares',
+        'addMiddlewares',
     ].forEach((name) => {
         api.registerMethod({ name });
     });

packages/fes-template-h5/.fes.js

@@ -3,9 +3,11 @@ import pxtoviewport from '@ttou/postcss-px-to-viewport';
 import { defineBuildConfig } from '@fesjs/fes';
 
 export default defineBuildConfig({
-    define: {
+    proxy: {
-        // __VUE_OPTIONS_API__: true,
+        '/v2': {
-        // __VUE_PROD_DEVTOOLS__: false
+            'target': 'https://api.douban.com/',
+            'changeOrigin': true,
+        }
     },
     publicPath: '/',
     request: {

packages/fes-template-h5/src/pages/index.vue

@@ -26,31 +26,11 @@ export default {
         const clickIcon = () => {
             console.log('click Icon');
         };
+        console.log(process.env.NODE_ENV, process.env.HELLO);
         console.log(useRoute());
-        // request('/api', null, {
+        request('/v2/movie/in_theaters_proxy', (res) => {
-        // }).then((res) => {
+            console.log(res);
-        //     console.log(res);
+        });
-        // });
-        // request('/api', null, {
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     mergeRequest: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     mergeRequest: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     throttle: 3000,
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
 
         const get = (id) => {
             request(
@@ -74,61 +54,9 @@ export default {
             });
         };
 
-        get(1);
+        // get(1);
-        // get(2);
+        // post(3);
-        // get(3);
 
-        // post(1);
-        // post(2);
-        post(3);
-
-        // setTimeout(() => {
-        //     request('/api', null, {
-        //         throttle: 3000,
-        //         cache: true
-        //     }).then((res) => {
-        //         console.log(res);
-        //     });
-        // }, 1000);
-
-        // setTimeout(() => {
-        //     request('/api', null, {
-        //         throttle: 3000,
-        //         cache: true
-        //     }).then((res) => {
-        //         console.log(res);
-        //     });
-        //     request('/api', null, {
-        //         throttle: 3000,
-        //         cache: true
-        //     }).then((res) => {
-        //         console.log(res);
-        //     });
-        // }, 3200);
-
-        // request('/api', null, {
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-
-        // request('/api', null, {
-        //     // skipErrorHandler: [500]
-        // }).then((res) => {
-        //     console.log(res);
-        // }).catch((err) => {
-        //     console.log('inner error', err);
-        // });
         return {
             fes,
             rotate,

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

@@ -3,6 +3,12 @@ import pxtoviewport from '@ttou/postcss-px-to-viewport';
 import { defineBuildConfig } from '@fesjs/fes';
 
 export default defineBuildConfig({
+    proxy: {
+        '/v2': {
+            'target': 'https://api.douban.com/',
+            'changeOrigin': true,
+        }
+    },
     request: {
         dataField: 'result'
     },

packages/fes-template-vite/index.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="format-detection" content="email=no" />
-  <meta name="viewport"
-    content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
-  <title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
-  <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
-</head>
-
-<body ontouchstart="">
-  <div id="app"></div>
-  <script type="module" src="/src/.fes/fes.js"></script>
-  <!-- built files will be auto injected -->
-</body>
-
-</html>

packages/fes-template-vite/public/index.html

@@ -11,13 +11,13 @@
   <meta name="viewport"
     content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
   <title>
-    <%= PAGE_TITLE %>
+    <%= title %>
   </title>
   <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
 </head>
 
 <body ontouchstart="">
-  <div id="app"></div>
+  <div id="<%= mountElementId %>"></div>
   <script type="module" src="/src/.fes/fes.js"></script>
   <!-- built files will be auto injected -->
 </body>

packages/fes-template-vite/src/app.js

@@ -11,8 +11,6 @@ export default defineRuntimeConfig({
             },
             default(error) {
                 console.log(error);
-                const msg = error?.data?.msg || error?.msg;
-                console.log(msg);
             },
         },
     },

packages/fes-template-vite/src/pages/index.vue

@@ -30,83 +30,10 @@ export default {
             console.log('click Icon');
         };
 
-        const get = (id) => {
+        request('/v2/movie/in_theaters_proxy', (res) => {
-            request(
+            console.log(res);
-                '/get/api',
+        });
-                { id },
-                {
-                    method: 'get',
-                },
-            );
-        };
 
-        const post = (id) => {
-            request(
-                '/api',
-                { id },
-                {
-                    responseType: 'blob',
-                },
-            ).then((data) => {
-                console.log(data);
-            });
-        };
-
-        get(1);
-        // get(2);
-        // get(3);
-
-        // post(1);
-        // post(2);
-        post(3);
-
-        // setTimeout(() => {
-        //     request('/api', null, {
-        //         throttle: 3000,
-        //         cache: true
-        //     }).then((res) => {
-        //         console.log(res);
-        //     });
-        // }, 1000);
-
-        // setTimeout(() => {
-        //     request('/api', null, {
-        //         throttle: 3000,
-        //         cache: true
-        //     }).then((res) => {
-        //         console.log(res);
-        //     });
-        //     request('/api', null, {
-        //         throttle: 3000,
-        //         cache: true
-        //     }).then((res) => {
-        //         console.log(res);
-        //     });
-        // }, 3200);
-
-        // request('/api', null, {
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-
-        // request('/api', null, {
-        //     // skipErrorHandler: [500]
-        // }).then((res) => {
-        //     console.log(res);
-        // }).catch((err) => {
-        //     console.log('inner error', err);
-        // });
         return {
             fes,
             rotate,

packages/fes-template/src/pages/mock.vue

@@ -1,7 +1,5 @@
 <template>
-    <div>
+    <div>mock and proxy</div>
-        mock and proxy
-    </div>
 </template>
 <config>
 {
@@ -37,8 +35,8 @@ request(
     { a: 1 },
     {
         method: 'get',
-        headers: { Accept: '*/*' }
+        headers: { Accept: '*/*' },
-    }
+    },
 )
     .then((resp) => {
         console.log(resp);

packages/fes-utils/src/index.js

@@ -29,6 +29,8 @@ import getAppPath from './getAppPath';
 import getPort from './getPort';
 import changePort from './changePort';
 import getHostName from './getHostName';
+import resolveRuntimeEnv from './resolveRuntimeEnv';
+import stringifyObjValue from './stringifyObjValue';
 
 export {
     chalk,
@@ -64,4 +66,6 @@ export {
     getPort,
     changePort,
     getHostName,
+    resolveRuntimeEnv,
+    stringifyObjValue,
 };

packages/fes-utils/src/resolveRuntimeEnv.js

@@ -0,0 +1,16 @@
+const prefixRE = /^FES_APP_/;
+
+const ENV_SHOULD_PASS = ['NODE_ENV', 'FES_ENV'];
+
+export default (publicPath) => {
+    const env = {};
+    Object.keys(process.env).forEach((key) => {
+        if (prefixRE.test(key) || ENV_SHOULD_PASS.includes(key)) {
+            env[key] = process.env[key];
+        }
+    });
+
+    env.BASE_URL = publicPath;
+
+    return env;
+};

packages/fes-utils/src/stringifyObjValue.js

@@ -0,0 +1,12 @@
+import lodash from 'lodash';
+
+export default (obj) => {
+    const newObj = lodash.cloneDeep(obj);
+    for (const key in newObj) {
+        if (Object.prototype.hasOwnProperty.call(newObj, key)) {
+            newObj[key] = JSON.stringify(newObj[key]);
+        }
+    }
+
+    return newObj;
+};

yarn.lock

@@ -5057,7 +5057,7 @@ cookie@0.4.1:
   resolved "https://registry.npmmirror.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
   integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
 
-cookie@0.4.2:
+cookie@0.4.2, cookie@^0.4.2:
   version "0.4.2"
   resolved "https://registry.npmmirror.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
@@ -9401,6 +9401,11 @@ mime@^2.4.4:
   resolved "https://registry.npmmirror.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
   integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
 
+mime@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"