@jiangliffey/elpis 1.0.0

package/app/webpack/config/webpack.base.js

@@ -0,0 +1,203 @@
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+
+// 动态构造 elpisPageEntries elpisHtmlWebpackPluginList
+const elpisPageEntries = {};
+const elpisHtmlWebpackPluginList = [];
+// 获取 elpis/app/pages 目录下所有入口文件 （entry.xx.js）
+const elpisEntryList = path.resolve(__dirname, '../../pages/**/entry.*.js')
+glob.sync(elpisEntryList).forEach(file => {
+    handleFile(file, elpisPageEntries, elpisHtmlWebpackPluginList);
+});
+
+// 动态构造 businessPageEntries businessHtmlWebpackPluginList
+const businessPageEntries = {};
+const businessHtmlWebpackPluginList = [];
+// 获取 业务/app/pages 目录下所有入口文件 （entry.xx.js）
+const businessEntryList = path.resolve(process.cwd(), './app/pages/**/entry.*.js')
+glob.sync(businessEntryList).forEach(file => {
+    handleFile(file, businessPageEntries, businessHtmlWebpackPluginList);
+});
+
+// 构造相关 webpack 处理的数据结构
+function handleFile(file, entries = {}, htmlWebpackPluginList = []) {
+    const entryName = path.basename(file, '.js');
+    // 构造entry
+    entries[entryName] = path.resolve(process.cwd(), file);
+    // 构造最终渲染的页面文件
+    htmlWebpackPluginList.push(
+        // html-webpack-plugin 辅助注入打包后的 bundle 文件到 tpl 文件中
+        new HtmlWebpackPlugin({
+            // 产物（最终模板）输出路径
+            filename: path.resolve(process.cwd(), './app/public/dist/', `${entryName}.tpl`),
+            // 指定要使用的模板文件
+            template: path.resolve(__dirname, '../../view/entry.tpl'),
+            // 要注入的代码块
+            chunks: [ entryName ]
+        })
+    )
+}
+
+/**
+ * 加载 业务 webpack 配置
+ */
+let businessWebpackConfig = {};
+try {
+    businessWebpackConfig = require(path.resolve(process.cwd(), './app/webpack.config.js'));
+} catch (error) {
+    console.warn('未找到业务 webpack 配置，使用默认配置');
+}
+
+/**
+ * webpack 基础配置
+ */
+module.exports = merge({
+    // 入口配置
+    entry: Object.assign({}, elpisPageEntries, businessPageEntries),
+    // 模块解析配置（决定了需要加载解析哪些模块，以及用什么方式去解析）
+    module: {
+        rules: [
+            {
+                test: /\.vue$/, 
+                use: { loader: require.resolve('vue-loader') }
+            },
+            {
+                test: /\.js$/, 
+                // 对elpis目录代码进行Babel，加快webpack打包速度
+                include: [ path.resolve(__dirname, '../../pages') ],
+                // 对业务目录代码进行Babel，加快webpack打包速度
+                include: [ path.resolve(process.cwd(), './app/pages') ],
+                use: { loader: require.resolve('babel-loader') }
+            },
+            {
+                test: /\.(png|jpe?g|gif)(\?.+)?$/, 
+                use: { 
+                    loader: require.resolve('url-loader'),
+                    options: {
+                        limit: 300,
+                        esModule: false
+                    }
+                }
+            },
+            {
+                test: /\.css$/,
+                use: [require.resolve('style-loader'), require.resolve('css-loader')],
+            },
+            {
+                test: /\.less$/,
+                use: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('less-loader')],
+            },
+            {
+                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
+                use: require.resolve('file-loader'),
+            }
+        ]
+    },
+    // 产物输出路径，因为开发和生产环境输出不一致，所以在各自环境中自行配置
+    output: {},
+    // 配置模块解析的具体行为（定义webpack在打包时，如何找到并解析具体模块路径）
+    resolve: {
+        extensions: ['.js', '.vue', '.less', '.css'],
+        alias: (() => {
+            const aliasMap = {};
+            const blankModulePath = path.resolve(__dirname, '../libs/blank.js');
+
+            // dashboard 路由拓展配置
+            const businessDashboardRouterConfig = path.resolve(process.cwd(), './app/pages/dashboard/router.js');
+            aliasMap['$businessDashboardRouterConfig'] = fs.existsSync(businessDashboardRouterConfig) ? businessDashboardRouterConfig : blankModulePath;
+
+            // schema-view component 扩展配置
+            const businessComponentConfig = path.resolve(process.cwd(), './app/pages/dashboard/complex-view/schema-view/components/component-config.js');
+            aliasMap['$businessComponentConfig'] = fs.existsSync(businessComponentConfig) ? businessComponentConfig : blankModulePath;
+
+            // schema-form 扩展配置
+            const businessFormItemConfig = path.resolve(process.cwd(), './app/pages/widgets/schema-form/form-item-config.js');
+            aliasMap['$businessFormItemConfig'] = fs.existsSync(businessFormItemConfig) ? businessFormItemConfig : blankModulePath;
+
+            // schema-search-bar 扩展配置
+            const businessSearchItemConfig = path.resolve(process.cwd(), './app/pages/widgets/schema-search-bar/search-item-config.js');
+            aliasMap['$businessSearchItemConfig'] = fs.existsSync(businessSearchItemConfig) ? businessSearchItemConfig : blankModulePath;
+
+            return {
+                'vue': require.resolve('vue'),
+                '@babel/runtime/helpers/toConsumableArray': require.resolve('@babel/runtime/helpers/toConsumableArray'),
+                '@babel/runtime/helpers/asyncToGenerator': require.resolve('@babel/runtime/helpers/asyncToGenerator'),
+                '@babel/runtime/regenerator': require.resolve('@babel/runtime/regenerator'),
+                $elpisPages: path.resolve(__dirname, '../../pages'),
+                $elpisCommon: path.resolve(__dirname, '../../pages/common'),
+                $elpisCurl: path.resolve(__dirname, '../../pages/common/curl.js'),
+                $elpisUtils: path.resolve(__dirname, '../../pages/common/utils.js'),
+                $elpisWidgets: path.resolve(__dirname, '../../pages/widgets'),
+                $elpisHeaderContainer: path.resolve(__dirname, '../../pages/widgets/header-container/header-container.vue'),
+                $elpisSiderContainer: path.resolve(__dirname, '../../pages/widgets/sider-container/sider-container.vue'),
+                $elpisSchemaTable: path.resolve(__dirname, '../../pages/widgets/schema-table/schema-table.vue'),
+                $elpisSchemaForm: path.resolve(__dirname, '../../pages/widgets/schema-form/schema-form.vue'),
+                $elpisSchemaSearchBar: path.resolve(__dirname, '../../pages/widgets/schema-search-bar/schema-search-bar.vue'),
+                $elpisStore: path.resolve(__dirname, '../../pages/store'),
+                $elpisBoot: path.resolve(__dirname, '../../pages/boot.js'),
+                ...aliasMap
+            };
+        })()
+    },
+    // 配置webpack插件
+    plugins: [
+        // 处理 .vue 文件，该插件是必需的
+        // 它的职能是将你定义过的其他规则复制并应用到 .vue 文件里
+        // 例如：如果有一条匹配规则 /\.js$/ 的规则，那么它会应用到 .vue 文件中 <script>板块中 
+        new VueLoaderPlugin(),
+        // 把第三方库暴露到window context下
+        new webpack.ProvidePlugin({
+            Vue: 'vue',
+            axios: 'axios',
+            _: 'lodash'
+        }),
+        // 定义全局常量
+        new webpack.DefinePlugin({
+            __VUE_OPTIONS_API__: 'true', // 支持 vue 解析 optionsApi
+            __VUE_PROD_DEVTOOLS__: 'false', // 禁用 vue 调试工具
+            __VUE_PROD_HYDRATION_MISMATCH_DETAILS: 'false' //禁用生产环境显示“水合”信息
+        }),
+        // 构造最终渲染的页面模板
+        ...elpisHtmlWebpackPluginList,
+        ...businessHtmlWebpackPluginList,
+    ],
+    // 配置打包输出优化（配置代码分割，模块合并，缓存，TreeShaing，压缩等优化策略）
+    optimization: {
+        /**
+         * 把js文件打包成3种类型、
+         * 1、vendor：第三方lib库，基本不会改动，除非依赖版本升级
+         * 2、common：业务组件代码的公共部分抽取出来，改动较少
+         * 3、entry.{page}：不用页面entry里的业务组件代码的差异部分，会经常改动
+         * 目的：把改动和引用频率不一样的js区分出来，以达到更好利用浏览器缓存的效果
+         */
+        splitChunks: {
+            chunks: 'all',// 对同步和异步模块都进行分割
+            maxAsyncRequests: 10,// 每次异步加载的最大并行请求数
+            maxInitialRequests: 10,// 入口点的最大并行请求数
+            cacheGroups: {
+                vendor: { // 第三方依赖库
+                    test: /[\\/]node_modules[\\/]/, // 打包node_modules文件
+                    name: 'vendor', // 模块名称
+                    priority: 20,// 优先级：数字越大，优先级越高
+                    enforce: true, // 强制执行
+                    reuseExistingChunk: true, // 复用已有的公共chunk
+                },
+                common: { // 公共模块
+                    test: /[\\/]common|widgets[\\/]/, // 打包node_modules文件
+                    name: 'common', // 模块名称
+                    minChunks: 2, // 最少被2处引用即被归为公共模块
+                    minSize: 1, // 最小分割文件大小（1 byte）
+                    priority: 10,
+                    reuseExistingChunk: true,
+                },
+            }
+        },
+        // 将webpack运行时生成的代码打包到runtime.js
+        runtimeChunk: true,
+    },
+}, businessWebpackConfig);

