@tmsfe/tmskit 0.0.5-beta.0 → 0.0.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmsfe/tmskit",
-  "version": "0.0.5-beta.0",
+  "version": "0.0.5-beta.1",
   "description": "tmskit",
   "main": "main.js",
   "bin": {
@@ -37,6 +37,7 @@
     "ejs": "^3.1.5",
     "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",
@@ -53,7 +54,7 @@
     "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/defaultTmsConfig.js

@@ -6,6 +6,8 @@ module.exports = {
   modules: [],
   cloudDir: 'cloud',
   gulp: {
+    // 第三方依赖代码需要拷贝到本项目的
+    dependencies: {},
     /** 编译输出文件夹位置 */
     outputDir: 'dist',
     /** 源码监听路径 */

package/src/gulp/build.js

@@ -1,78 +1,6 @@
-const fs = require('fs');
-const { src, dest }  = require('gulp');
-const px2rpx = require('gulp-px-to-rpx');
-const less = require('gulp-less');
-const rename = require('gulp-rename');
-const { resolve } = require('../utils/widgets');
-const { buildOutputAppJson } = require('../utils/buildAppJson');
-const { DEFAULT_COPY_CONFIG } = require('../config/constant');
-const replaceEnv = require('./replaceEnv');
 
-module.exports = async (tmsConfig, newModules) => {
-  // app.json
-  buildOutputAppJson(tmsConfig, newModules);
-
-  // 监听根目录的文件
-  DEFAULT_COPY_CONFIG.forEach((item) => {
-    if (fs.existsSync(resolve(item))) {
-      src(resolve(item))
-        .pipe(dest(resolve(tmsConfig.gulp.outputDir)));
-    }
-  });
-  src([resolve('app.less'), resolve('app.wxss')], { allowEmpty: true })
-    .pipe(less())
-    .pipe(px2rpx({
-      designWidth: 375, // 设计稿宽度，默认为750
-      precision: 2, // 小数最大精度，默认为6
-    }))
-    .pipe(rename({ extname: '.wxss' }))
-    .pipe(dest(resolve(tmsConfig.gulp.outputDir)));
-
-  src([resolve('app.js'), resolve('app.ts')], { allowEmpty: true })
-    .pipe(replaceEnv(/process\.env(\.(\w*))?/g, tmsConfig.envData))
-    .pipe(dest(resolve(tmsConfig.gulp.outputDir)));
-
-  // 监听模块的文件
-  for (const module of newModules) {
-    // 监听模块js文件
-    src([
-      `${resolve(module.path)}/**/*.js`,
-      `${resolve(module.path)}/**/*.ts`,
-      `${resolve(module.path)}/**/*.wxs`,
-    ])
-      .pipe(replaceEnv(/process\.env(\.(\w*))?/g, tmsConfig.envData))
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
+const dev = require('./dev');
 
-    // 监听json文件
-    src([
-      `${resolve(module.path)}/**/*.json`,
-    ])
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
-
-    // 监听css文件
-    src([
-      `${resolve(module.path)}/**/*.less`,
-      `${resolve(module.path)}/**/*.wxss`,
-    ])
-      .pipe(less())
-      .pipe(px2rpx({
-        designWidth: 375, // 设计稿宽度，默认为750
-        precision: 2, // 小数最大精度，默认为6
-      }))
-      .pipe(rename({ extname: '.wxss' }))
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
-
-    // 监听wxml文件
-    src([
-      `${resolve(module.path)}/**/*.wxml`,
-    ])
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
-  }
-  // 监听copy模块
-  if (tmsConfig?.gulp?.copyDir.length > 0) {
-    for (const item of tmsConfig.gulp?.copyDir) {
-      src([item.from])
-        .pipe(dest(item.to));
-    }
-  }
+module.exports = async (tmsConfig, newModules) => {
+  dev(tmsConfig, newModules, false);
 };

package/src/gulp/compile.js

@@ -0,0 +1,67 @@
+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 includeDep = require('./includeDep');
+
+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(includeDep(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(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

@@ -1,94 +1,83 @@
-const fs = require('fs');
-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 { resolve } = require('../utils/widgets');
 const { buildOutputAppJson } = require('../utils/buildAppJson');
 const { DEFAULT_COPY_CONFIG } = require('../config/constant');
-const replaceEnv = require('./replaceEnv');
+const compile = require('./compile');
 
-module.exports = async (tmsConfig, newModules) => {
+module.exports = async (tmsConfig, newModules, isWatch = true) => {
   // 监听app.json
-  watch(resolve('app.json'), { ignoreInitial: false, events: ['add', 'change'] }, () => {
+  if (isWatch) {
+    watch(resolve('app.json'), { ignoreInitial: false, events: ['add', 'change'] }, () => {
+      buildOutputAppJson(tmsConfig, newModules);
+    });
+  } else {
     buildOutputAppJson(tmsConfig, newModules);
-  });
+  }
 
   // 监听根目录的文件
-  DEFAULT_COPY_CONFIG.forEach((item) => {
-    if (fs.existsSync(resolve(item))) {
-      src(resolve(item))
-        .pipe(watch(resolve(item), { events: ['change'] }))
-        .pipe(dest(resolve(tmsConfig.gulp.outputDir)));
-    }
+  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,
   });
-  src([resolve('app.less'), resolve('app.wxss')], { allowEmpty: true })
-    .pipe(watch(`${resolve()}/(app.less|app.wxss)`, { events: ['change'] }))
-    .pipe(less())
-    .pipe(px2rpx({
-      designWidth: 375, // 设计稿宽度，默认为750
-      precision: 2, // 小数最大精度，默认为6
-    }))
-    .pipe(rename({ extname: '.wxss' }))
-    .pipe(dest(resolve(tmsConfig.gulp.outputDir)));
-
-  src([resolve('app.js'), resolve('app.ts')], { allowEmpty: true })
-    .pipe(watch(`${resolve()}/(app.js|app.ts)`, { events: ['change'] }))
-    .pipe(replaceEnv(/process\.env(\.(\w*))?/g, tmsConfig.envData))
-    .pipe(dest(resolve(tmsConfig.gulp.outputDir)));
 
   // 监听模块的文件
   for (const module of newModules) {
-    // 监听模块js文件
-    src([
-      `${resolve(module.path)}/**/*.js`,
-      `${resolve(module.path)}/**/*.ts`,
-      `${resolve(module.path)}/**/*.wxs`,
-    ])
-      .pipe(watch(`${resolve(module.path)}/**/(*.js|*.ts|*.wxs)`, {  events: ['add', 'change'] }))
-      .pipe(replaceEnv(/process\.env(\.(\w*))?/g, tmsConfig.envData))
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
-
-    // 监听json文件
-    src([
-      `${resolve(module.path)}/**/*.json`,
-    ])
-      .pipe(watch(`${resolve(module.path)}/**/*.json`, {  events: ['add', 'change'] }))
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
-
-    // 监听css文件
-    src([
-      `${resolve(module.path)}/**/*.less`,
-      `${resolve(module.path)}/**/*.wxss`,
-    ])
-      .pipe(watch(`${resolve(module.path)}/**/(*.less|*.wxss)`, {  events: ['add', 'change'] }))
-      .pipe(less())
-      .pipe(px2rpx({
-        designWidth: 375, // 设计稿宽度，默认为750
-        precision: 2, // 小数最大精度，默认为6
-      }))
-      .pipe(rename({ extname: '.wxss' }))
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
-
-    // 监听wxml文件
-    src([
-      `${resolve(module.path)}/**/*.wxml`,
-    ])
-      .pipe(watch(`${resolve(module.path)}/**/*.wxml`, {  events: ['add', 'change'] }))
-      .pipe(dest(resolve(tmsConfig.gulp.outputDir, module.root)));
-
-    // 监听模块配置文件
-    watch(`${resolve(module.path)}/**/module.config.json`, {  events: ['change'] }, () => {
+    if (isWatch) {
+      // 监听模块配置文件
+      watch(`${resolve(module.path)}/**/module.config.json`, {  events: ['change'] }, () => {
+        buildOutputAppJson(tmsConfig, newModules);
+      });
+    } else {
       buildOutputAppJson(tmsConfig, newModules);
+    }
+
+    const glob = {
+      js: `${resolve(module.path)}/**/*.{js,ts,wxs}`,
+      json: `${resolve(module.path)}/**/*.json`,
+      css: `${resolve(module.path)}/**/*.{less,wxss}`,
+      html: `${resolve(module.path)}/**/*.wxml`,
+      image: `${resolve(module.path)}/**/*.{png,jpg,jpeg,gif,svg}`,
+    };
+    compile(tmsConfig, {
+      glob: {
+        ...glob,
+        other: [`${resolve(module.path)}/**/*`, ...Object.keys(glob).map(key => `!${glob[key]}`)],
+      },
+      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) {
-      src([item.from])
-        .pipe(watch(item.from, {  events: ['add', 'change'] }))
-        .pipe(dest(item.to));
+      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}/**/*`, ...Object.keys(glob).map(key => `!${glob[key]}`)],
+        },
+        destPath: item.to,
+        module: item,
+        srcOption: { allowEmpty: true },
+        isWatch,
+      });
     }
   }
 };

package/src/gulp/includeDep.js

@@ -0,0 +1,130 @@
+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 dfsDep = function (includePath, 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 && fileInDir(includePath, depOriginPathExt.file)) {
+        const depOriginFile =  depOriginPathExt.file;
+        const depDestPath = resolve(path.dirname(anaFileDestFile), depItem);
+        const depDestFile = depDestPath.endsWith(depOriginPathExt.ext)
+          ? depDestPath
+          : depDestPath + depOriginPathExt.ext;
+
+        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);
+        }
+        dfsDep(includePath, depOriginFile, depDestFile, extensions);
+      }
+    }
+  });
+};
+
+function includeThirdParty(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 = [];
+
+      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}引用路径存找不到文件，请检查引用路径`);
+            }
+
+            // 被依赖文件是否存在 include的path中 (只处理include的文件)
+            if (depOriginPathExt && fileInDir(includePath, depOriginPathExt.file)) {
+              // 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'
+                // }
+                copyModules.push({
+                  depOriginFile: depOriginPathExt.file,
+                  depDestFile,
+                  beforeDepPath: depItem,
+                  afterDepPath: path.relative(path.dirname(anaFileDestFile), depDestPath),
+                  includePath,
+                });
+              }
+            }
+          }
+        });
+      });
+
+      copyModules.forEach(({ includePath, depOriginFile, depDestFile, beforeDepPath, afterDepPath }) => {
+        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);
+        }
+        contents = contents.replace(beforeDepPath, afterDepPath);
+        dfsDep(includePath, depOriginFile, depDestFile, extensions);
+      });
+
+      // eslint-disable-next-line
+      file.contents = new Buffer(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return stream;
+}
+
+module.exports = includeThirdParty;

package/src/gulp/replaceEnv.js

@@ -14,6 +14,7 @@ function replaceEnv(reg = /process\.env(\.(\w*))?/g, envData) {
           contents = contents.replace(reg1, JSON.stringify(envData));
         }
       }
+
       // eslint-disable-next-line
       file.contents = new Buffer(contents);
     }

package/src/utils/io.js

@@ -1,4 +1,5 @@
 const fs = require('fs');
+const path = require('path');
 /**
  * 判断目录是否为空
  * @param {string} dirname 目录名
@@ -15,7 +16,51 @@ const ensureDirExist = (dirname) => {
   }
 };
 
+// 复制文件
+const copyFile = function (src, dest) {
+  if (fs.existsSync(dest)) {
+    fs.unlinkSync(dest);
+  }
+  const dir = dest.substr(0, dest.lastIndexOf('/'));
+  ensureDirExist(dir);
+  fs.copyFileSync(src, dest);
+};
+
+// 添加后缀
+function ext(filePath, extensions) {
+  let newFilePath = filePath;
+  try {
+    const stat = fs.lstatSync(newFilePath);
+    if (stat.isDirectory()) {
+      newFilePath += (newFilePath[newFilePath.length - 1] === '/') ? 'index' : '/index';
+    }
+  } catch (e) {}
+
+  for (const ext of extensions) {
+    const file = newFilePath.endsWith(ext) ? newFilePath : newFilePath + ext;
+    if (fs.existsSync(file)) {
+      return {
+        file,
+        ext,
+      };
+    }
+  }
+  return null;
+}
+
+// 判断文件是否在某个目录
+const fileInDir = (dir, file) => {
+  const relativePath = path.relative(dir, file);
+  if (relativePath.startsWith('..')) {
+    return false;
+  }
+  return true;
+};
+
 module.exports = {
   isDirEmpty,
+  copyFile,
   ensureDirExist,
+  ext,
+  fileInDir,
 };

package/src/utils/npmUtils.js

@@ -111,7 +111,10 @@ const findAllPackageJson = (subRoots = [], contextDir) => {
 
 
   subRoots.forEach((subRoot) => {
-    console.log('>>>>>>>>>>>>', subRoot);
+    if (!subRoot.root) {
+      LOG.fail(`请检查${subRoot.name}的module.config.json是否有root字段`);
+      process.exit(1);
+    }
     const toppath = path.join(cwd, subRoot.root); // 从该目录开始查找package.json文件
     const list = findFilesByFilter(toppath, packageJsonName);