@tmsfe/tmskit 0.0.5 → 0.0.6

package/src/gulp/plugins/mpJsonDep.js

@@ -0,0 +1,108 @@
+/* eslint-disable no-param-reassign */
+const through = require('through2');
+const path = require('path');
+const { ext, fileInDir, diffContentCopyFile } = require('../../utils/io');
+const { resolve } = require('../../utils/widgets');
+const fs = require('fs');
+const { pluginError } = require('./utils/pluginError');
+const { dfsFindCommonDep } = require('./mpCommonDep');
+
+function mpJsonDep(
+  tmsConfig,
+  module,
+  extensions = ['.json'],
+  filesExt = ['.wxml', '.json', '.js', '.ts', '.wxss', '.less'],
+  isWatch,
+) {
+  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.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.dependencies).forEach((includeName) => {
+            const includePath = tmsConfig.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 { ext: extAlias, file: depOriginFile, extPath } = ext(depOriginPath, extensions);
+
+                const isFileInDir = fileInDir(includePath, depOriginFile);
+                if (!isFileInDir) {
+                  pluginError(
+                    new Error(`${anaFileOriginFile}引用的路径${depOriginFile}不在${includePath}不在文件夹内, 请检查应用路径`),
+                    isWatch,
+                  );
+                  return;
+                }
+
+                // eslint-disable-next-line
+                const reg = new RegExp(`^(\.\.\/)+.*\/${includeName}\/(.*)`);
+                const regRes = componentPath.match(reg) || [];
+                if (regRes[2]) {
+                  const depDestPath = resolve(tmsConfig.outputDir, module.to, includeName, regRes[2]);
+                  const depDestFile = depDestPath.endsWith(extAlias) ? depDestPath : depDestPath + extPath;
+
+                  if (!copyModules.has(depDestFile)) {
+                    copyModules.set(depDestFile, {
+                      depOriginFile,
+                      depOriginExt: extAlias,
+                      depDestFile,
+                      beforeDepPath: componentPath,
+                      afterDepPath: path.relative(path.dirname(anaFileDestFile), depDestPath).replace(/\\/g, '/'),
+                    });
+                  }
+                }
+              }
+            });
+          });
+        }
+      } catch (e) {
+        pluginError(e, isWatch);
+      }
+      // console.log('json copyModules', copyModules);
+      copyModules.forEach(({ depOriginFile, depOriginExt, depDestFile, beforeDepPath, afterDepPath }) => {
+        // 拷贝当前依赖组件几个部分 wxml、wxss、wxs、json
+        filesExt.forEach((extKey) => {
+          const originFile = depOriginFile.replace(depOriginExt, extKey);
+          const destFile = depDestFile.replace(depOriginExt, extKey);
+
+          if (fs.existsSync(originFile)) {
+            diffContentCopyFile(originFile, destFile);
+
+            const extensionsFilter = ['.js', '.ts', '.wxss', '.less'];
+            if (extensionsFilter.indexOf(extKey) > -1) {
+              const defs = dfsFindCommonDep(originFile, destFile, extensionsFilter);
+              // console.log('json defs', defs);
+              defs.forEach((item) => {
+                diffContentCopyFile(item.depOriginFile, item.depDestFile);
+              });
+            }
+          }
+        });
+        contents = typeof contents === 'object' ? JSON.stringify(contents, null, 2) : contents;
+        const reg = new RegExp(`['"]${beforeDepPath}["']`, 'g');
+        contents = contents.replace(reg, `"${afterDepPath}"`);
+      });
+      contents = typeof contents === 'object' ? JSON.stringify(contents, null, 2) : contents;
+      file.contents = Buffer.from(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return stream;
+}
+
+module.exports = {
+  mpJsonDep,
+};

package/src/gulp/plugins/mpWxmlDep.js