package/app/webpack/config/webpack.dev.js

@@ -0,0 +1,59 @@
+const path = require("path");
+const { merge } = require('webpack-merge');
+const webpack = require("webpack");
+
+// 基类配置
+const baseConfig = require('./webpack.base.js');
+
+// dev-server 配置
+const DEV_SERVER_CONFIG = {
+    HOST: '127.0.0.1',
+    PORT: 9002,
+    HMR_PATH: '__webpack_hmr',// 官方规定
+    TIMEOUT: 20000
+}
+
+// 开发阶段的 entry 配置需要加入 hmr
+Object.keys(baseConfig.entry).forEach(v => {
+    // 第三方包不作为 hmr 入口
+    if(v !== 'vendor') {
+        baseConfig.entry[v] = [
+            // 主入口文件
+            baseConfig.entry[v],
+            // hmr 更新入口，官方指定的hmr路径
+            `${require.resolve('webpack-hot-middleware/client')}?path=http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/${DEV_SERVER_CONFIG.HMR_PATH}&timeout=${DEV_SERVER_CONFIG.TIMEOUT}&reload=true`
+        ]
+    }
+})
+
+// 生产环境webpack配置
+const webpackConfig = merge(baseConfig, {
+    // 指定开发环境
+    mode: 'development',
+    // source-map开发工具，呈现代码的映射关系，便于在开发过程中调试代码
+    devtool: 'eval-cheap-module-source-map',
+    // 开发环境output配置
+    output: {
+        filename: 'js/[name]_[chunkhash:8].bundle.js',
+        path: path.join(process.cwd(), './app/public/dist/dev/'),// 输出文件存储路径
+        publicPath: `http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/public/dist/dev/`,// 外部资源公共路径
+        globalObject: 'this',
+        crossOriginLoading: 'anonymous',
+    },
+    // 开发阶段插件
+    plugins: [
+        // HotModuleReplacementPlugin 用于实现热模块替换 （Hot Module Replacement 简称 HMR）
+        // 模块热替换允许在应用程序运行时替换模块
+        // 极大的提升开发效率，因为能让应用程序一直保持运行状态
+        new webpack.HotModuleReplacementPlugin({
+            multiStep: false,
+        }),
+    ],
+});
+
+module.exports = {
+    // webpack配置
+    webpackConfig,
+    // devServer 配置，暴露给 dev.js 使用
+    DEV_SERVER_CONFIG
+};

