@tmsfe/tmskit 0.0.3 → 0.0.5-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmsfe/tmskit",
-  "version": "0.0.3",
+  "version": "0.0.5-beta.2",
   "description": "tmskit",
   "main": "main.js",
   "bin": {
@@ -29,43 +29,32 @@
     "rollup-plugin-typescript2": "0.27.0"
   },
   "dependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
     "async": "^3.2.2",
-    "axios": "^0.21.4",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^8.2.3",
     "chalk": "^4.1.0",
-    "commander": "^6.2.1",
+    "commander": "^8.3.0",
     "copy-webpack-plugin": "^9.1.0",
-    "cross-env": "^7.0.3",
     "download-git-repo": "^3.0.2",
     "ejs": "^3.1.5",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^9.0.1",
     "glob-ignore": "^1.0.2",
+    "gulp": "^4.0.2",
+    "gulp-image": "^5.1.0",
+    "gulp-less": "^5.0.0",
+    "gulp-px-to-rpx": "^1.0.7",
+    "gulp-rename": "^2.0.0",
+    "gulp-watch": "^5.0.1",
     "inquirer": "^7.3.3",
     "leven": "3.1.0",
     "lodash": "^4.17.21",
     "metalsmith": "^2.3.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "minimist": "^1.2.5",
     "miniprogram-ci": "1.4.13",
     "ora": "^5.1.0",
+    "precinct": "^8.3.1",
     "replace-ext": "^2.0.0",
     "shelljs": "^0.8.4",