@@ -0,0 +1,194 @@
+/* eslint-disable no-param-reassign */
+const through = require('through2');
+const htmlparser2 = require('htmlparser2');
+const fs = require('fs');
+const path = require('path');
+const { diffContentCopyFile, ext, fileInDir } = require('../../utils/io');
+const { resolve } = require('../../utils/widgets');
+const { dfsFindCommonDep } = require('./mpCommonDep');
+const { pluginError } = require('./utils/pluginError');
+
+// 处理后缀(源码引入依赖时，不带后缀的情况)
+const extFile = function (name, file) {
+  const extMap = {
+    import: '.wxml',
+    include: '.wxml',
+    wxs: '.wxs',
+  };
+  let extObj = {};
+
+  if (Object.keys(extMap).indexOf(name) > -1 && !file.endsWith(extMap[name])) {
+    extObj = ext(file, [extMap[name]]);
+  }
+  return {
+    extPath: extObj.extPath || '',
+    ext: extObj.ext || '',
+    file: extObj.file || file,
+  };
+};
+
+const dfsFindWxmlDep = function (anaFileOriginFile, anaFileDestFile, isWatch = true) {
+  const resDep = {
+    image: new Map(),
+    wxml: new Map(),
+    wxs: new Map(),
+  };
+  function dfs(anaFileOriginFile, anaFileDestFile) {
+    let contents = '';
+    try {
+      contents = fs.readFileSync(anaFileOriginFile, 'utf8');
+    } catch (e) {
+      pluginError(e, isWatch);
+    }
+    const parser = new htmlparser2.Parser({
+      onopentag(name, attributes) {
+        if (attributes?.src?.startsWith('.')) {
+          const depOriginPath = path.join(path.dirname(anaFileOriginFile), attributes.src);
+          // 被依赖文件加上后缀
+          const { ext, file: depOriginFile, extPath } = extFile(name, depOriginPath);
+
+          if (!fs.existsSync(depOriginFile)) {
+            pluginError(
+              new Error(`${anaFileOriginFile}引用的路径${depOriginFile}找不到应用文件，请检查引用路径`),
+              isWatch,
+            );
+            return;
+          }
+
+          const depDestPath = path.join(path.dirname(anaFileDestFile), attributes.src);
+          const depDestFile = depDestPath.endsWith(ext) ? depDestPath : depDestPath + extPath;
+
+          // 收集wxml依赖
+          if (['import', 'include'].indexOf(name) > -1) {
+            resDep.wxml.set(depDestFile, {
+              anaFileOriginFile,
+              anaFileDestFile,
+              depDestFile,
+              depOriginFile,
+            });
+            dfs(depOriginFile, depDestFile);
+          }
+          // 收集image依赖
+          // if (name === 'image') {
+          //   resDep.image.set(attributes.src, {
+          //     anaFileOriginFile,
+          //     anaFileDestFile,
+          //     depDestFile,
+          //     depOriginFile,
+          //   });
+          //   dfs(depOriginFile, depDestFile);
+          // }
+          // 收集wxs依赖
+          if (name === 'wxs') {
+            resDep.wxs.set(depDestFile, {
+              anaFileOriginFile,
+              anaFileDestFile,
+              depDestFile,
+              depOriginFile,
+            });
+            const defs = dfsFindCommonDep(depOriginFile, depDestFile, ['.wxs']);
+            defs.forEach((item, key) => {
+              resDep.wxs.set(key, item);
+            });
+          }
+        }
+      },
+    });
+    parser.write(contents);
+    parser.end();
+  }
+  dfs(anaFileOriginFile, anaFileDestFile);
+
+  return resDep;
+};
+
+function mpWxmlDep(tmsConfig, module, isWatch) {
+  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.outputDir, module.to, anaFileRelativeModule);
+
+    if (file.isBuffer()) {
+      let contents = String(file.contents);
+      const copyModules = new Map();
+      const parser = new htmlparser2.Parser({
+        onopentag(name, attributes) {
+          const nameFilter = ['import', 'include', 'wxs'];
+          if (nameFilter.indexOf(name) > -1 && attributes.src) {
+            const depOriginPath = path.join(path.dirname(anaFileOriginFile), attributes.src);
+            // 处理后缀(源码引入依赖时，后缀不全的情况)
+            const { ext, file: depOriginFile, extPath } = extFile(name, depOriginPath);
+
+            Object.keys(tmsConfig.dependencies).forEach((includeName) => {
+              if (attributes.src.indexOf(includeName) > -1) {
+                const includePath = tmsConfig.dependencies[includeName];
+
+                if (!fileInDir(includePath, depOriginFile)) {
+                  pluginError(
+                    new Error(`${anaFileOriginFile}引用路径${depOriginFile}不在${includePath}不在文件夹内, 请检查应用路径`),
+                    isWatch,
+                  );
+                  return;
+                }
+
+                // eslint-disable-next-line
+                const reg = new RegExp(`^(\.\.\/)+.*\/${includeName}\/(.*)`);
+                const regRes = attributes.src.match(reg) || [];
+                if (regRes[2]) {
+                  const depDestPath = resolve(tmsConfig.outputDir, module.to, includeName, regRes[2]);
+                  const depDestFile = depDestPath.endsWith(ext) ? depDestPath : depDestPath + extPath;
+                  if (!copyModules.has(depDestFile)) {
+                    copyModules.set(depDestFile, {
+                      depOriginFile,
+                      depDestFile,
+                      beforeDepPath: attributes.src,
+                      afterDepPath: path.relative(path.dirname(anaFileDestFile), depDestFile).replace(/\\/g, '/'),
+                    });
+                  }
+                }
+              }
+            });
+          }
+        },
+      });
+      parser.write(contents);
+      parser.end();
+
+      // console.log('wxml copyModules', copyModules);
+      copyModules.forEach(({ depOriginFile, depDestFile, beforeDepPath, afterDepPath }) => {
+        if (fs.existsSync(depOriginFile)) {
+          diffContentCopyFile(depOriginFile, depDestFile);
+          const reg = new RegExp(`['"]${beforeDepPath}["']`, 'g');
+          contents = contents.replace(reg, `"${afterDepPath}"`);
+        }
+        if (depOriginFile.endsWith('.wxml')) {
+          const defs = dfsFindWxmlDep(depOriginFile, depDestFile, isWatch);
+          // console.log('wxml defs', defs);
+          [...defs.wxml, ...defs.wxs].forEach(([, item]) => {
+            diffContentCopyFile(item.depOriginFile, item.depDestFile);
+          });
+        }
+        if (depOriginFile.endsWith('.wxs')) {
+          const defs = dfsFindCommonDep(depOriginFile, depDestFile, ['.wxs'], isWatch);
+          // console.log('wxs defs', defs);
+          defs.forEach((item) => {
+            diffContentCopyFile(item.depOriginFile, item.depDestFile);
+          });
+        }
+      });
+
+      file.contents = Buffer.from(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return stream;
+}
+
+module.exports = {
+  mpWxmlDep,
+  dfsFindWxmlDep,
+};

package/src/gulp/plugins/postcss-font-base64.js

@@ -0,0 +1,72 @@
+/* eslint-disable no-param-reassign */
+const postcss = require('postcss');
+const fs = require('fs');
+const path = require('path');
+const { fail } = require('../../utils/log');
+
+module.exports = postcss.plugin('postcss-font-base64', (options) => {
+  options = {
+    ...options,
+    ...{
+      match: { Scrabble: ['fakefont'] },
+      format: ['eot', 'woff', 'woff2', 'ttf'],
+    },
+  };
+
+  return function (css, result) {
+    css.walkAtRules('font-face', (fontFace) => {
+      const fileTypeRegex = getRegexStringForFileTypes(options.format);
+
+      fontFace.replaceValues(new RegExp(`url\\(["']?.+\\.${fileTypeRegex}["']?\\)`), (attr) => {
+        const fontRePath = attr.replace(/(url|'|"|\(|\)|\?#iefix)/g, '');
+        const fontAbPath = path.join(path.dirname(result.opts.from), fontRePath);
+        const res64 = base64Encode(fontAbPath);
+        const newUrlStr = 'url(data:'.concat(getMimeType(attr)).concat(';charset=utf-8;base64,')
+          .concat(res64)
+          .concat(')');
+        return res64 ? newUrlStr : attr;
+      });
+    });
+
+    function getRegexStringForFileTypes(fileTypes) {
+      const regex = fileTypes.map(fileType => (
+        fileType === 'eot'
+          ? fileType.concat('(\\?#iefix)?')
+          : fileType)).join('|');
+      return regex ? `(${regex})` : '';
+    }
+
+    // helper functions
+    function getMimeType(attribute) {
+      const formats = {
+        '.woff': 'application/font-woff',
+        '.woff2': 'font/woff2',
+        '.ttf': 'application/font-sfnt',
+        '.eot': 'application/vnd.ms-fontobject',
+        '.otf': 'application/font-sfnt',
+      };
+
+      let match = '';
+      const extension = attribute.match(/\.[a-z]{3,4}/)[0];
+
+      if (extension in formats) {
+        match = formats[extension];
+      };
+      return match;
+    };
+
+    function base64Encode(file) {
+      if (fs.existsSync(file)) {
+        return readAndEncodeFile(file);
+      }
+
+      fail(`${file} does not exist.`);
+      return '';
+    }
+
+    function readAndEncodeFile(file) {
+      const bitmap = fs.readFileSync(file);
+      return Buffer.from(bitmap).toString('base64');
+    }
+  };
+});

package/src/gulp/plugins/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 = Buffer.from(contents);
+    }
+
+    this.push(file);
+    cb();
+  });
+
+  return stream;
+}
+
+module.exports = replaceEnv;

