fast-vue-multi-pages 1.0.0

package/vue/FastBuildOption.js

@@ -0,0 +1,249 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastBuildOption = void 0;
+/**
+ * 获取编译配置的选项配置，配置选项如下：
+ * <br/>
+ * {@link projectTitle } 项目名称
+ * <br/>
+ * {@link projectPagesDir } 项目存储页面的目录地址 默认：src/pages
+ * <br/>
+ * {@link projectOutDir } 项目默认编译输出地址 默认：dist
+ * <br/>
+ * {@link projectAssetsDir } 项目资源路径，默认：assets
+ * <br/>
+ * {@link pageTemplateFileDir } 页面的入口文件模板地址，默认：public/index.html
+ * <br/>
+ * {@link pageMainFileName }页面目录下的入口文件名，默认：index.js
+ * <br/>
+ * {@link pageConfigHtmlNamePrefix }页面生成html文件时文件命名携带的前缀
+ * <br/>
+ * {@link pageConfigFileName } 页面目录下的配置文件名，默认：config.json
+ * <br/>
+ * {@link autoCreatePageConfigFile } 是否在每个页面目录下自动创建config.json文件
+ * <br/>
+ * {@link autoCreateProjectIndexPage } 是否自动创建项目的index页面
+ * <br/>
+ * {@link nodeModulesDir } 第三方插件存放目录文件夹，默认：node_modules
+ * <br/>
+ * {@link globalConfig } 系统的全局配置
+ * <br/>
+ * {@link httpFinalParams } FastVueMultiTool.Http请求接口全局请求参数。
+ * <br/>
+ * {@link httpFinalHeaders } FastVueMultiTool.Http请求接口全局请求头参数。
+ * <br/>
+ * {@link httpBeforeRequest } FastVueMultiTool.Http请求前的拦截。
+ * <br/>
+ * {@link httpAfterRequest } FastVueMultiTool.Http请求后的拦截。
+ * <br/>
+ * {@link injectJsFiles } 所有页面全局注入的js文件
+ * <br/>
+ * {@link injectJsFilter } 所有页面全局注入js文件过滤器
+ * <br/>
+ * {@link injectVariable } 所有页面全局注入js变量
+ * <br/>
+ * {@link cacheVueLoader } 是否使用vue默认的cache-loader，默认使用
+ * <br/>
+ * {@link vConsole } 开启vConsole插件的方式，默认：auto。可选值：auto(自动根据编辑的类型追加，server模式或debug模式开启)，true（强制开启），false（不开启）
+ * <br/>
+ * {@link splitChunks } 将公共js代码，进行分割，默认：true
+ * <br/>
+ * {@link buildLevel} 项目编译级别，与 标签 build-level 对应
+ * <br/>
+ * {@link buildLevelTagName} 项目编译级别标签名，默认： build-level
+ * <br/>
+ * {@link chainWebpack} 配置Webpack函数function (config){};
+ * <br/>
+ * {@link configureWebpack} 配置Webpack函数function (config){};
+ */
+class FastBuildOption {
+    /**
+     * 合并options
+     * @param options
+     */
+    static merge(...options) {
+        let newObject = {};
+        for (let option of options) {
+            for (let optionsKey in option) {
+                if (newObject.hasOwnProperty(optionsKey)) {
+                    continue;
+                }
+                newObject[optionsKey] = option[optionsKey];
+            }
+        }
+        return newObject;
+    }
+    /**
+     * 项目名称
+     */
+    projectTitle = "VUE多页面项目";
+    /**
+     * 项目存储页面的目录地址，默认src/pages 或者数组：["默认src/pages","默认src/pages2"]
+     */
+    projectPagesDir = "src/pages/";
+    /**
+     * 项目编译输出地址，默认：dist
+     */
+    projectOutDir = "dist";
+    /**
+     * 项目资源路径，默认：assets
+     */
+    projectAssetsDir = "assets";
+    /**
+     * 页面的入口文件模板地址，默认：public/index.html
+     */
+    pageTemplateFileDir = "public/index.html";
+    /**
+     * 页面目录下的入口文件名，默认：index.js
+     */
+    pageMainFileName = "index.js";
+    /**
+     * 页面目录下的配置文件名，默认：config.json
+     */
+    pageConfigFileName = "config.json";
+    /**
+     * 页面目录下的渲染模板html，如果存在则以这个模板进行渲染，默认：index.html
+     */
+    pageMainTemplateFileName = "index.html";
+    /**
+     * 页面生成html文件时文件命名携带的前缀
+     */
+    pageConfigHtmlNamePrefix = "";
+    /**
+     * 是否在每个页面目录下自动创建config.json文件
+     */
+    autoCreatePageConfigFile = false;
+    /**
+     * 是否自动创建项目的index页面
+     */
+    autoCreateProjectIndexPage = false;
+    /**
+     * 第三方插件存放目录文件夹，默认：node_modules
+     */
+    nodeModulesDir = "node_modules";
+    /**
+     * vue挂载的目标节点选择器
+     */
+    mountSelector = "#app";
+    /**
+     * 系统的全局配置，
+     * @example
+     * globalConfig:{
+     *     mainUrl:"http://192.168.0.1:8080/test"
+     * }
+     * 可通过 ：FastBaseApp.Config.getGlobalConfig("mainUrl") 在任意js中获取配置
+     */
+    globalConfig;
+    /**
+     * FastVueMultiTool.Http请求接口全局请求参数.
+     * @example
+     * httpFinalParams:{
+     *     userId:2,
+     *     userName:undefined //当配置undefined值时，将排除此参数属性名
+     * }
+     */
+    httpFinalParams;
+    /**
+     * FastVueMultiTool.Http请求接口全局请求头参数.
+     * @example
+     * httpFinalHeaders:{
+     *     userId:2,
+     *     userName:undefined //当配置undefined值时，将排除此参数属性名
+     * }
+     */
+    httpFinalHeaders;
+    /**
+     * FastVueMultiTool.Http请求前的拦截
+     * @example
+     * httpBeforeRequest:function(config){
+     *     //do something
+     * }
+     */
+    httpBeforeRequest;
+    /**
+     * FastVueMultiTool.Http请求后的拦截
+     * @example
+     * httpAfterRequest:function(response){
+     *     //do something
+     * }
+     */
+    httpAfterRequest;
+    /**
+     * 所有页面全局注入的js文件
+     * @example
+     * injectJsFiles:["src/js/test.js","src/js/icon.js"]
+     * 或
+     * injectJsFiles:{
+     *     "src/js/test.js":{
+     *         exclude:["user","set"] //排除注入页面的名称，例如：user.html，set.html
+     *     },
+     *      "src/js/icon.js":{
+     *         include:["user","set"] //指定注入页面的名称，例如：user.html，set.html
+     *     }
+     * }
+     * 或
+     * injectJsFiles:[
+     *      "src/js/test.js",
+     *      {
+     *          "src/js/icon.js":{
+     *              exclude:["user","set"] //排除注入页面的名称，例如：user.html，set.html
+     *          }
+     *      }
+     * ]
+     */
+    injectJsFiles;
+    /**
+     * 所有页面全局注入js文件过滤器，当 {@link injectJsFiles} 为数组时生效！
+     * @example
+     * injectJsFilter:{
+     *     include:["user","set"] //指定注入页面的名称，例如：user.html，set.html
+     * }
+     * 或
+     * injectJsFilter:{
+     *     exclude:["user","set"] //排除注入页面的名称，例如：user.html，set.html
+     * }
+     */
+    injectJsFilter;
+    /**
+     * 所有页面全局js变量注入
+     * @example
+     * injectVariable:{
+     *     getUserId:function(){
+     *         return 1;
+     *     },
+     *     server:"……"
+     * }
+     */
+    injectVariable;
+    /**
+     * 是否使用vue默认的cache-loader缓存vue-loader，如果不使用，则在build版本前将删除缓存的目录.cache/vue-loader
+     */
+    cacheVueLoader = false;
+    /**
+     * 开启vConsole插件的方式，默认：auto。可选值：auto(自动根据编辑的类型追加，server模式或debug模式开启)，true（强制开启），false（不开启）
+     */
+    vConsole = "auto";
+    /**
+     * 将公共js代码，进行分割，默认：true
+     */
+    splitChunks = true;
+    /**
+     * 项目编译级别，与 标签 build-level 对应
+     */
+    buildLevel = 1;
+    /**
+     * 编译级别的标签名，默认 build-level
+     */
+    buildLevelTagName = "build-level";
+    /**
+     * 插入Webpack函数function (config){};
+     */
+    chainWebpack = function () {
+    };
+    /**
+     * 配置Webpack函数function (config){};
+     */
+    configureWebpack = function () {
+    };
+}
+exports.FastBuildOption = FastBuildOption;