-    "ts-loader": "^9.2.6",
-    "tslib": "^1.14.1",
-    "typescript": "^3.8.3",
-    "url-loader": "^4.1.1",
-    "username": "5.1.0",
-    "webpack": "^5.64.0",
-    "webpack-chain": "^6.5.1",
-    "webpack-cli": "^4.9.1"
+    "through2": "^4.0.2"
   },
   "engines": {
-    "node": "^12.17.0 || >= 14.0.0"
+    "node": "^12.17.0 || >= 14.13.1"
   },
   "jest": {
     "testEnvironment": "jest-environment-node"

package/src/config/constant.js

@@ -34,7 +34,7 @@ const DEFAULT_WEBPACK_ENTRY = {
 };
 
 // 默认从源码拷贝到编译后的配置
-const DEFAULT_COPY_CONFIG = ['package.json', 'app.js', 'app.ts', 'app.less', 'app.wxss', 'sitemap.json'];
+const DEFAULT_COPY_CONFIG = ['package.json', 'sitemap.json'];
 
 // 开发模式
 const MODE = {

package/src/config/defaultTmsConfig.js

@@ -4,14 +4,15 @@ module.exports = {
   envData: {},
   // 模块配置信息
   modules: [],
-  webpack: {
+  cloudDir: 'cloud',
+  gulp: {
+    // 第三方依赖代码需要拷贝到本项目的
+    dependencies: {},
     /** 编译输出文件夹位置 */
     outputDir: 'dist',
     /** 源码监听路径 */
     sourceDir: './',
     /** 源码Map */
-    sourceMap: 'none',
-    /** 别名 */
-    alias: {},
+    copyDir: [],
   },
 };

package/src/entry.js

@@ -7,14 +7,54 @@ module.exports = [
     },
   },
   {
-    command: 'run <command-name>',
-    options: [
-      ['-m, --module [moduleName]', '模块名称'],
-      ['-e, --env [env]', '环境变量'],
+    name: 'run',
+    type: 'child',
+    description: '项目开发使用的命令',
+    commands: [
+      {
+        command: 'install',
+        description: '安装依赖',
+        options: [
+          ['-m, --module [moduleName]', '模块名称'],
+          ['-e, --env [env]', '环境变量'],
+        ],
+        action: (cmd) => {
+          require('./scripts/run/index')('install', cmd);
+        },
+      },
+      {
+        command: 'dev',
+        description: 'dev 打包编译',
+        options: [
+          ['-m, --module [moduleName]', '模块名称'],
+          ['-e, --env [env]', '环境变量'],
+        ],
+        action: (cmd) => {
+          require('./scripts/run/index')('dev', cmd);
+        },
+      },
+      {
+        command: 'build',
+        description: 'prod 打包编译',
+        options: [
+          ['-m, --module [moduleName]', '模块名称'],
+          ['-e, --env [env]', '环境变量'],
+        ],
+        action: (cmd) => {
+          require('./scripts/run/index')('build', cmd);
+        },
+      },
+      {
+        command: 'init',
+        description: '根据模块配置初始化项目(eg: 动态拷贝模块、下载依赖、生成app.json等)',
+        options: [
+          ['-m, --module [moduleName]', '模块名称'],
+          ['-e, --env [env]', '环境变量'],
+        ],
+        action: (cmd) => {
+          require('./scripts/run/index')('init', cmd);
+        },
+      },
     ],
-    description: '运行模块',
-    action: (commandName, cmd) => {
-      require('./scripts/run/index')(commandName, cmd);
-    },
   },
 ];

package/src/gulp/build.js

@@ -0,0 +1,6 @@
+
+const dev = require('./dev');
+
+module.exports = async (tmsConfig, newModules) => {
+  dev(tmsConfig, newModules, false);
+};

package/src/gulp/compile.js

@@ -0,0 +1,68 @@
+const { src, dest } = require('gulp');
+const px2rpx = require('gulp-px-to-rpx');
+const less = require('gulp-less');
+const rename = require('gulp-rename');
+const watch = require('gulp-watch');
+const image = require('gulp-image');
+const replaceEnv = require('./replaceEnv');
+const { jsDep } = require('./jsDep');
+const { mpJsonDep } = require('./mpJsonDep');
+
+module.exports = function (
+  tmsConfig,
+  {
+    glob,
+    destPath,
+    srcOption,
+    module,
+    watchOption = { events: ['change', 'add', 'unlink'] },
+    isWatch,
+  },
+) {
+  Object.keys(glob).forEach((globKey) => {
+    const globValue = glob[globKey];
+    let srcPipe = src(globValue, srcOption);
+    if (isWatch) {
+      srcPipe = srcPipe.pipe(watch(globValue, watchOption));
+    }
+
+    switch (globKey) {
+      case 'js':
+        srcPipe
+          .pipe(replaceEnv(/process\.env(\.(\w*))?/g, tmsConfig.envData))
+          .pipe(jsDep(tmsConfig, module))
+          .pipe(dest(destPath));
+        break;
+      case 'css':
+        srcPipe
+          .pipe(less())
+          .pipe(px2rpx({
+            designWidth: 375, // 设计稿宽度，默认为750
+            precision: 2, // 小数最大精度，默认为6
+          }))
+          .pipe(rename({ extname: '.wxss' }))
+          .pipe(dest(destPath));
+        break;
+      case 'json':
+        srcPipe
+          .pipe(mpJsonDep(tmsConfig, module))
+          .pipe(dest(destPath));
+        break;
+      case 'html':
+        srcPipe
+          .pipe(dest(destPath));
+        break;
+      case 'image':
+        srcPipe
+          .pipe(image())
+          .pipe(dest(destPath));
+        break;
+      case 'other':
+        srcPipe
+          .pipe(dest(destPath));
+        break;
+      default:
+        break;
+    }
+  });
+};

package/src/gulp/dev.js

@@ -0,0 +1,107 @@
+const watch = require('gulp-watch');
+const { resolve } = require('../utils/widgets');
+const { buildOutputAppJson } = require('../utils/buildAppJson');
+const { DEFAULT_COPY_CONFIG } = require('../config/constant');
+const compile = require('./compile');
+
+function handleOtherGlob(glob) {
+  const otherArr = [];
+  Object.keys(glob).forEach((globKey) => {
+    if (typeof glob[globKey] === 'string') {
+      const data = glob[globKey].startsWith('!') ? glob[globKey] : `!${glob[globKey]}`;
+      otherArr.push(data);
+    } if (Array.isArray(glob[globKey])) {
+      glob[globKey].forEach((value) => {
+        if (typeof value === 'string') {
+          const data = value.startsWith('!') ? value : `!${value}`;
+          otherArr.push(data);
+        }
+      });
+    }
+  });
+  return otherArr;
+}
+
+module.exports = async (tmsConfig, newModules, isWatch = true) => {
+  // 监听app.json
+  if (isWatch) {
+    watch(resolve('app.json'), { ignoreInitial: false, events: ['add', 'change'] }, () => {
+      buildOutputAppJson(tmsConfig, newModules);
+    });
+  } else {
+    buildOutputAppJson(tmsConfig, newModules);
+  }
+
+  // 监听根目录的文件
+  compile(tmsConfig, {
+    glob: {
+      json: DEFAULT_COPY_CONFIG.map(item => resolve(item)),
+      css: ['app.less', 'app.wxss'].map(item => resolve(item)),
+      js: ['app.js', 'app.ts'].map(item => resolve(item)),
+    },
+    module: { from: '', to: '' },
+    destPath: resolve(tmsConfig.gulp.outputDir),
+    srcOption: { allowEmpty: true },
+    isWatch,
+  });
+
+  // 监听模块的文件
+  for (let module of newModules) {
+    // 处理默认参数
+    module = {
+      ...{ excludes: [] },
+      ...module,
+    };
+
+    if (isWatch) {
+      // 监听模块配置文件
+      watch(`${resolve(module.path)}/**/module.config.json`, {  events: ['change'] }, () => {
+        buildOutputAppJson(tmsConfig, newModules);
+      });
+    }
+
+    const excludes = module.exclude.map(key => `!${resolve(key)}`);
+    const glob = {
+      js: [`${resolve(module.path)}/**/*.{js,ts,wxs}`, ...excludes],
+      json: [`${resolve(module.path)}/**/*.json`, ...excludes],
+      css: [`${resolve(module.path)}/**/*.{less,wxss}`, ...excludes],
+      html: [`${resolve(module.path)}/**/*.wxml`, ...excludes],
+      image: [`${resolve(module.path)}/**/*.{png,jpg,jpeg,gif,svg}`, ...excludes],
+    };
+
+    compile(tmsConfig, {
+      glob: {
+        ...glob,
+        other: [`${resolve(module.path)}/**/*`, ...handleOtherGlob(glob)],
+      },
+      destPath: resolve(tmsConfig.gulp.outputDir, module.root),
+      module: { from: module.path, to: module.root },
+      srcOption: { allowEmpty: true },
+      isWatch,
+    });
+  }
+
+  // 监听copy模块
+  if (tmsConfig?.gulp?.copyDir.length > 0) {
+    for (const item of tmsConfig.gulp?.copyDir) {
+      const glob = {
+        js: `${item.from}/**/*.{js,ts,wxs}`,
+        json: `${item.from}/**/*.json`,
+        css: `${item.from}/**/*.{less,wxss}`,
+        html: `${item.from}/**/*.wxml`,
+        image: `${item.from}/**/*.{png,jpg,jpeg,gif,svg}`,
+      };
+
+      compile(tmsConfig, {
+        glob: {
+          ...glob,
+          other: [`${item.from}/**/*`, ...handleOtherGlob(glob)],
+        },
+        destPath: item.to,
+        module: item,
+        srcOption: { allowEmpty: true },
+        isWatch,
+      });
+    }
+  }
+};

package/src/gulp/jsDep.js

@@ -0,0 +1,150 @@
+const through = require('through2');
+const precinct = require('precinct');
+const path = require('path');
+const { copyFile, ext, fileInDir } = require('../utils/io');
+const { resolve } = require('../utils/widgets');
+const fs = require('fs');
+const { fail } = require('../utils/log');
+
+const dfsFindJsDep = function (anaFileOriginFile, anaFileDestFile, extensions) {
+  const resDep = new Map();
+  function dfs(anaFileOriginFile, anaFileDestFile, extensions) {
+    const contents = fs.readFileSync(anaFileOriginFile, 'utf8');
+    const deps = precinct(contents);
+    deps.forEach((depItem) => {
+      if (depItem.startsWith('.')) {
+        // 被依赖文件的存在的绝对路径
+        const depOriginPath = path.join(path.dirname(anaFileOriginFile), depItem);
+        // 被依赖文件加上后缀
+        const depOriginPathExt = ext(depOriginPath, extensions);
+
+        if (!depOriginPathExt) {
+          fail(`${anaFileOriginFile}的${depItem}引用路径存找不到文件，请检查引用路径`);
+        }
+
+        // 被依赖文件是否存在 include的path中 (只处理include的文件)
+        if (depOriginPathExt) {
+          const depOriginFile =  depOriginPathExt.file;
+          const depDestPath = resolve(path.dirname(anaFileDestFile), depItem);
+          const depDestFile = depDestPath.endsWith(depOriginPathExt.ext)
+            ? depDestPath
+            : depDestPath + depOriginPathExt.ext;
+
+          if (!resDep.has(depDestFile)) {
+            resDep.set(depDestFile, {
+              anaFileOriginFile,
+              anaFileDestFile,
+              depDestFile,
+              depOriginFile,
+            });
+            dfs(depOriginFile, depDestFile, extensions);
+          }
+        }
+      }
+    });
+  }
+  dfs(anaFileOriginFile, anaFileDestFile, extensions);
+
+  return resDep;
+};
+
+function handleCopyFile(depDestFile, depOriginFile) {
+  if (fs.existsSync(depDestFile)) {
+    const depDestContent = fs.readFileSync(depDestFile, 'utf8');
+    const depOriginContent = fs.readFileSync(depOriginFile, 'utf8');
+    if (depDestContent !== depOriginContent) {
+      console.log(`拷贝${depOriginFile}内容到${depDestFile}`);
+      copyFile(depOriginFile, depDestFile);
+    }
+  } else {
+    console.log(`拷贝${depOriginFile}内容到${depDestFile}`);
+    copyFile(depOriginFile, depDestFile);
+  }
+}
+
+function jsDep(tmsConfig, module, extensions = ['.js', '.ts', '.wxs']) {
+  const stream = through.obj(function (file, enc, cb) {
+    // 依赖分析的文件
+    const anaFileOriginFile = file.history[0];
+    const anaFileRelativeModule = path.relative(resolve(module.from), anaFileOriginFile);
+    const anaFileDestFile = resolve(tmsConfig.gulp.outputDir, module.to, anaFileRelativeModule);
+
+    if (file.isBuffer()) {
+      let contents = String(file.contents);
+      const deps = precinct(contents);
+      const copyModules = new Map();
+
+      Object.keys(tmsConfig.gulp.dependencies).forEach((includeName) => {
+        const includePath = tmsConfig.gulp.dependencies[includeName];
+        deps.forEach((depItem) => {
+          if (depItem.indexOf(includeName) > -1) {
+            // 被依赖文件的存在的绝对路径 (eg: /User/thirdparty/loadsh)
+            const depOriginPath = path.join(path.dirname(anaFileOriginFile), depItem);
+            // 被依赖文件加上后缀
+            const depOriginPathExt = ext(depOriginPath, extensions);
+
+            if (!depOriginPathExt) {
+              fail(`${anaFileOriginFile}的${depItem}引用路径存找不到文件，请检查引用路径`);
+            }
+
+            const isFileInDir = fileInDir(includePath, depOriginPathExt.file);
+            if (!isFileInDir) {
+              fail(`${depOriginPathExt.file}不在${includePath}不在文件夹内, 请检查应用路径`);
+            }
+
+            // 被依赖文件是否存在 include的path中 (只处理include的文件)
+            if (depOriginPathExt && isFileInDir) {
+              // eslint-disable-next-line
+              const reg = new RegExp(`^(\.\.\/)+.*\/${includeName}\/(.*)`);
+              const regRes = depItem.match(reg) || [];
+              if (regRes[2]) {
+                const depDestPath = resolve(tmsConfig.gulp.outputDir, module.to, includeName, regRes[2]);
+                const depDestFile = depDestPath.endsWith(depOriginPathExt.ext)
+                  ? depDestPath
+                  : depDestPath + depOriginPathExt.ext;
+                // {
+                //   depOriginFile: '/Users/odile/workspace/tms-frontend1/miniprogram/thirdparty/libs/timer.js',
+                //   depDestFile: `/Users/odile/workspace/tms-frontend1/tools/demo1/dist/modules/
+                //                 aggredriving/thirdparty/libs/timer.js`,
+                //   beforeDepPath: '../../../../thirdparty/libs/timer',
+                //   afterDepPath: '../../thirdparty/libs/timer'
+                // }
+                if (!copyModules.has(depDestFile)) {
+                  copyModules.set(depDestFile, {
+                    depOriginFile: depOriginPathExt.file,
+                    depDestFile,
+                    beforeDepPath: depItem,
+                    afterDepPath: path.relative(path.dirname(anaFileDestFile), depDestPath),
+                  });
+                }
+              }
+            }
+          }
+        });
+      });
+
+      copyModules.forEach(({ depOriginFile, depDestFile, beforeDepPath, afterDepPath }) => {
+        handleCopyFile(depDestFile, depOriginFile);
+        contents = contents.replace(beforeDepPath, afterDepPath);
+
+        const defs = dfsFindJsDep(depOriginFile, depDestFile, extensions);
+        defs.forEach((item) => {
+          handleCopyFile(item.depDestFile, item.depOriginFile);
+        });
+      });
+
+      // eslint-disable-next-line
+      file.contents = new Buffer(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return stream;
+}
+
+module.exports = {
+  jsDep,
+  dfsFindJsDep,
+};

package/src/gulp/mpJsonDep.js

@@ -0,0 +1,122 @@
+const through = require('through2');
+const path = require('path');
+const { copyFile, ext, fileInDir } = require('../utils/io');
+const { resolve } = require('../utils/widgets');
+const fs = require('fs');
+const { fail } = require('../utils/log');
+const { dfsFindJsDep } = require('./jsDep');
+
+function handleCopyFile(depDestFile, depOriginFile) {
+  if (fs.existsSync(depDestFile)) {
+    const depDestContent = fs.readFileSync(depDestFile, 'utf8');
+    const depOriginContent = fs.readFileSync(depOriginFile, 'utf8');
+    if (depDestContent !== depOriginContent) {
+      console.log(`json拷贝${depOriginFile}内容到${depDestFile}`);
+      copyFile(depOriginFile, depDestFile);
+    }
+  } else {
+    console.log(`json拷贝${depOriginFile}内容到${depDestFile}`);
+    copyFile(depOriginFile, depDestFile);
+  }
+}
+
+function mpJsonDep(
+  tmsConfig,
+  module,
+  extensions = ['.wxml'],
+  filesExt = ['.wxml', '.json', '.js', '.ts', '.wxss', '.less'],
+) {
+  const stream = through.obj(function (file, enc, cb) {
+    // 当前分析的文件的路径
+    const anaFileOriginFile = file.history[0];
+    const anaFileRelativeModule = path.relative(resolve(module.from), anaFileOriginFile);
+    const anaFileDestFile = resolve(tmsConfig.gulp.outputDir, module.to, anaFileRelativeModule);
+
+    if (file.isBuffer()) {
+      const copyModules = new Map();
+      let contents = String(file.contents);
+      try {
+        contents = JSON.parse(contents);
+        if (contents.usingComponents) {
+          Object.keys(tmsConfig.gulp.dependencies).forEach((includeName) => {
+            const includePath = tmsConfig.gulp.dependencies[includeName];
+            Object.keys(contents.usingComponents).forEach((componentKey) => {
+              const componentPath = contents.usingComponents[componentKey];
+              if (componentPath.indexOf(includeName) > -1) {
+                const depOriginPath = path.join(path.dirname(anaFileOriginFile), componentPath);
+                // 被依赖文件加上后缀
+                const depOriginPathExt = ext(depOriginPath, extensions);
+
+                if (!depOriginPathExt) {
+                  fail(`${anaFileOriginFile}的${componentPath}引用路径存找不到文件，请检查引用路径`);
+                }
+
+                const isFileInDir = fileInDir(includePath, depOriginPathExt.file);
+
+                if (!isFileInDir) {
+                  fail(`${depOriginPathExt.file}不在${includePath}不在文件夹内, 请检查应用路径`);
+                }
+
+                if (depOriginPathExt && isFileInDir) {
+                  // eslint-disable-next-line
+                  const reg = new RegExp(`^(\.\.\/)+.*\/${includeName}\/(.*)`);
+                  const regRes = componentPath.match(reg) || [];
+                  if (regRes[2]) {
+                    const depDestPath = resolve(tmsConfig.gulp.outputDir, module.to, includeName, regRes[2]);
+                    const depDestFile = depDestPath.endsWith(depOriginPathExt.ext)
+                      ? depDestPath
+                      : depDestPath + depOriginPathExt.ext;
+
+                    if (!copyModules.has(depDestFile)) {
+                      copyModules.set(depDestFile, {
+                        depOriginFile: depOriginPathExt.file,
+                        depOriginExt: depOriginPathExt.ext,
+                        depDestFile,
+                        beforeDepPath: componentPath,
+                        afterDepPath: path.relative(path.dirname(anaFileDestFile), depDestPath),
+                      });
+                    }
+                  }
+                }
+              }
+            });
+          });
+        }
+      } catch (e) {
+        fail(`解析jsonDep出现错误:${e}`);
+      }
+      copyModules.forEach(({ depOriginFile, depOriginExt, depDestFile, beforeDepPath, afterDepPath }) => {
+        filesExt.forEach((extKey) => {
+          const originFile = depOriginFile.replace(depOriginExt, extKey);
+          const destFile = depDestFile.replace(depOriginExt, extKey);
+
+          if (fs.existsSync(originFile)) {
+            handleCopyFile(destFile, originFile);
+
+            const jsExtensions = ['.js', '.ts'];
+            if (jsExtensions.indexOf(extKey) > -1) {
+              const defs = dfsFindJsDep(originFile, destFile, jsExtensions);
+              defs.forEach((item) => {
+                handleCopyFile(item.depDestFile, item.depOriginFile);
+              });
+            }
+          }
+        });
+        contents = typeof contents === 'object' ? JSON.stringify(contents, null, 2) : contents;
+        contents = contents.replace(beforeDepPath, afterDepPath);
+      });
+      contents = typeof contents === 'object' ? JSON.stringify(contents, null, 2) : contents;
+      // eslint-disable-next-line
+      file.contents = new Buffer(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return stream;
+}
+
+module.exports = {
+  mpJsonDep,
+};

package/src/gulp/replaceEnv.js

@@ -0,0 +1,29 @@
+const through = require('through2');
+function replaceEnv(reg = /process\.env(\.(\w*))?/g, envData) {
+  const stream = through.obj(function (file, enc, cb) {
+    if (file.isBuffer()) {
+      let contents = String(file.contents);
+      let resReg;
+      // eslint-disable-next-line
+      while ((resReg = reg.exec(contents)) !== null) {
+        const [reg1, reg2, reg3] = resReg;
+        if (reg1 && reg2 && reg3) {
+          const value = typeof envData[reg3] === 'object' ? JSON.stringify(envData[reg3]) : envData[reg3];
+          contents = contents.replace(reg1, value);
+        } else if (reg1 && !reg2 && !reg3) {
+          contents = contents.replace(reg1, JSON.stringify(envData));
+        }
+      }
+
+      // eslint-disable-next-line
+      file.contents = new Buffer(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return stream;
+}
+
+module.exports = replaceEnv;