package/src/gulp/plugins/utils/pluginError.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-param-reassign */
+const { fail } = require('../../../utils/log');
+
+function pluginError(error, isWatch) {
+  const errorOptions = { showStack: true };
+
+  errorOptions.error = error;
+  errorOptions.fileName = error.file;
+  errorOptions.lineNumber = error.line;
+  errorOptions.showProperties = false;
+  errorOptions.showStack = false;
+
+  const errMsg = error.message;
+
+  if (isWatch) {
+    fail(errMsg);
+  } else {
+    fail(errMsg);
+    process.exit(1);
+  }
+}
+
+module.exports = {
+  pluginError,
+};

package/src/index.js

@@ -1,5 +1,5 @@
 const chalk = require('chalk');
-const program = require('commander');
+const commander = require('commander');
 const { log, suggestCommands } = require('./utils/widgets');
 const { TMS_NAME } = require('./config/constant.js');
 const commands = require('./entry');
@@ -7,20 +7,35 @@ const init = require('./init');
 
 init();
 
+const program = new commander.Command(TMS_NAME);
+
 program
-  .version(`${TMS_NAME} ${require('../package.json').version}`);
+  .version(`${TMS_NAME} ${require('../package.json').version}`, '-v, -V, --version');
 
-commands.forEach((cmd) => {
-  const command = program.command(cmd.command);
+function registerCommand(program, commands) {
+  commands.forEach((cmd) => {
+    if (cmd.type === 'child') {
+      const childProgram = new commander.Command(cmd.name);
+      cmd.usage && childProgram.usage(cmd.usage);
+      cmd.description && childProgram.description(cmd.description);
+      registerCommand(childProgram, cmd.commands);
 
-  cmd.usage && command.usage(cmd.usage);
+      program.addCommand(childProgram);
+    } else {
+      const command = program.command(cmd.command);
 
-  cmd.description && command.description(cmd.description);
+      cmd.usage && command.usage(cmd.usage);
 
-  cmd.options?.forEach(opt => command.option(...opt));
+      cmd.description && command.description(cmd.description);
 
-  command.action(cmd.action);
-});
+      cmd.options?.forEach(opt => command.option(...opt));
+
+      command.action(cmd.action);
+    }
+  });
+}
+
+registerCommand(program, commands);
 
 program.on('--help', () => {
   log();

package/src/init.js

@@ -1,4 +1,3 @@
-const { exec } = require('shelljs');
 const semver = require('semver');
 const packageJson = require('../package.json');
 const chalk = require('chalk');
@@ -29,10 +28,6 @@ function initCliContext() {
   // 执行操作前检查node版本
   // 旧版本node直接提示升级，退出脚本
   checkNodeVersion(requiredVersion, packName);
-
-
-  // 执行前配置正确的npm源
-  exec('npm config set registry https://mirrors.tencent.com/npm/ --global', { silent: true });
 }
 
 module.exports = initCliContext;

package/src/scripts/run/build/index.js

@@ -1,15 +1,16 @@
 const shelljs = require('shelljs');
-const webpackBuildServer = require('../../../webpack/buildServer');
 const { resolve } = require('../../../utils/widgets');
 const init = require('../init/index');
+const gulpBuild = require('../../../gulp/build');
 
 async function build(tmsConfig, targetModules, env) {
   // 开始构建前，清理输出目录
-  await shelljs.rm('-rf', resolve('dist'));
+  await shelljs.rm('-rf', resolve(tmsConfig.outputDir));
 
-  const { targetModules: newModules } = await init(tmsConfig, targetModules);
+  const isDev = false;
+  const { targetModules: newModules } = await init(tmsConfig, targetModules, isDev);
 
-  webpackBuildServer(tmsConfig, newModules, env);
+  gulpBuild(tmsConfig, newModules, env);
 }
 
 module.exports = build;

package/src/scripts/run/dev/index.js

@@ -1,13 +1,15 @@
-const webpackServer = require('../../../webpack/devServer');
+const gulpDev = require('../../../gulp/dev');
 const fs = require('fs');
 const { resolve } = require('../../../utils/widgets');
 const init = require('../init/index');
-const { DEFAULT_MODULE_DIR } = require('../../../config/constant');
+const { MODULE_CONFIG_FILENAME } = require('../../../config/constant');
 const { tmsModulesMergeLocalModuleCfg } = require('../../../utils/tkitUtils');
 const { checkDependencies } = require('../../../utils/checkDependencies');
 const { fail } = require('../../../utils/log');
+const shelljs = require('shelljs');
+// const io = require('../../../utils/io');
 
-function isInit(tmsConfig, targetModules, contextDir) {
+function isInit(tmsConfig, targetModules, contextDir, isDev) {
   // 判断是否存在dist目录
   if (!fs.existsSync(contextDir)) {
     return true;
@@ -33,8 +35,8 @@ function isInit(tmsConfig, targetModules, contextDir) {
     if (!item.root) {
       return true;
     }
-    // 判断编译目录是否有该模块
-    if (!fs.existsSync(`${contextDir}/${item.root}`)) {
+    // 判断dist目录是否有该模块
+    if (!fs.existsSync(`${contextDir}/${item.root}/${MODULE_CONFIG_FILENAME}`)) {
       return true;
     }
     // 判断源码目录是否有该模块
@@ -45,22 +47,37 @@ function isInit(tmsConfig, targetModules, contextDir) {
   }
 
   //  判断package.json的版本是否有新的版本
-  return checkDependencies(targetModules, resolve('./'), tmsConfig.webpack.outputDir);
+  return checkDependencies(targetModules, resolve('./'), tmsConfig.outputDir, isDev);
+}
+
+// 用户编译分包时，需要将dist中其他分包(主包不能删除)的内容删除，否则其他分包的内容混入到主包(导致主包的体积超2M)
+function delOtherModule(tmsConfig, targetModules) {
+  const modules = tmsModulesMergeLocalModuleCfg(tmsConfig.modules, tmsConfig.appName);
+  const targetModulesName = targetModules.map(item => item.name);
+  modules.forEach((item) => {
+    if (item.root && targetModulesName.indexOf(item.name) === -1) {
+      const moduleRootDir = resolve(`dist/${item.root}`);
+      shelljs.rm('-rf', `${moduleRootDir}/*`, { silent: true });
+      // 解决微信开发者工具（dist/app.json: ["subpackages"][0]["root"] 字段需为 目录）错误 - 提前创建该目录
+      // io.ensureDirExist(moduleRootDir);
+    }
+  });
 }
 
 async function dev(tmsConfig, targetModules, env) {
-  // tms.config.js的modules 合并 module.config.json的配置项
-  let newModules = tmsModulesMergeLocalModuleCfg(targetModules, tmsConfig.appName, DEFAULT_MODULE_DIR);
+  let newModules = targetModules;
+  const isDev = true;
 
   // 判断是否进行init命令
-  if (isInit(tmsConfig, newModules, resolve('dist'))) {
-    // init函数会将 最新的tms.config.js的modules 合并 module.config.json的配置项 返回，不需要再做重复工作
-    const initData = await init(tmsConfig, targetModules);
+  if (isInit(tmsConfig, targetModules, resolve('dist'), isDev)) {
+    // init函数 下载第三方代码后，会将最新的tms.config.js的modules 合并 module.config.json的配置项返回
+    const initData = await init(tmsConfig, newModules, isDev);
     newModules = initData.targetModules;
   }
 
-  console.log('当前dev启动的有效模块', newModules.map(item => item.name));
-  webpackServer(tmsConfig, newModules, env);
+  console.log('当前dev启动的有效模块', newModules.map(item => item.name).sort());
+  delOtherModule(tmsConfig, newModules);
+  gulpDev(tmsConfig, newModules, env);
 }
 
 module.exports = dev;