package/app/webpack/config/webpack.prod.js

@@ -0,0 +1,107 @@
+const path = require('path');
+const { mergeWithRules } = require('webpack-merge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+// 基类配置
+const baseConfig = require('./webpack.base.js');
+
+// 让 prod 中相同 test 的 rules 覆盖 webpack.base.js 中的 rules，避免重复命中
+const merge = mergeWithRules({
+    module: {
+        rules: {
+            test: 'match',
+            include: 'match',
+            use: 'replace',
+        },
+    },
+});
+
+// 生产环境 webpack 配置
+const webpackConfig = merge(baseConfig, {
+    // 指定生产环境
+    mode: 'production',
+    // webpack文件系统缓存
+    cache: {
+        type: 'filesystem',
+    },
+    // 生产构建通常关闭 source map
+    devtool: false,
+    // 生产环境output配置
+    output: {
+        filename: 'js/[name]_[chunkhash:8].bundle.js',
+        path: path.join(process.cwd(), './app/public/dist/prod/'),
+        publicPath: '/dist/prod/',
+        crossOriginLoading: 'anonymous',
+        clean: true, // 清空build输出目录
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, require.resolve('css-loader') ],
+            },
+            {
+                test: /\.js$/,
+                // 对elpis目录代码进行Babel，加快webpack打包速度
+                include: [path.resolve(__dirname, '../../pages')],
+                // 对业务目录代码进行Babel，加快webpack打包速度
+                include: [path.resolve(process.cwd(), './app/pages')],
+                use: {
+                    loader: require.resolve('babel-loader'),
+                    options: {
+                        cacheDirectory: true,
+                        cacheCompression: false,
+                        presets: [
+                            [require.resolve('@babel/preset-env'), { modules: false }],
+                        ],
+                        plugins: [require.resolve('@babel/plugin-transform-runtime')],
+                    },
+                },
+            },
+            {
+                test: /\.less$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    require.resolve('css-loader'),
+                    require.resolve('less-loader'),
+                ],
+            },
+        ],
+    },
+    // webpack 不会有大量hints信息，默认为warning
+    performance: {
+        hints: false,
+    },
+    plugins: [
+        // 提取 css 的公共部分，有效利用缓存，（非公共部分使用inline）
+        new MiniCssExtractPlugin({
+            filename: 'css/[name]_[contenthash:8].bundle.css',
+            chunkFilename: 'css/[name]_[contenthash:8].bundle.css',
+        }),
+    ],
+    optimization: {
+        // 使用TerserPlugin 的并发和缓存，提升压缩阶段的性能
+        // 清除 console.log
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                parallel: true, // 利用多核CPU的优势来加快压缩速度
+                extractComments: false,
+                terserOptions: {
+                    compress: {
+                        drop_console: true,// 去掉console.log 内容
+                    },
+                    format: {
+                        comments: false,
+                    },
+                },
+            }),
+            // 优化并压缩 css 资源
+            new CssMinimizerPlugin(),
+        ],
+    },
+});
+
+module.exports = webpackConfig;

