@wanglindoc/elpis 1.0.0

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

@@ -0,0 +1,352 @@
+const path = require("path");
+const webpack = require("webpack");
+const fs = require("fs");
+const merge = require("webpack-merge");
+const { VueLoaderPlugin } = require("vue-loader");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+// 由于entry的配置内容和HtmlWebpackPlugin插件的配置内容都是相同的配置格式，只是文件名的差别，所以可以将这两部分的配置动态化
+const glob = require("glob");
+
+/**
+ * elpis 入口文件处理
+ * 约定好入口文件为统一存放在app/pages下,以entry.开头的文件
+ */
+const elpisPageEntrys = {};
+const elpisHtmlWebpackPluginList = [];
+
+// 获取 elpis app/pages 目录下的所有入口文件 (entry.xx.js)
+const elpisEntryPath = path.resolve(__dirname, "../../pages/**/entry.*.js");
+
+glob
+  .sync(elpisEntryPath)
+  .forEach((file) =>
+    handleFile(file, elpisPageEntrys, elpisHtmlWebpackPluginList),
+  );
+
+/**
+ * business 入口文件处理
+ * 约定好入口文件为统一存放在app/pages下,以entry.开头的文件
+ */
+const businessPageEntrys = {};
+const businessHtmlWebpackPluginList = [];
+
+// 获取 business app/pages 目录下的所有入口文件 (entry.xx.js)
+const businessEntryPath = path.resolve(
+  process.cwd(),
+  "./app/pages/**/entry.*.js",
+);
+
+glob
+  .sync(businessEntryPath)
+  .forEach((file) =>
+    handleFile(file, businessPageEntrys, businessHtmlWebpackPluginList),
+  );
+
+function handleFile(file, entries = {}, htmlWebpackPluginList = []) {
+  const entryName = path.basename(file, ".js");
+  // 构造 entry
+  entries[entryName] = file;
+
+  // 构造最终渲染的页面文件
+  htmlWebpackPluginList.push(
+    // 将 chunks 中的代码块注入到 template 模板中生成 filename 文件
+    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(`${process.cwd()}/app/webpack.config.js`);
+} catch (error) {}
+
+/**
+ * webpack 基础配置
+ */
+module.exports = merge.smart(
+  {
+    // 入口配置
+    entry: Object.assign({}, elpisPageEntrys, businessPageEntrys),
+
+    // 模块解析配置：决定了要加载解析哪些模块，以及用什么方式去解析
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: {
+            loader: require.resolve("vue-loader"),
+          },
+        },
+        {
+          test: /\.js$/,
+
+          // 只针对此路径下的js文件才去解析，其他文件不处理
+          include: [
+            // 只对 elpis 业务代码进行babel处理，加快webpack打包速度
+            path.resolve(__dirname, "../../pages"),
+            // 只对 business 业务代码进行babel处理，加快webpack打包速度
+            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: {
+      // filename: "js/[name]_[chunkhash:8].bundle.js",
+      // path: path.join(process.cwd(), "./app/public/dist/prod"),
+      // publicPath: "/dist/prod",
+      // crossOriginLoading: "anonymous",
+    },
+
+    // 配置模块解析的具体行为（定义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 component 拓展配置
+        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 component 拓展配置
+        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"),
+
+          // $businessDashboardRouterConfig: path.resolve(
+          //   process.cwd(),
+          //   "./app/pages/dashboard/router.js",
+          // ),
+
+          ...aliasMap,
+        };
+      })(),
+    },
+
+    // 配置 webpack 插件
+    // plugins 配置是在打包构建(工程化)过程中, 在webpack不同的生命周期去介入的能力
+    plugins: [
+      // 处理 .vue 文件的插件
+      // 将定义过的其他规则复制并应用到 .vue 文件里
+      // 例如：如果有一条匹配规则 /\.js$/ 的规则（import xxx from 'xxx.js'），那么它将被应用到 .vue 文件中的 <script> 板块中。
+      new VueLoaderPlugin(),
+
+      // 把第三方库暴露到 window context 下
+      new webpack.ProvidePlugin({
+        // $: "jquery",
+        Vue: "vue",
+        axios: "axios",
+        _: "lodash",
+      }),
+
+      // 定义全局常量
+      new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: "true", // 支持 vue 解析 options API
+        __VUE_PROD_DEVTOOLS__: "false", // 禁用 Vue 调试工具
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false", // 禁用生产环境显示 "水合" 信息
+      }),
+
+      // 构建最终渲染的页面模板
+      // 将 chunks 中的代码块注入到 template 模板中生成 filename 文件
+      // new HtmlWebpackPlugin({
+      //   // 产物: 最终模板
+      //   filename: path.resolve(
+      //     process.cwd(),
+      //     "./app/public/dist/",
+      //     "entry.page1.tpl"
+      //   ),
+
+      //   // 指定要是用的模版文件
+      //   template: path.resolve(process.cwd(), "./app/view/entry.tpl"),
+
+      //   // 要注入的代码块
+      //   chunks: ["entry.page1"],
+      // }),
+
+      // new HtmlWebpackPlugin({
+      //   // 产物: 最终模板
+      //   filename: path.resolve(
+      //     process.cwd(),
+      //     "./app/public/dist/",
+      //     "entry.page2.tpl"
+      //   ),
+
+      //   // 指定要是用的模版文件
+      //   template: path.resolve(process.cwd(), "./app/view/entry.tpl"),
+
+      //   // 要注入的代码块
+      //   chunks: ["entry.page2"],
+      // }),
+      ...elpisHtmlWebpackPluginList,
+      ...businessHtmlWebpackPluginList,
+    ],
+
+    // 配置打包输出优化（代码分割，模块合并，缓存，treeshaing，压缩等优化策略）
+    optimization: {
+      // common文件夹中存放的utils文件是系统的工具类函数,它在page1和page2中都被引入
+      // 所以也会被分别打包至page1.bundle.js和page2.bundle.js中
+      // 所以在加载page1和page2时会加载同一段utils代码,可以将其单独打包
+      /**
+       * 把 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[\\/]/,
+            name: "common", // 模块名称
+            minChunks: 2, // 被两处引用即被归为公共模块
+            minSize: 1, // 最小分割文件大小 （1 byte）单位是字节
+            priority: 10, // 分包策略的优先级，数字越大，优先级越高
+            reuseExistingChunk: true, // 复用已有的公共 chunk
+          },
+        },
+      },
+      // 将 webpack 运行时生成的代码打包到 runtime.js
+      runtimeChunk: true,
+    },
+  },
+  businessWebpackConfig, // 业务 webpack 配置
+);

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

@@ -0,0 +1,59 @@
+const path = require("path");
+const webpack = require("webpack");
+// 配置合并
+const merge = require("webpack-merge");
+
+// 基类配置
+const webpackBaseConfig = require("./webpack.base");
+
+// devServer配置
+const DEV_SERVER_CONFIG = {
+  HOST: "127.0.0.1",
+  PORT: 9002,
+  HMR_PATH: "_webpack-hmr", // 官方规定
+  TIME_OUT: 20000,
+};
+
+// 开发阶段的 entry 配置需要加入 hmr
+Object.keys(webpackBaseConfig.entry).forEach((v) => {
+  // 第三方包不作为 hmr 入口
+  if (v !== "vendor") {
+    webpackBaseConfig.entry[v] = [
+      webpackBaseConfig.entry[v],
+      `${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.TIME_OUT}&reload=true`,
+    ];
+  }
+});
+
+// 开发环境webpack配置
+const webpackDevConfig = merge.smart(webpackBaseConfig, {
+  // 指定开发环境
+  mode: "development",
+
+  // source-map 开发工具，呈现代码的映射关系，便于在开发过程中调试代码
+  devtool: "eval-cheap-module-source-map",
+
+  // 开发环境的output配置
+  output: {
+    filename: "js/[name]_[chunkhash:8].bundle.js",
+    path: path.resolve(process.cwd(), "./app/public/dist/dev/"), // 输出文件存储路径
+    publicPath: `http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/public/dist/dev/`, // 外部资源公共路径，页面引用服务端js、css代码片段的路径
+    globalObject: "this",
+  },
+
+  // 开发阶段插件
+  plugins: [
+    // HotModuleReplacementPlugin 用于实现热模块替换 简称 HMR
+    // 模块热替换允许在程序运行时替换模块，极大提高开发效率，因为能让应用程序一直保持运行状态
+    new webpack.HotModuleReplacementPlugin({
+      multiStep: false,
+    }),
+  ],
+});
+
+module.exports = {
+  // webpack 配置
+  webpackDevConfig,
+  // devServer 配置，暴露给 build-dev.js 使用
+  DEV_SERVER_CONFIG,
+};

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

@@ -0,0 +1,145 @@
+const path = require("path");
+// 配置合并
+const merge = require("webpack-merge");
+
+// 涉及多线程，需要用到 os 模块
+const os = require("os");
+const HappyPack = require("happypack"); // 多线程打包工具
+
+// 多线程打包配置
+const happypackCommonConfig = {
+  debug: false,
+  threadPool: HappyPack.ThreadPool({ size: os.cpus().length }),
+};
+
+// 提取css公共部分
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+// 清空打包结果目录
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+// css压缩插件
+const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
+
+//
+const HtmlWebpackInjectAttributesPlugin = require("html-webpack-inject-attributes-plugin");
+
+//
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+
+// 基类配置
+const webpackBaseConfig = require("./webpack.base");
+
+// 生产环境webpack配置
+const webpackProdConfig = merge.smart(webpackBaseConfig, {
+  // 指定生产环境
+  mode: "production",
+
+  // 生产环境的output配置
+  output: {
+    filename: "js/[name]_[chunkhash:8].bundle.js",
+    path: path.join(process.cwd(), "./app/public/dist/prod/"),
+    publicPath: "/dist/prod/",
+    crossOriginLoading: "anonymous",
+  },
+
+  // 打包可以多线程，优化打包速度
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        // 使用MiniCssExtractPlugin插件打包并压缩css文件，同时通过happypack启用多线程打包
+        use: [
+          MiniCssExtractPlugin.loader,
+          `${require.resolve("happypack/loader")}?id=css`,
+        ], // 后面跟的ID是 plugin 中 new HappyPack 配置的ID，通过loader调用对应的plugin
+      },
+      {
+        test: /\.js$/,
+        include: [
+          // 处理 elpis 目录
+          path.resolve(__dirname, "../../pages"),
+          // 处理 business 目录
+          path.resolve(process.cwd(), "./app/pages"),
+        ],
+        use: [`${require.resolve("happypack/loader")}?id=js`], // 后面跟的ID是 plugin 中 new HappyPack 配置的ID，通过loader调用对应的plugin
+      },
+    ],
+  },
+
+  // webpack不会有大量的hints信息
+  performance: {
+    hints: false,
+  },
+
+  plugins: [
+    // 每次打包前，清空 public/dist 目录
+    new CleanWebpackPlugin(["public/dist"], {
+      root: path.resolve(process.cwd(), "./app/"),
+      exclude: [],
+      verbose: true,
+      dry: false,
+    }),
+
+    // 提取 css 的公共部分，有效利用缓存，（非公共部分使用 inline）
+    new MiniCssExtractPlugin({
+      chunkFilename: "css/[name]_[contenthash:8].bundle.css",
+    }),
+
+    // 优化并压缩css资源
+    new CssMinimizerWebpackPlugin(),
+
+    // 多线程打包js，加快打包速度
+    new HappyPack({
+      ...happypackCommonConfig,
+      id: "js",
+      loaders: [
+        `${require.resolve("babel-loader")}?${JSON.stringify({
+          presets: [require.resolve("@babel/preset-env")],
+          plugins: [require.resolve("@babel/plugin-transform-runtime")],
+        })}`,
+      ],
+    }),
+
+    // 多线程打包css，加快打包速度
+    new HappyPack({
+      ...happypackCommonConfig,
+      id: "css",
+      loaders: [
+        {
+          path: require.resolve("css-loader"),
+          options: {
+            importLoaders: 1,
+          },
+        },
+      ],
+    }),
+
+    // 浏览器在请求资源时不发送用户的身份凭证
+    new HtmlWebpackInjectAttributesPlugin({
+      crossorigin: "anonymous",
+    }),
+  ],
+
+  optimization: {
+    // 使用 TerserWebpackPlugin 的并发和缓存，提升压缩阶段的性能
+    // 清除 console.log
+    minimize: true, // 压缩代码
+    minimizer: [
+      new TerserWebpackPlugin({
+        // 启用缓存来加速构建过程
+        cache: true,
+        // 利用多核 cpu 的优势来加快压缩速度
+        parallel: true,
+        terserOptions: {
+          compress: {
+            // 去掉console.log内容
+            drop_console: true,
+          },
+        },
+      }),
+    ],
+  },
+});
+
+module.exports = webpackProdConfig;

package/app/webpack/libs/blank.js

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

package/config/config.default.js

@@ -0,0 +1,4 @@
+module.exports = {
+  name: "elpis",
+  desc: "elpis",
+};

package/elpis-core/env.js

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

package/elpis-core/index.js

@@ -0,0 +1,106 @@
+const Koa = require("koa");
+
+// 涉及到路径需要用到path
+const path = require("path");
+
+// 兼容不同操作系统上的斜杠 /
+const { sep } = path;
+
+// 引入环境文件
+const env = require("./env");
+
+// 引入loader
+const middlewareLoader = require("./loader/middleware");
+const routerSchemaLoader = require("./loader/router-schema");
+const controllerLoader = require("./loader/controller");
+const serviceLoader = require("./loader/service");
+const configLoader = require("./loader/config");
+const extendLoader = require("./loader/extend");
+const routerLoader = require("./loader/router");
+
+module.exports = {
+  /**
+   * 启动项目
+   * @param {*} options 项目配置
+   * options = {
+   *    name, // 项目名称
+   *    homePage, // 项目首页
+   * }
+   */
+  start(options = {}) {
+    // koa实例
+    const app = new Koa();
+
+    // 应用配置
+    app.options = options;
+
+    // 基础路径(项目根目录)
+    app.baseDir = process.cwd();
+
+    // 业务文件路径 (./app)
+    app.businessPath = path.resolve(app.baseDir, `.${sep}app`);
+
+    // 挂载环境文件
+    app.env = env();
+    console.log(`-- [start] env: ${app.env.get()} --`);
+
+    // 加载 middleware
+    middlewareLoader(app);
+    console.log("-- [start] load middlewareLoader done --");
+
+    // 加载 routerSchema
+    routerSchemaLoader(app);
+    console.log("-- [start] load routerSchemaLoader done --");
+
+    // 加载 controller
+    controllerLoader(app);
+    console.log("-- [start] load controllerLoader done --");
+
+    // 加载 service
+    serviceLoader(app);
+    console.log("-- [start] load serviceLoader done --");
+
+    // 加载 config
+    configLoader(app);
+    console.log("-- [start] load configLoader done --");
+
+    // 加载 extend
+    extendLoader(app);
+    console.log("-- [start] load extendLoader done --");
+
+    // 挂载所有中间件
+    // 注册 elpis 全局中间件 (用户引用的外部中间件: 全部写在 app/middleware.js 文件下)
+    const elpisMiddlewarePath = path.resolve(
+      __dirname,
+      `..${sep}app${sep}middleware.js`,
+    );
+    const elpisMiddleware = require(elpisMiddlewarePath);
+    elpisMiddleware(app);
+    console.log("-- [start] load elpis global middleware done --");
+
+    // 注册业务全局中间件 (用户引用的外部中间件: 全部写在 app/middleware.js 文件下)
+    try {
+      require(`${app.businessPath}${sep}middleware.js`)(app);
+      console.log("-- [start] load business global middleware done --");
+    } catch (error) {
+      console.log("[exception] there is no business global middleware file");
+    }
+
+    // 注册路由 (注: 路由注册必须在最后)
+    routerLoader(app);
+    console.log("-- [start] load routerLoader done --");
+
+    // 启动服务
+    try {
+      const host = process.env.HOST || "0.0.0.0";
+      const port = process.env.PORT || 3000;
+      app.listen(port, host, () => {
+        console.log(`server is running at http://${host}:${port}`);
+      });
+    } catch (error) {
+      console.error(error);
+    }
+
+    return app;
+  },
+};