@aiot-toolkit/aiotpack 2.0.2-beta.4 → 2.0.2-beta.6

package/lib/compiler/javascript/interface/IJavascriptCompileOption.d.ts

@@ -45,4 +45,8 @@ export default interface IJavascriptCompileOption extends ICompileParam {
      * 启用应用自动化测试
      */
     enableE2e?: boolean;
+    /**
+     * 启用代码体积分析，会生成 report.html 文件，可查看打包后各模块占用体积
+     */
+    enableStats?: boolean;
 }

package/lib/compiler/javascript/vela/VelaWebpackConfigurator.js

@@ -10,10 +10,20 @@ const WrapPlugin_1 = __importDefault(require("./plugin/WrapPlugin"));
 const UxCompileUtil_1 = __importDefault(require("./utils/UxCompileUtil"));
 class VelaWebpackConfigurator {
     createPlugins() {
-        return [
+        const result = [
             // 给 入口js 添加包裹
             new WrapPlugin_1.default()
         ];
+        // 如果开启 stats 参数，则添加 webpack-bundle-analyzer 插件
+        if (this.param.enableStats) {
+            const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+            result.push(new BundleAnalyzerPlugin({
+                analyzerMode: 'static',
+                openAnalyzer: false,
+                excludeAssets: /^@(system|service)\./
+            }));
+        }
+        return result;
     }
     /**
      * 通过读取 manifest.json 生成 entry
@@ -40,7 +50,6 @@ class VelaWebpackConfigurator {
                     {
                         loader: require.resolve('babel-loader'),
                         options: {
-                            // configFile: getBabelConfigJsPath(cwd),
                             cwd: this.param.projectPath,
                             cacheDirectory: true
                         }

package/lib/compiler/javascript/vela/utils/UxCompileUtil.js

@@ -130,7 +130,7 @@ class UxCompileUtil {
      * @returns
      */
     static getExtensionList(withDot = true) {
-        const result = ['js'];
+        const result = ['ux'];
         if (withDot) {
             return result.map((item) => `.${item}`);
         }

package/lib/config/UxConfig.d.ts

@@ -1,32 +1,13 @@
 import { IFileLaneConfig } from 'file-lane';
 import IJavascriptCompileOption from '../compiler/javascript/interface/IJavascriptCompileOption';
-import AppUxLoader from '../loader/ux/AppUxLoader';
-import JsLoader from '../loader/ux/JsLoader';
-import PngLoader from '../loader/ux/PngLoader';
-import UxLoader from '../loader/ux/UxLoader';
+import { IRule } from 'file-lane/lib/interface/IFileLaneConfig';
 declare class UxConfig implements IFileLaneConfig<IJavascriptCompileOption> {
     readonly projectPath: string;
     constructor(projectPath: string);
-    exclude: RegExp[];
+    exclude: (RegExp | ((filePath: string) => boolean))[];
     get output(): string;
     module: {
-        rules: ({
-            test: string[];
-            loader: (typeof AppUxLoader)[];
-            exclude?: undefined;
-        } | {
-            test: RegExp[];
-            exclude: RegExp[];
-            loader: (typeof UxLoader)[];
-        } | {
-            test: RegExp[];
-            loader: (typeof JsLoader)[];
-            exclude?: undefined;
-        } | {
-            test: RegExp[];
-            loader: (typeof PngLoader)[];
-            exclude?: undefined;
-        })[];
+        rules: IRule[];
     };
     preWorks: import("file-lane/lib/interface/IFileLaneConfig").PreWork<IJavascriptCompileOption>[];
     followWorks: {

package/lib/config/UxConfig.js

@@ -11,10 +11,30 @@ const UxLoader_1 = __importDefault(require("../loader/ux/UxLoader"));
 const PreWorkUtils_1 = __importDefault(require("../utils/PreWorkUtils"));
 const UxFollowWorks_1 = __importDefault(require("../followWorks/ux/UxFollowWorks"));
 const UxPreWorks_1 = __importDefault(require("../preWorks/ux/UxPreWorks"));
+const HmlLoader_1 = __importDefault(require("../loader/ux/HmlLoader"));
+const FileUtil_1 = __importDefault(require("@aiot-toolkit/shared-utils/lib/utils/FileUtil"));
+const fs_1 = __importDefault(require("fs"));
+const parser_1 = require("@aiot-toolkit/parser");
 class UxConfig {
     constructor(projectPath) {
         this.projectPath = projectPath;
-        this.exclude = [/node_modules/, /dist/, /build/];
+        this.exclude = [
+            /node_modules/,
+            /dist/,
+            /build/,
+            (filePath) => {
+                // 如果 是 script， style文件，且同路径下存在同名 hml，则忽略
+                const { ext, name } = path_1.default.parse(filePath);
+                if (![...parser_1.ExtensionConfig.SCRIPTS, ...parser_1.ExtensionConfig.STYLES].includes(ext)) {
+                    return false;
+                }
+                const hmlPath = FileUtil_1.default.updatePath(filePath, `${name}${parser_1.ExtensionConfig.HML}`);
+                if (fs_1.default.existsSync(hmlPath)) {
+                    return true;
+                }
+                return false;
+            }
+        ];
         this.module = {
             rules: [
                 {
@@ -26,6 +46,10 @@ class UxConfig {
                     exclude: [/app\.ux/],
                     loader: [UxLoader_1.default]
                 },
+                {
+                    test: [/.+\.hml$/],
+                    loader: [HmlLoader_1.default, UxLoader_1.default]
+                },
                 {
                     test: [/.+\.js$/],
                     loader: [JsLoader_1.default]

package/lib/config/XtsConfig.d.ts

@@ -1,5 +1,6 @@
 import { IFileLaneConfig } from 'file-lane';
 import XtsLoader from '../loader/xts/XtsLoader';
+import { PreWork } from 'file-lane/lib/interface/IFileLaneConfig';
 /**
  * XtsConfig
  */
@@ -12,7 +13,7 @@ declare class XtsConfig implements IFileLaneConfig {
             loader: (typeof XtsLoader)[];
         }[];
     };
-    preWorks: import("file-lane/lib/interface/IFileLaneConfig").PreWork<import("../interface/ICompileOptions").IXtsCompileOptions>[];
+    preWorks: PreWork[];
     followWorks: {
         worker: import("file-lane/lib/interface/IFileLaneConfig").FollowWork<import("../interface/ICompileOptions").IXtsCompileOptions>;
     }[];

package/lib/config/XtsConfig.js

@@ -7,7 +7,6 @@ const entryTemplate_1 = require("../followWorks/xts/entryTemplate");
 const generateRpk_1 = require("../followWorks/xts/generateRpk");
 const ts2wasm_1 = require("../followWorks/xts/ts2wasm");
 const XtsLoader_1 = __importDefault(require("../loader/xts/XtsLoader"));
-const preInstall_1 = require("../preWorks/xts/preInstall");
 /**
  * XtsConfig
  */
@@ -23,7 +22,7 @@ class XtsConfig {
                 }
             ]
         };
-        this.preWorks = [preInstall_1.preInstall];
+        this.preWorks = [];
         this.followWorks = [
             {
                 worker: entryTemplate_1.generateEntryFile

package/lib/loader/ux/AppUxLoader.js

@@ -13,6 +13,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const UxLoaderUtils_1 = __importDefault(require("../../utils/ux/UxLoaderUtils"));
+const ColorConsole_1 = __importDefault(require("@aiot-toolkit/shared-utils/lib/ColorConsole"));
+const path_1 = __importDefault(require("path"));
+const shared_utils_1 = require("@aiot-toolkit/shared-utils");
 /**
  * 处理app.ux的Loader
  * AppUxLoader
@@ -20,8 +23,17 @@ const UxLoaderUtils_1 = __importDefault(require("../../utils/ux/UxLoaderUtils"))
 class AppUxLoader {
     parser(files) {
         return __awaiter(this, void 0, void 0, function* () {
-            const resultFiles = [];
-            yield UxLoaderUtils_1.default.compileAppUxToJavascript(files[0], resultFiles, this.context, this.compilerOption);
+            const { projectPath } = this.context;
+            const { files: resultFiles, logs } = yield UxLoaderUtils_1.default.compileAppUxToJavascript(files[0], this.context, this.compilerOption);
+            if (logs) {
+                logs.forEach((item) => {
+                    ColorConsole_1.default.logger(Object.assign(Object.assign({}, item), { filePath: item.filePath ? path_1.default.relative(projectPath, item.filePath) : '' }));
+                });
+                // 如果有 error throw，则停止
+                if (logs.some((item) => item.level && [shared_utils_1.LOG_LEVEL.Throw].includes(item.level))) {
+                    throw new Error('stop!');
+                }
+            }
             return resultFiles;
         });
     }

package/lib/loader/ux/HmlLoader.d.ts

@@ -0,0 +1,24 @@
+import { IFileLaneContext, IFileParam, ILoader } from 'file-lane';
+/**
+ * HmlLoader
+ */
+declare class HmlLoader implements ILoader {
+    context?: IFileLaneContext | undefined;
+    compilerOption?: any;
+    parser(files: IFileParam<any>[]): IFileParam<any>[] | Promise<IFileParam<any>[]>;
+    /**
+     * 包裹 hml 文件
+     *
+     * # 路径
+     * 如果存在同路径的 ux 后缀，报错；否则转换为同路径的 ux 后缀
+     *
+     * # 内容
+     * 1. 给hml的内容加上<template></template>
+     * 2. 如果存在同路径同名的 script文件，则加到<script></script>中
+     * 3. 如果存在同路径同名的 style文件，则加到<style></style>中
+     *
+     * @param file
+     */
+    private wrapHml;
+}
+export default HmlLoader;

package/lib/loader/ux/HmlLoader.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const parser_1 = require("@aiot-toolkit/parser");
+/**
+ * HmlLoader
+ */
+class HmlLoader {
+    parser(files) {
+        return files.map((file) => {
+            return this.wrapHml(file);
+        });
+    }
+    /**
+     * 包裹 hml 文件
+     *
+     * # 路径
+     * 如果存在同路径的 ux 后缀，报错；否则转换为同路径的 ux 后缀
+     *
+     * # 内容
+     * 1. 给hml的内容加上<template></template>
+     * 2. 如果存在同路径同名的 script文件，则加到<script></script>中
+     * 3. 如果存在同路径同名的 style文件，则加到<style></style>中
+     *
+     * @param file
+     */
+    wrapHml(file) {
+        const { path, content } = file;
+        const uxExt = parser_1.ExtensionConfig.UX;
+        const getFilePath = (ext) => {
+            const pathParsed = path_1.default.parse(path);
+            pathParsed.ext = ext;
+            pathParsed.base = pathParsed.name + ext;
+            return path_1.default.format(pathParsed);
+        };
+        const uxPath = getFilePath(uxExt);
+        if (fs_1.default.existsSync(uxPath)) {
+            throw new Error(`${uxPath} already exists`);
+        }
+        const scriptExts = parser_1.ExtensionConfig.SCRIPTS;
+        const styleExts = parser_1.ExtensionConfig.STYLES;
+        const scriptPath = scriptExts
+            .map((item) => getFilePath(item))
+            .find((item) => fs_1.default.existsSync(item));
+        const stylePath = styleExts.map((item) => getFilePath(item)).find((item) => fs_1.default.existsSync(item));
+        let uxContent = ['<template>', content, '</template>'].join('\n');
+        if (scriptPath) {
+            uxContent += ['<script>', fs_1.default.readFileSync(scriptPath, 'utf-8'), '</script>'].join('\n');
+        }
+        if (stylePath) {
+            uxContent += ['<style>', fs_1.default.readFileSync(stylePath, 'utf-8'), '</style>'].join('\n');
+        }
+        return {
+            path,
+            content: uxContent
+        };
+    }
+}
+exports.default = HmlLoader;

package/lib/loader/ux/JsLoader.js

@@ -23,6 +23,7 @@ class JsLoader {
             const options = {
                 filePath: item.path,
                 projectPath: this.context.projectPath,
+                content: item.content.toString(),
                 onLog
             };
             return {

package/lib/loader/ux/UxLoader.js

@@ -23,7 +23,7 @@ class UxLoader {
             const { projectPath } = this.context;
             for (const file of files) {
                 // 转换每个文件
-                const { files, logs } = yield UxLoaderUtils_1.default.compileUxToJavascript(file, this.context, false, this.compilerOption);
+                const { files: compiledFiles, logs } = yield UxLoaderUtils_1.default.compileUxToJavascript(file, this.context, false, this.compilerOption);
                 if (logs) {
                     logs.forEach((item) => {
                         ColorConsole_1.default.logger(Object.assign(Object.assign({}, item), { filePath: item.filePath ? path_1.default.relative(projectPath, item.filePath) : '' }));
@@ -33,7 +33,7 @@ class UxLoader {
                         throw new Error('stop!');
                     }
                 }
-                resultFiles.push(...files);
+                resultFiles.push(...compiledFiles);
             }
             return resultFiles;
         });

package/lib/utils/PreWorkUtils.js

@@ -19,6 +19,7 @@ const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
 const TranslateCache_1 = __importDefault(require("../../../parser/lib/ux/translate/vela/TranslateCache"));
 const UxFileUtils_1 = __importDefault(require("./ux/UxFileUtils"));
+const parser_1 = require("@aiot-toolkit/parser");
 const BinaryPlugin = require('@aiot-toolkit/parser/lib/ux/translate/vela/protobuf/BinaryPlugin');
 /**
  * PreWorkUtils
@@ -51,13 +52,14 @@ class PreWorkUtils {
             Object.keys(pages).map((page) => {
                 const pageContent = pages[page];
                 const entryDir = path_1.default.join(srcPath, page);
-                const entryPage = path_1.default.join(entryDir, `${pageContent.component}.ux`);
-                if (fs_extra_1.default.existsSync(entryPage)) {
-                    entryList.push(entryPage);
+                const entryPages = parser_1.ExtensionConfig.TEMPLATES.map((item) => `${pageContent.component}${item}`);
+                const entry = entryPages.find((item) => fs_extra_1.default.existsSync(path_1.default.join(entryDir, item)));
+                if (entry) {
+                    entryList.push(path_1.default.join(entryDir, entry));
                 }
                 else {
                     // 路径不存在
-                    ColorConsole_1.default.throw(`### manifest ### path '${entryPage}' does not exist`);
+                    ColorConsole_1.default.throw(`### manifest ### path '${entryPages.join(' | ')}' does not exist`);
                 }
             });
             context['entries'] = entryList;

package/lib/utils/ux/UxLoaderUtils.d.ts

@@ -24,7 +24,10 @@ declare class UxLoaderUtils {
      * @param resultFiles
      * @param context
      */
-    static compileAppUxToJavascript(file: IFileParam, resultFiles: IFileParam[], context: IFileLaneContext, compileOption: IJavascriptCompileOption): Promise<void>;
+    static compileAppUxToJavascript(file: IFileParam, context: IFileLaneContext, compileOption: IJavascriptCompileOption): Promise<{
+        files: IFileParam<any>[];
+        logs: ILog[];
+    }>;
     /**
      * 判断是否为src/app.ux
      * @param filePath

package/lib/utils/ux/UxLoaderUtils.js

@@ -40,10 +40,11 @@ const UxParser_1 = __importDefault(require("@aiot-toolkit/parser/lib/ux/parser/U
 const UxToTypescript_1 = __importDefault(require("@aiot-toolkit/parser/lib/ux/translate/vela/UxToTypescript"));
 const ColorConsole_1 = __importDefault(require("@aiot-toolkit/shared-utils/lib/ColorConsole"));
 const FileUtil_1 = __importDefault(require("@aiot-toolkit/shared-utils/lib/utils/FileUtil"));
-const StringUtil_1 = __importDefault(require("@aiot-toolkit/shared-utils/lib/utils/StringUtil"));
-const parse5 = __importStar(require("parse5"));
+const parse5 = __importStar(require("aiot-parse5"));
 const path_1 = __importDefault(require("path"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
 const ts_morph_1 = require("ts-morph");
+const CommonUtil_1 = __importDefault(require("@aiot-toolkit/shared-utils/lib/utils/CommonUtil"));
 const BinaryPlugin = require('@aiot-toolkit/parser/lib/ux/translate/vela/protobuf/BinaryPlugin');
 const { extractFunctions } = require('@aiot-toolkit/parser/lib/ux/translate/vela/protobuf/protobufControl');
 /**
@@ -81,13 +82,30 @@ class UxLoaderUtils {
                 projectPath: context.projectPath,
                 filePath,
                 fileType: isAppUx ? 'app' : isPageUx ? 'page' : '',
+                content: content.toString(),
                 onLog: (log) => {
                     logs.push(log);
                 }
             };
+            // 收集图片资源
+            const ImageResources = [];
+            const collectImageResource = (originFilePath) => {
+                const assetDir = 'dynamicAssets';
+                const sourcePath = path_1.default.resolve(options.projectPath, compilerOption.sourceRoot);
+                const assetPath = path_1.default.resolve(sourcePath, assetDir);
+                const { name, ext } = path_1.default.parse(originFilePath);
+                const hashName = CommonUtil_1.default.calcImageDigest(originFilePath);
+                const newFilePath = path_1.default.join(assetPath, `${name}-${hashName}${ext}`);
+                const relativePath = path_1.default.posix.sep + path_1.default.relative(sourcePath, newFilePath).split(path_1.default.sep).join(path_1.default.posix.sep);
+                ImageResources.push({
+                    path: newFilePath,
+                    content: fs_extra_1.default.readFileSync(originFilePath)
+                });
+                return relativePath;
+            };
             // 开始转换
             const globalVar = ('globalVar' in context && context.globalVar) || {};
-            const parserResult = yield new UxParser_1.default(options, globalVar).parser(content.toString(), fullName);
+            const parserResult = yield new UxParser_1.default(options, compilerOption, globalVar, collectImageResource).parser();
             // 区分app.ux和一般ux
             // app.ux解析结果中加上manifest.json的内容
             const manifestJson = `require('./manifest.json')`;
@@ -96,7 +114,7 @@ class UxLoaderUtils {
                 return isAppUx
                     ? [
                         `${appImport.join('\n')}`,
-                        `var $app_style$ = ${UxLoaderUtils.wrapStyle(StringUtil_1.default.arrayTostring(appStyleTree, true), file, compilerOption)}`,
+                        `var $app_style$ = ${UxLoaderUtils.wrapStyle(JSON.stringify(appStyleTree), file, compilerOption)}`,
                         `var $app_script$ = ${UxLoaderUtils.handleScriptContent(false, appScriptTree)}\n`,
                         `$app_script$({}, $app_exports$, $app_require$);\n\n`,
                         `$app_exports$.default.style = $app_style$;`,
@@ -104,7 +122,7 @@ class UxLoaderUtils {
                     ]
                     : [
                         `${appImport.join('\n')}`,
-                        `var $app_style$ = ${UxLoaderUtils.wrapStyle(StringUtil_1.default.arrayTostring(appStyleTree, true), file, compilerOption)}\n`,
+                        `var $app_style$ = ${UxLoaderUtils.wrapStyle(JSON.stringify(appStyleTree), file, compilerOption)}\n`,
                         `var $app_script$ = ${UxLoaderUtils.handleScriptContent(isPageUx, appScriptTree)}`,
                         `var $app_template$ = ${UxLoaderUtils.wrapTempalte(appTemplateTree, file, compilerOption)}\n`,
                         `${UxLoaderUtils.getReturnType(isPageUx)} function ($app_exports$) {`,
@@ -125,13 +143,14 @@ class UxLoaderUtils {
             return {
                 files: [
                     {
-                        path: FileUtil_1.default.updatePath(filePath, newFileName),
+                        path: filePath,
                         content: code
                     },
                     {
                         path: FileUtil_1.default.updatePath(filePath, `${name}.js.map`),
                         content: sourceMap.toString()
-                    }
+                    },
+                    ...ImageResources
                 ],
                 logs
             };
@@ -143,7 +162,7 @@ class UxLoaderUtils {
      * @param resultFiles
      * @param context
      */
-    static compileAppUxToJavascript(file, resultFiles, context, compileOption) {
+    static compileAppUxToJavascript(file, context, compileOption) {
         return __awaiter(this, void 0, void 0, function* () {
             const { path: filePath, content } = file;
             let appContent = content;
@@ -154,7 +173,7 @@ class UxLoaderUtils {
             }
             // 解析script和style两部分
             const compileResult = yield UxLoaderUtils.compileUxToJavascript({ path: filePath, content: appContent }, context, isAppUx, compileOption);
-            resultFiles.push(...compileResult.files);
+            return compileResult;
         });
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiot-toolkit/aiotpack",
-  "version": "2.0.2-beta.4",
+  "version": "2.0.2-beta.6",
   "description": "The process tool for packaging aiot projects.",
   "keywords": [
     "aiotpack"
@@ -19,13 +19,13 @@
     "test": "node ./__tests__/aiotpack.test.js"
   },
   "dependencies": {
-    "@aiot-toolkit/generator": "2.0.2-beta.4",
-    "@aiot-toolkit/parser": "2.0.2-beta.4",
+    "@aiot-toolkit/generator": "2.0.2-beta.6",
+    "@aiot-toolkit/parser": "2.0.2-beta.6",
     "@hap-toolkit/aaptjs": "^2.0.0",
     "babel-loader": "^9.1.3",
     "del": "^4.1.0",
     "fast-glob": "^3.3.2",
-    "file-lane": "2.0.2-beta.4",
+    "file-lane": "2.0.2-beta.6",
     "file-loader": "^6.2.0",
     "fs-extra": "^11.2.0",
     "jsrsasign": "^7.2.2",
@@ -33,11 +33,13 @@
     "source-map": "^0.7.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-sources": "^3.2.3"
   },
   "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
     "@types/jsrsasign": "^10.5.12",
     "@types/webpack-sources": "^3.2.3"
   },
-  "gitHead": "656add8e64d8101b9f3886957c5b9ae23e2e854f"
+  "gitHead": "b9b99afff176075380c2ec95b43797d696c393c1"
 }