package/app/webpack/dev.js

@@ -0,0 +1,53 @@
+// 本地开发启动 devServer
+const express = require('express');
+const path = require('path');
+const consoler = require('consoler');
+const webpack = require('webpack');
+const devMiddleware = require('webpack-dev-middleware')
+const hotMiddleware = require('webpack-hot-middleware')
+
+module.exports = () => {
+    // 从webpack.dev.js 获取webpack配置和devServer配置
+    const {
+        webpackConfig,
+        DEV_SERVER_CONFIG
+    } = require('./config/webpack.dev.js');
+
+    const app = express();
+
+    const compiler = webpack(webpackConfig);
+
+    // 指定静态文件目录
+    app.use(express.static(path.join(__dirname, '../public/dist')));
+
+    // 引入devMiddleware中间件（监控文件改动，产物放在内存中）
+    app.use(devMiddleware(compiler, {
+        // 落地文件
+        writeToDisk: (filePath) => filePath.endsWith('.tpl'),
+        // 资源路径
+        publicPath: webpackConfig.output.publicPath,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET,POST,PUT,PATCH,DELETE,OPTIONS',
+            'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type, Authorization, Origin, Accept',
+        },
+        stats: {
+            colors: true
+        }
+    }));
+
+    // 引入hotMiddleware中间件（实现热更新通讯）
+    app.use(hotMiddleware(compiler, {
+        path: `/${DEV_SERVER_CONFIG.HMR_PATH}`,
+        log: () => {}
+    }));
+
+
+    consoler.info('请等待webpack初次构建完成提示...')
+
+    // 启动devServer
+    const port = DEV_SERVER_CONFIG.PORT;
+    app.listen(port, () => {
+        console.log(`app listening on port: ${port}`)
+    })
+}