package/vue/FastInjectJsPlugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 全局注入脚本插件
+ */
+export declare class FastInjectJsPlugin {
+    private readonly options;
+    constructor(options: any);
+    filter(key: string, targetFilter: any): boolean;
+    injectArray(local: any, entry: any, targetInjectJsFiles: any): void;
+    injectObject(local: any, entry: any, targetInjectJsFiles: any): void;
+    apply(compiler: any): void;
+}

package/vue/FastInjectJsPlugin.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastInjectJsPlugin = void 0;
+/**
+ * 全局注入脚本插件
+ */
+class FastInjectJsPlugin {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    filter(key, targetFilter) {
+        if (targetFilter) {
+            if (targetFilter.include) {
+                for (let i = 0; i < targetFilter.include.length; i++) {
+                    if (targetFilter.include[i] === key) {
+                        return true;
+                    }
+                }
+                return false;
+            }
+            if (targetFilter.exclude) {
+                for (let i = 0; i < targetFilter.exclude.length; i++) {
+                    if (targetFilter.exclude[i] === key) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    injectArray(local, entry, targetInjectJsFiles) {
+        if (Object.prototype.toString.call(targetInjectJsFiles) !== '[object Array]') {
+            return;
+        }
+        const path = require('path');
+        const fs = require('fs');
+        for (let i = 0; i < targetInjectJsFiles.length; i++) {
+            let value = targetInjectJsFiles[i];
+            if (typeof value === 'string') {
+                const jsPath = path.join(local, value);
+                if (fs.existsSync(jsPath)) {
+                    for (let entryKey in entry) {
+                        if (!this.filter(entryKey, this.options.injectJsFilter)) {
+                            continue;
+                        }
+                        let entryArray = entry[entryKey];
+                        if (Object.prototype.toString.call(entryArray) === '[object Array]') {
+                            entryArray.unshift(jsPath);
+                        }
+                        else if (entryArray.hasOwnProperty("import")
+                            && Object.prototype.toString.call(entryArray["import"]) === '[object Array]') {
+                            entryArray["import"].unshift(jsPath);
+                        }
+                    }
+                }
+            }
+            else {
+                this.injectObject(local, entry, value);
+            }
+        }
+    }
+    injectObject(local, entry, targetInjectJsFiles) {
+        if (typeof targetInjectJsFiles !== 'object') {
+            return;
+        }
+        const path = require('path');
+        const fs = require('fs');
+        for (let injectJsFilesKey in targetInjectJsFiles) {
+            const jsPath = path.join(local, injectJsFilesKey);
+            if (fs.existsSync(jsPath)) {
+                for (let entryKey in entry) {
+                    if (!this.filter(entryKey, targetInjectJsFiles[injectJsFilesKey])) {
+                        continue;
+                    }
+                    let entryArray = entry[entryKey];
+                    if (Object.prototype.toString.call(entryArray) === '[object Array]') {
+                        entryArray.unshift(jsPath);
+                    }
+                    else if (entryArray.hasOwnProperty("import")
+                        && Object.prototype.toString.call(entryArray["import"]) === '[object Array]') {
+                        entryArray["import"].unshift(jsPath);
+                    }
+                }
+            }
+        }
+    }
+    apply(compiler) {
+        if (compiler.hooks && this.options) {
+            compiler.hooks.entryOption.tap({ name: 'FastInjectJsPlugin' }, (local, entry) => {
+                if (Object.prototype.toString.call(this.options.injectJsFiles) === '[object Array]') {
+                    this.injectArray(local, entry, this.options.injectJsFiles);
+                }
+                else if (typeof this.options.injectJsFiles === 'object') {
+                    this.injectObject(local, entry, this.options.injectJsFiles);
+                }
+            });
+        }
+    }
+}
+exports.FastInjectJsPlugin = FastInjectJsPlugin;

package/vue/FastPages.d.ts

@@ -0,0 +1,25 @@
+import { FastBuildOption } from "./FastBuildOption";
+/**
+ * 页面相关操作
+ */
+export declare class FastPages {
+    /**
+     * 获取vue页面配置，vue.config.js 中的pages配置
+     * @param dirName 项目的根目录
+     * @param options 更多配置
+     */
+    static getBuildPages(dirName: string, options?: FastBuildOption): any;
+    /**
+     * 获取页面下config.json配置文件
+     * @param pagePath
+     * @param options
+     */
+    static getPageConfig(pagePath: string, options: FastBuildOption): any;
+    /**
+     * 创建默认的index索引页面
+     * @param pagesValue
+     * @param dirName
+     * @param options
+     */
+    static createIndexPage(pagesValue: string, dirName: string, options?: FastBuildOption): any;
+}

package/vue/FastPages.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastPages = void 0;
+const FastBuildOption_1 = require("./FastBuildOption");
+/**
+ * 页面相关操作
+ */
+class FastPages {
+    /**
+     * 获取vue页面配置，vue.config.js 中的pages配置
+     * @param dirName 项目的根目录
+     * @param options 更多配置
+     */
+    static getBuildPages(dirName, options) {
+        const fs = require("fs");
+        const _ = require("lodash");
+        const path = require("path");
+        if (options) {
+            options = FastBuildOption_1.FastBuildOption.merge(options, new FastBuildOption_1.FastBuildOption());
+        }
+        else {
+            options = new FastBuildOption_1.FastBuildOption();
+        }
+        let projectPagesDir = options.projectPagesDir;
+        let pagesMap = {};
+        let rootPagePaths = [];
+        if (_.isArray(projectPagesDir)) {
+            for (let projectPagesDirElement of projectPagesDir) {
+                rootPagePaths.push(path.join(dirName, projectPagesDirElement));
+            }
+        }
+        else {
+            rootPagePaths.push(path.join(dirName, projectPagesDir));
+        }
+        for (let rootPagePath of rootPagePaths) {
+            let pageFiles = fs.readdirSync(rootPagePath);
+            for (let i = 0; i < pageFiles.length; i++) {
+                let fileName = pageFiles[i];
+                if (fileName.indexOf(".") === 0 || fileName.indexOf("__") === 0) {
+                    continue;
+                }
+                let vueFileName = fileName + ".vue";
+                let subPageDirPath = path.join(rootPagePath, fileName);
+                let subPageDirRelativePath = subPageDirPath.replace(dirName, "");
+                if (_.startsWith(subPageDirRelativePath, "/")) {
+                    subPageDirRelativePath = subPageDirRelativePath.substring(1);
+                }
+                if (!fs.existsSync(subPageDirPath)) {
+                    continue;
+                }
+                if (fs.statSync(subPageDirPath).isFile()) {
+                    continue;
+                }
+                let vueFilePath = path.join(subPageDirPath, vueFileName);
+                if (!fs.existsSync(vueFilePath)) {
+                    vueFileName = "index.vue";
+                    vueFilePath = path.join(subPageDirPath, vueFileName);
+                }
+                //不存在.vue的，就默认创建一个
+                if (!fs.existsSync(vueFilePath)) {
+                    let content = `<script>
+import {defineComponent} from 'vue'
+export default defineComponent({
+    name: "index"
+});
+</script>
+<template>
+  <div>
+    默认页面
+  </div>
+</template>
+<style scoped>
+</style>`;
+                    fs.writeFileSync(vueFilePath, content, {});
+                }
+                let mainFilePath = path.join(subPageDirPath, options.pageMainFileName);
+                if (!fs.existsSync(mainFilePath)) {
+                    let content = "import {createApp} from \"vue\";\n" +
+                        "import child from \"./" + vueFileName + "\";\n" +
+                        "createApp(child).mount(\"" + options.mountSelector + "\");";
+                    fs.writeFileSync(mainFilePath, content, {});
+                }
+                pagesMap[fileName] = {
+                    entry: path.join(subPageDirRelativePath, options.pageMainFileName),
+                    title: options.projectTitle,
+                    filename: options.pageConfigHtmlNamePrefix + fileName + ".html",
+                };
+                pagesMap[fileName]["template"] = options.pageTemplateFileDir;
+                let pageMainTemplateFileName = path.join(subPageDirPath, options.pageMainTemplateFileName);
+                if (fs.existsSync(pageMainTemplateFileName)) {
+                    pagesMap[fileName]["template"] = path.join(subPageDirRelativePath, options.pageMainTemplateFileName);
+                }
+                let configFilePath = path.join(subPageDirPath, options.pageConfigFileName);
+                if (fs.existsSync(configFilePath)) {
+                    let configContent = fs.readFileSync(configFilePath);
+                    let configObj = JSON.parse(configContent);
+                    for (let configObjKey in configObj) {
+                        pagesMap[fileName][configObjKey] = configObj[configObjKey];
+                    }
+                }
+                if (options.autoCreatePageConfigFile && Object.keys(pagesMap).length > 0) {
+                    fs.writeFileSync(configFilePath, JSON.stringify(pagesMap[fileName], null, "\t"), {});
+                }
+            }
+        }
+        return pagesMap;
+    }
+    /**
+     * 获取页面下config.json配置文件
+     * @param pagePath
+     * @param options
+     */
+    static getPageConfig(pagePath, options) {
+        const path = require("path");
+        const fs = require("fs");
+        let configFilePath = path.join(pagePath, options.pageConfigFileName);
+        if (fs.existsSync(configFilePath)) {
+            const fs = require("fs");
+            let configContent = fs.readFileSync(configFilePath);
+            return JSON.parse(configContent);
+        }
+        return {};
+    }
+    /**
+     * 创建默认的index索引页面
+     * @param pagesValue
+     * @param dirName
+     * @param options
+     */
+    static createIndexPage(pagesValue, dirName, options) {
+        const fs = require("fs");
+        const path = require("path");
+        if (options) {
+            options = FastBuildOption_1.FastBuildOption.merge(options, new FastBuildOption_1.FastBuildOption());
+        }
+        else {
+            options = new FastBuildOption_1.FastBuildOption();
+        }
+        let projectPagesDir = options.projectPagesDir;
+        let baseDir = path.join(dirName, projectPagesDir, "index");
+        if (!fs.existsSync(baseDir)) {
+            fs.mkdirSync(baseDir);
+        }
+        let indexJsContent = "import {createApp} from \"vue\";\n";
+        indexJsContent += "import main from \"./main\";\n";
+        indexJsContent += "let app = createApp(main);\n";
+        indexJsContent += "app.config.globalProperties.pages = " + pagesValue + ";\n";
+        indexJsContent += "app.mount(\"" + options.mountSelector + "\");";
+        const indexPath = path.join(baseDir, "index.js");
+        fs.writeFileSync(indexPath, indexJsContent, {});
+        let configDiv = "<template >\n" +
+            "  <template v-for=\"(value,name) in pages\" :key=\"name\">\n" +
+            "    <van-cell :title=\"value.filename\"  is-link :url=\"value.urlParams?value.filename+'?'+value.urlParams:value.filename\" />\n" +
+            "  </template>\n" +
+            "</template>\n" +
+            "<script>\n" +
+            "/* eslint-disable vue/multi-word-component-names */" +
+            "import {Cell} from 'vant';\n" +
+            "export default {\n" +
+            "  name: \"main\",\n" +
+            "  components: {\n" +
+            "    [Cell.name]: Cell\n" +
+            "  }\n" +
+            "}\n" +
+            "</script>";
+        fs.writeFileSync(path.join(baseDir, "main.vue"), configDiv, {});
+        return {
+            entry: indexPath,
+            title: options.projectTitle + "首页"
+        };
+    }
+}
+exports.FastPages = FastPages;

package/vue/FastVueMultiConfig.d.ts

@@ -0,0 +1,18 @@
+export declare class FastVueMultiConfig {
+    private static getGlobalConfigObj;
+    /**
+     * 获取系统全局变量值
+     */
+    static getGlobalConfig(configKey: string): any;
+    /**
+     * 设置系统全局变量值
+     * @param configKey 变量名称
+     * @param configValue 变量值
+     */
+    static setGlobalConfig(configKey: string, configValue: any): void;
+    /**
+     * 判断目标级别是否在项目配置的编译级别内
+     * @param targetLevel
+     */
+    static isBuildLevel(targetLevel: number): boolean;
+}

package/vue/FastVueMultiConfig.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastVueMultiConfig = void 0;
+class FastVueMultiConfig {
+    static getGlobalConfigObj() {
+        // @ts-ignore
+        if (!window["__SystemGlobalConfig"]) {
+            //注意：此处变量 SystemGlobalConfig 在 webpack.DefinePlugin  编译后会替换成原始值，所以需要用window对象存储一下
+            // @ts-ignore
+            window["__SystemGlobalConfig"] = SystemGlobalConfig;
+        }
+        // @ts-ignore
+        return window["__SystemGlobalConfig"];
+    }
+    /**
+     * 获取系统全局变量值
+     */
+    static getGlobalConfig(configKey) {
+        try {
+            return this.getGlobalConfigObj()[configKey];
+        }
+        catch (e) {
+            console.error("获取全局变量配置异常！", e);
+            return null;
+        }
+    }
+    /**
+     * 设置系统全局变量值
+     * @param configKey 变量名称
+     * @param configValue 变量值
+     */
+    static setGlobalConfig(configKey, configValue) {
+        this.getGlobalConfigObj()[configKey] = configValue;
+    }
+    /**
+     * 判断目标级别是否在项目配置的编译级别内
+     * @param targetLevel
+     */
+    static isBuildLevel(targetLevel) {
+        return BuildLevel >= targetLevel;
+    }
+}
+exports.FastVueMultiConfig = FastVueMultiConfig;

package/vue/FastVueMultiPages.d.ts

@@ -0,0 +1,62 @@
+import { FastBuildOption } from "./FastBuildOption";
+/**
+ * 项目相关操作
+ * @author Janesen
+ */
+export declare class FastVueMultiPages {
+    private static projectGlobalConfig;
+    /**
+     * 获取默认的vue配置文件
+     * @param dirName 项目根目录，建议取值 {@link __dirname}
+     * @param options 更多选项配置 {@link FastBuildOption}
+     */
+    static getDefaultVueConfig(dirName: string, options: FastBuildOption): any;
+    /**
+     * 设置全局变量值
+     * @param key 变量名
+     * @param data 变量值
+     */
+    private static setGlobalConfig;
+    /**
+     * 是否是 vue-cli-service build 命令构建模式
+     */
+    static isVueCliServerBuild(): boolean;
+    /**
+     * 是否是 vue-cli-service server 命令构建模式
+     */
+    static isVueCliServerServer(): boolean;
+    /**
+     * 是否是正式版本，production
+     */
+    static isProduction(): boolean;
+    /**
+     * 是否的打包开发版本，development
+     */
+    static isDevelopment(): boolean;
+    /**
+     * 是否的打包测试版本，test
+     */
+    static isVueTest(): boolean;
+    /**
+     * 获取运行脚本 npm_lifecycle_script 里的参数值，例如：--model production 参数名：--model 参数值：production
+     * @param argument
+     */
+    static getScriptArgumentValue(argument: string): string | null;
+    /**
+     * 获取命令参数 --src
+     */
+    static getSrcPageDir(): string | null;
+    /**
+     * 获取命令参数 --out
+     */
+    static getOutPageDir(): string | null;
+    /**
+     * 获取命令参数 --debug 的值
+     */
+    static isServiceDebug(): boolean;
+    /**
+     * 彻底删除指定目录文件
+     * @param path
+     */
+    private static removeFile;
+}