package/app/webpack/libs/blank.js

@@ -0,0 +1,3 @@
+module.exports = {
+    
+}

package/app/webpack/prod.js

@@ -0,0 +1,17 @@
+const webpack = require('webpack');
+const webpackProdConfig = require('./config/webpack.prod.js');
+
+module.exports = () => {
+    console.log('\nbuilding... \n');
+
+    webpack(webpackProdConfig, (err, stats) => {
+        if(err) { console.log(err); return; }
+        process.stdout.write(`${stats.toString({
+            colors: true, // 在控制台输出色彩信息
+            modules: false, // 不显示每个模块的打包信息
+            children: false, // 不显示子编译任务的信息
+            chunks: false, // 不显示每个代码块的信息
+            chunkModules: true, // 显示代码块中模块的信息
+        })}\n`)
+    })
+}

package/config/config.default.js

@@ -0,0 +1,3 @@
+module.exports = {
+    name: 'elpis'
+}

package/docs/dashboard-model.js

@@ -0,0 +1,153 @@
+{
+    model: 'dashboard'; // 模板类型，不同模板类型对应不一样的模板数据结构
+    name: ''; // 名称
+    desc: ''; // 描述
+    icon: ''; // 图标
+    homePage: ''; // 首页（项目配置）
+    // 头部菜单
+    menu: [{
+        key: '', // 菜单唯一描述
+        name: '', // 菜单名称
+        menuType: '', // 枚举值：group/module
+
+        // 当 menuType == group 时，可填
+        subMenu: [{
+            // 可递归 menuItem
+        },],
+
+        // 当 menuType == module 时，可填
+        moduleType: '', // 枚举值：sider/iframe/custom/schema
+
+        // 当 moduleType == sider 时
+        siderConfig: {
+            menu: [{
+                // 可递归 menuItem（除了menuType == sider外）
+            }]
+        },
+
+        // 当 moduleType == iframe 时
+        iframeConfig: {
+            path: '', // iframe路径
+        },
+
+        // 当 moduleType == custom 时
+        customConfig: {
+            path: '', // 自定义路由路径
+        },
+
+        // 当 moduleType == schema 时
+        schemaConfig: {
+            api: '', // 数据源API（遵循 RESTFUL 规范）
+            schema: { // 板块数据结构
+                type: 'object',
+                properties: {
+                    key: {
+                        ...schema, // 标准 schema 配置
+                        type: '', // 字段类型
+                        label: '', // 字段中文名
+                        // 字段在 table 中的相关配置
+                        tableOption: {
+                            ...elTableColumnConfig, // 标准 el-table-column 配置
+                            toFixed: 0, // 保留小数点后几位
+                            visible: true, // 默认为 true （false时，表示不在表单中显示）
+                        },
+                        // 字段在 search-bar 中的相关配置
+                        searchOption: {
+                            ...elComponentConfig, // 标准 el-table-column 配置
+                            comType: '', // 配置组件类型 input/select/...
+                            default: '', // 默认值
+
+                            // comType === 'select' 时的相关配置
+                            enumList: [], // 下拉框可选项
+
+                            // comType === 'dynamicSelect' 时的相关配置
+                            api: ''
+                        },
+                        // 字段在不同动态 component 中的相关配置，前缀对应 componentConfig 中的键值
+                        // 如：componentConfig.createForm，这里对应 createFormOption
+                        // 字段在 createForm 中的相关配置
+                        createFormOption: {
+                            ...elComponentConfig, // 标准 el-component 配置
+                            comType: '', // 控件类型 input/select/...
+                            visible: true, // 默认为 true
+                            disable: false, // 是否禁用，默认false
+                            default: '', // 默认值
+
+                            // comType === 'select' 时生效
+                            enumList: [], // 枚举列表
+                        },
+                        // 字段在 editForm 表单中的相关配置
+                        editFormOption: {
+                            ...elComponentConfig, // 标准 el-component 配置
+                            comType: '', // 控件类型 input/select/...
+                            visible: true, // 默认为 true
+                            disable: false, // 是否禁用，默认false
+                            default: '', // 默认值
+
+                            // comType === 'select' 时生效
+                            enumList: [], // 枚举列表
+                        },
+                        // 字段在 detail-panel 中的相关配置
+                        detailPanelOption: {
+                            ...elComponentConfig, // 标准 el-component 配置
+                        }
+                    },
+                    ...
+                },
+                required: [], // 标记哪些字段是必填项
+            },
+            // table 相关配置
+            tableConfig: {
+                headerButtons: [{
+                    label: '', // 按钮中文名
+                    eventKey: '', // 按钮事件名
+                    // 按钮事件具体配置
+                    eventOption: {
+                        // 当 eventKey === 'showComponent'
+                        comName: '', // 组件名称
+                    },
+                    ...elButtonConfig // 标准el-button 配置
+                },...],
+                rowButtons: [{
+                    label: '', // 按钮中文名
+                    eventKey: '', // 按钮事件名
+                    eventOption: {
+                        // 当 eventKey === 'showComponent'
+                        comName: '', // 组件名称
+
+                        // 当 eventKey === 'remove'
+                        params: {
+                            // paramsKey = 参数的键值
+                            // rowValueKey = 参数值，格式为 schema::tableKey 的时候，到table中找相应的字段
+                            paramsKey: rowValueKey
+                        }
+                    }, // 按钮事件具体配置
+                    ...elButtonConfig // 标准el-button 配置
+                },...],
+            },
+            // search-bar 相关配置
+            searchConfig: {},
+            // 动态组件 相关配置 
+            componentConfig: {
+                // create-form 表单相关配置
+                createForm: {
+                    title: '', // 表单标题
+                    saveBtnText: '', // 保存按钮文案
+                },
+                // edit-form 表单相关配置
+                editForm: {
+                    mainKey: '', // 表单主键，用于唯一标识要修改的数据对象
+                    title: '', // 表单标题
+                    saveBtnText: '', // 保存按钮文案
+                },
+                detailPanel: {
+                    mainKey: '', // 表单主键，用于唯一标识要修改的数据对象
+                    title: '', // 表单标题
+                }
+                // detail-panel 相关配置
+                // ...支持用户动态拓展
+            }, 
+        },
+
+    },]
+}

package/elpis-core/env.js

@@ -0,0 +1,23 @@
+module.exports = (app) => {
+    return {
+        // 判断是否本地环境
+        isLocal() {
+            return process.env._ENV === 'local';
+        },
+
+        // 判断是否测试环境
+        isBeta() {
+            return process.env._ENV === 'beta';
+        },
+
+        // 判断是否生产环境
+        isProduction() {
+            return process.env._ENV === 'production';
+        },
+
+        // 获取当前环境
+        getEnv() {
+            return process.env._ENV ?? 'local';
+        }
+    }
+}