@tmsfe/tmskit 0.0.1

package/src/utils/mpCiUtils.js

@@ -0,0 +1,74 @@
+/* eslint-disable require-jsdoc */
+const ci = require('miniprogram-ci');
+const path = require('path');
+
+/**
+ * 获取小程序ci的Project对象
+ * @returns {Object} 小程序ci对象
+ */
+const getMpCi = ({ appId, projectPath, type = 'miniProgram', privateKey = 'TODO' }) => {
+  const cfgJsonContent = require(path.join(projectPath, 'project.config.json'));
+  const ignores = cfgJsonContent?.packOptions?.ignore.map(({ value }) => value) || [];
+
+  return new ci.Project({
+    appid: appId,
+    privateKey,
+    type,
+    projectPath,
+    ignores: ['node_modules/**/*', ...ignores],
+  });
+};
+
+
+// 用小程序ci工具构建小程序
+const packMpProject = async (project) => {
+  await ci.packNpm(project, {
+    ignores: ['cloud/**/*'],
+  });
+};
+
+/**
+ * 格式化构建npm结果信息
+ * @param {Array<String>} warning 构建时的告警信息
+ * @returns {String} npm构建错误信息
+ */
+const formatPackNpmWarning = (warning) => {
+  if (!warning) {
+    return '';
+  }
+
+  const result = warning.map((it, index) => `${index + 1}. ${it.msg}
+  \t@ ${it.jsPath}:${it.tips}`).join('---------------\n');
+
+  return result;
+};
+
+/**
+ * 构建miniprogram_npm
+ *  @returns {Object} 小程序ci对象
+ */
+const buildMpNpm = async ({
+  appId,
+  projectPath,
+  privateKey,
+}) => {
+  const mpCi = await getMpCi({
+    appId,
+    projectPath,
+    privateKey,
+  });
+
+  const packNpmWarning = await packMpProject(mpCi);
+
+  const packNpmMsg = formatPackNpmWarning(packNpmWarning);
+  if (packNpmMsg) {
+    return Promise.reject(packNpmMsg);
+  }
+
+  return Promise.resolve();
+};
+
+
+module.exports = {
+  buildMpNpm,
+};

package/src/utils/npmUtils.js

@@ -0,0 +1,126 @@
+/**
+ * 本文件主要负责项目或者分包依赖的npm的安装
+ */
+const fs = require('fs');
+const path = require('path');
+const shell = require('shelljs');
+const LOG = require('./log');
+
+const dirpath = process.cwd(); // 项目根目录
+
+const getTarNpmFilename = targetDir => `${targetDir.replaceAll('/', '-')}.tar.gz`;
+
+// 缓存npm包
+const npmCache = function (targetDir, cacheDir) {
+  if (!fs.existsSync(cacheDir)) {
+    fs.mkdirSync(cacheDir);
+  }
+  const tarNpmFilename = getTarNpmFilename(targetDir);
+  const tarNpmFilePath = `${cacheDir}/${tarNpmFilename}`;
+  if (fs.existsSync(tarNpmFilePath)) {
+    shell.rm('-rf', tarNpmFilePath);
+  }
+  const cmd = `tar -zcvf ${tarNpmFilePath} ./node_modules`;
+  shell.exec(cmd, { async: true, silent: true });
+  // tar -zcvf /Users/odile/.tmskit/node_modules.tar.gz  ./node_modules
+};
+
+// 获取缓存npm包
+const getNpmCache = function (targetDir, cacheDir) {
+  const tarNpmFilename = getTarNpmFilename(targetDir);
+  const tarNpmFilePath = `${cacheDir}/${tarNpmFilename}`;
+  if (fs.existsSync(tarNpmFilePath)) {
+    const cmd = `tar -zxvf ${tarNpmFilePath} -C ./`;
+    shell.exec(cmd, { async: false, silent: true });
+  }
+  // tar -zxvf /Users/odile/.tmskit/node_modules.tar.gz  -C ./
+};
+
+
+// 遍历安装指定目录下所有项目的npm依赖
+const npmInstallAll = async (modules, contextDir, cacheDir) => {
+  const packageJsonFiles = await findAllPackageJson(modules, contextDir);
+
+  await Promise.all(packageJsonFiles.map(file => new Promise((resolve) => {
+    const dir = path.dirname(file);
+    shell.cd(dir);
+    if (!fs.existsSync(`${dir}/node_modules`)) {
+      getNpmCache(dir, cacheDir);
+    }
+    shell.exec('npx pnpm install --prod --registry http://mirrors.tencent.com/npm/', { silent: false });
+    resolve();
+    npmCache(dir, cacheDir);
+  })));
+};
+
+/**
+ * 递归查找指定条件的文件
+ * @param {String} startPath 开始查找的根路径
+ * @param {String} filter 匹配的字符串
+ * @returns {Array<String>} 查找到的文件路径列表
+ */
+const findFilesByFilter = (startPath, filter) => {
+  const result = [];
+  /**
+   * 根据指定的筛选器查找文件
+   * @param {String} startPath 开始查找的文件夹路径
+   * @param {String} filter 筛选器
+   * @returns {Undefined} 无需返回值
+   */
+  const find = (startPath, filter) => {
+    // 目录不存在
+    if (!fs.existsSync(startPath)) {
+      LOG.fail(`${startPath}目录不存在`);
+      process.exit(-1);
+      return;
+    }
+
+    // 当前目录下的所有文件 / 文件夹
+    const exceptDir = ['node_modules', 'miniprogram_npm'];
+    if (exceptDir.find(item => startPath.indexOf(item) > -1)) {
+      return;
+    }
+    const files = fs.readdirSync(startPath);
+    files.forEach((file) => {
+      const filename = path.join(startPath, file);
+      const stat = fs.lstatSync(filename);
+      // 当前文件是文件夹类型，继续递归
+      if (stat.isDirectory()) {
+        find(filename, filter);
+      } else if (filename.indexOf(filter) >= 0) {
+        // 文件类型
+        result.push(filename);
+      };
+    });
+  };
+
+  find(startPath, filter);
+  return result;
+};
+
+/**
+ * 找到项目中所有的package.json文件
+ * @param {Array<String>} subRoots 需要安装npm依赖的路径
+ * @param {String} contextDir 命令运行的目录
+ * @returns {Array<String>} 找到的所有package.json文件的路径
+ */
+const findAllPackageJson = (subRoots = [], contextDir) => {
+  const packageJsonName = 'package.json';         // 查找文件名
+  const cwd = contextDir || dirpath;
+  const result = [path.join(cwd, packageJsonName)]; // 默认填充根目录下的package.json
+
+  subRoots.forEach((subRoot) => {
+    const toppath = path.join(cwd, subRoot.root); // 从该目录开始查找package.json文件
+    const list = findFilesByFilter(toppath, packageJsonName);
+
+    result.push(...list);
+  });
+
+  return result;
+};
+
+
+module.exports = {
+  npmInstallAll,
+  findAllPackageJson,
+};

package/src/utils/tkitUtils.js

@@ -0,0 +1,84 @@
+const loadash = require('lodash');
+const fs = require('fs');
+const { TMS_NAME, TMS_CONFIG_FILENAME, MODULE_CONFIG_FILENAME } = require('../config/constant');
+const { resolve, isObject } = require('./widgets');
+const { setModuleConfig } = require('./buildAppJson');
+const defaultTmsConfig = require('../config/defaultTmsConfig');
+const { fail } = require('./log');
+
+/**
+ * 读取tms.config.json
+ * @param env {string} 环境变量
+ */
+const readTmsConfig = function (env) {
+  const tmsConfigPath = resolve(TMS_CONFIG_FILENAME);
+  if (!fs.existsSync(tmsConfigPath)) {
+    fail('当前执行目录没有tms.config.js的配置项，请进行配置');
+    process.exit(1);
+  }
+  const tmsConfigFn = require(tmsConfigPath);
+  const tmsConfig = tmsConfigFn({
+    env,
+  });
+  // 合并默认值
+  loadash.mergeWith(tmsConfig, defaultTmsConfig);
+  return tmsConfig;
+};
+
+/**
+ * 从tms.config.json中检索用户传入的有效modules
+ * @param { object } tmsConfig
+ * @param { array } modules
+ * @returns
+ */
+const checkModules = function (tmsConfig, modules) {
+  const targetModules =  [];
+  modules.forEach((moduleName) => {
+    const module = tmsConfig.modules.find(module => module.name === moduleName);
+    module && targetModules.push(module);
+  });
+  if (targetModules.length === 0) {
+    fail(`你启动的模块无效，尝试 ${TMS_NAME} -m moduleName`);
+    process.exit(1);
+  }
+  return targetModules;
+};
+
+/**
+ * tms.config.js的modules 合并 module.config.json的配置项
+ * @param {array} modules
+ * @param {string} appName
+ * @param {string} moduleDir
+ * @returns
+ */
+const tmsModulesMergeLocalModuleCfg = (modules, appName, moduleDir) => {
+  const newModules = [];
+  modules.forEach(({ path: relativePath, name: moduleName }, moduleIndex) => {
+    const moduleConfigPath = resolve(relativePath, MODULE_CONFIG_FILENAME);
+    if (fs.existsSync(moduleConfigPath)) {
+      let moduleConfigContent = fs.readFileSync(moduleConfigPath, 'utf-8');
+      moduleConfigContent = setModuleConfig(moduleConfigContent, appName, moduleDir);
+      const moduleContentArr = isObject(moduleConfigContent) ? [moduleConfigContent] : moduleConfigContent;
+      moduleContentArr.forEach(({ name }, moduleContentArrIndex) => {
+        if (name === moduleName) {
+          newModules.push({
+            ...modules[moduleIndex],
+            ...moduleContentArr[moduleContentArrIndex],
+          });
+        }
+      });
+    } else {
+      newModules.push({
+        ...modules[moduleIndex],
+      });
+    }
+  });
+  return newModules;
+};
+
+
+module.exports = {
+  readTmsConfig,
+  checkModules,
+  tmsModulesMergeLocalModuleCfg,
+};

package/src/utils/widgets.js

@@ -0,0 +1,177 @@
+
+const program = require('commander');
+const leven = require('leven');
+const ora = require('ora');
+const path = require('path');
+const fs = require('fs');
+const shelljs = require('shelljs');
+const download = require('download-git-repo');
+const chalk = require('chalk');
+const shelljsOptons =  { slient: true };
+
+// 获取当前目录
+const cwd = process.cwd();
+function resolve(...args) {
+  return path.resolve(cwd, ...args);
+};
+
+/**
+ * 封装logs
+ * @returns {Undefined} 无需返回值
+ */
+const log = (...args) => console.log(...args);
+
+/**
+ * 用户输入命令时，进行提示
+ * @param {String} unknownCommand 非预期的命令
+ * @returns {Undefined} 无需返回值
+ */
+const suggestCommands = (unknownCommand) => {
+  const availableCommands = program.commands.map(cmd => cmd._name);
+
+  let suggestion;
+  availableCommands.forEach((cmd) => {
+    const isBestMatch = leven(cmd, unknownCommand) < leven(suggestion || '', unknownCommand);
+    if (leven(cmd, unknownCommand) < 3 && isBestMatch) {
+      suggestion = cmd;
+    }
+  });
+
+  if (suggestion) {
+    log(`  ${chalk.red(`Did you mean ${chalk.yellow(suggestion)}?`)}`);
+  }
+};
+
+/**
+ * 判断变量是否是一个数组
+ * @param { unknown } obj 变量
+ * @returns { boolean } 是否是一个数组
+ */
+function isObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+/**
+ * 判断变量是否是一个对象
+ * @param { unknown } obj 变量
+ * @returns { boolean } 是否是一个对象
+ */
+function isArray(obj) {
+  return Object.prototype.toString.call(obj) === '[object Array]';
+}
+
+/**
+ * 下载模块到目标目录
+ * @param { string } dest 目标地址
+ * @param { object } downloadOptions 模块下载配置 { repoUrl-仓库地址, gitUrl-git地址, branch-分支或者tag }
+ * @returns { undefined } no return
+ */
+function downloadRepo(dest, downloadOptions = { repoUrl: '', gitUrl: '', branch: '' }) {
+  const { repoUrl, gitUrl, branch } = downloadOptions;
+
+  if (fs.existsSync(dest)) {
+    shelljs.rm('-rf', dest);
+  }
+
+  shelljs.mkdir('-p', dest);
+  return new Promise((resolve) => {
+    download(`${repoUrl}#${branch}`, dest, { clone: true }, async (e) => {
+      if (e) {
+        console.log(e) // eslint-disable-line
+        await downloadRepoForGit(gitUrl, dest, branch);
+      }
+
+      resolve();
+    });
+  });
+}
+
+/**
+ * 下载模块到目标目录备用方案
+ * @param { string } url 模块地址
+ * @param { string } dest 目标地址
+ * @param { string } branch 分支名
+ * @returns { undefined } no return
+ */
+function downloadRepoForGit(url, dest, branch) {
+  const cwd = process.cwd();
+
+  return new Promise((resolve, reject) => {
+    // 如果目标目录不存在
+    if (fs.existsSync(dest)) {
+      shelljs.rm('-rf', path.join(dest));
+    }
+
+    shelljs.mkdir('-p', dest);
+    shelljs.cd(dest);
+
+    shelljs.exec(`git clone ${url} ${dest} --depth=1`, shelljsOptons);
+
+    shelljs.exec(`git checkout ${branch}`, (code) => {
+      if (code === 0) {
+        shelljs.cd(cwd);
+
+        resolve();
+      }
+
+      reject();
+    });
+  });
+}
+
+/**
+ * 计算各项任务耗时
+ * @param {Number} start 任务开始时间
+ * @returns {Undefined} 无需返回值
+ */
+const cost = start => Date.now() - start;
+
+/**
+ * 创建构建子任务
+ * @param {Function} task 子任务执行函数
+ * @param {String} startText 任务开始前提示语
+ * @param {String} endText 任务结束后提示语
+ * @returns {Undefined} 无需返回值
+ */
+function createTask(task, startText, endText) {
+  return async (...args) => {
+    const start = Date.now();
+    let result;
+
+    const spinner = ora(startText);
+    spinner.start();
+
+    try {
+      result = await task(...args);
+    } catch (e) {
+      result = e;
+      console.log(chalk.red(e));
+
+      process.exit(-1);
+    } finally {
+      endText && spinner.succeed(`${endText}, ${cost(start)}ms`);
+      spinner.stop();
+    }
+
+    return result;
+  };
+};
+
+/**
+ * 字符串驼峰化处理
+ * @param {String} str 需要处理的字符串
+ * @returns {String} 经过驼峰处理的字符串
+ */
+const camelize = str => str.replace(/-(\w)/g, (a, c) => (c ? c.toUpperCase() : ''));
+
+module.exports = {
+  resolve,
+  log,
+  isObject,
+  isArray,
+  createTask,
+  downloadRepo,
+  downloadRepoForGit,
+  suggestCommands,
+  camelize,
+};

package/src/webpack/base.js

@@ -0,0 +1,65 @@
+const WebpackChain = require('webpack-chain');
+const webpack = require('webpack');
+const { getEntry, stringified, getAlias } = require('./utils');
+const { resolve } = require('../utils/widgets');
+const { DEFAULT_WEBPACK_ENTRY, DEFAULT_MODULE_DIR } = require('../config/constant');
+
+module.exports = (tmsConfig, modules) => {
+  const { envData = {}, webpack: tmsWebpack } = tmsConfig;
+  let webpackConfig = new WebpackChain();
+
+  const alias = getAlias(modules);
+  const entry = getEntry(DEFAULT_WEBPACK_ENTRY, modules, tmsConfig, DEFAULT_MODULE_DIR);
+  webpackConfig.merge({
+    entry,
+    output: {
+      path: resolve(`./${tmsWebpack.outputDir}`),
+      libraryTarget: 'commonjs2',
+      filename: '[name]',
+    },
+    // TODO 有报错，先注释掉
+    // cache: {
+    //   type: 'filesystem',
+    //   cacheDirectory: resolve(`./${tmsConfig.webpack.outputDir}/node_modules/.cache`),
+    // },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+      alias: Object.assign(tmsWebpack.alias, alias),
+    },
+    devtool: tmsWebpack.sourceMap ? 'source-map' : false,
+  });
+
+  webpackConfig.module
+    .rule('ts-loader')
+    .test(/\.ts$/)
+    .use('ts-loader')
+    .loader(require.resolve('ts-loader'))
+    .options({
+      configFile: resolve('./tsconfig.json'),
+      // 只进行语法转换,不进行类型校验,提高构建速度
+      transpileOnly: true,
+    })
+    .end();
+
+  // webpackConfig.module
+  //   .rule('babel')
+  //   .test(/\.(js|mjs|jsx|ts|tsx)$/)
+  //   .pre()
+  // .exclude.add(/(node_modules|miniprogram_npm)/).end()
+  //   .use(require.resolve('babel-loader'))
+  //   .loader(require.resolve('babel-loader'));
+
+  webpackConfig
+    .plugin('definePlugin')
+    .use(webpack.DefinePlugin, [stringified(envData)])
+    .end();
+
+  // 执行tms.config.js自定义的webpackChain
+  if (tmsWebpack.webpackChain) {
+    webpackConfig = tmsWebpack.webpackChain(webpackConfig, {
+      modules,
+    });
+  }
+
+  return webpackConfig;
+};

package/src/webpack/build.js

@@ -0,0 +1,21 @@
+const webpackConfig = require('./base');
+const { DEFAULT_COPY_CONFIG } = require('../config/constant');
+const { getCopyPlugin } = require('./utils');
+
+module.exports = (...args) => {
+  const [tmsConfig, modules] = args;
+  const webpackBuildConfig = webpackConfig(...args);
+
+  webpackBuildConfig.mode('production');
+
+  const copyPluginParams = getCopyPlugin(DEFAULT_COPY_CONFIG, modules, tmsConfig, 'build');
+  // console.log('copyPluginParams', copyPluginParams);
+  webpackBuildConfig
+    .plugin('copy-webpack-plugin')
+    .use(require('copy-webpack-plugin'), [{
+      patterns: copyPluginParams,
+    }])
+    .end();
+
+  return webpackBuildConfig;
+};

package/src/webpack/buildServer.js

@@ -0,0 +1,34 @@
+const webpack = require('webpack');
+const webBuildConfig = require('./build');
+const { createTask } = require('../utils/widgets');
+const { fail } = require('../utils/log');
+
+function compilerRun(compiler) {
+  return new Promise((resolve) => {
+    compiler.run((err, stats) => {
+      resolve({ err, stats });
+    });
+  });
+}
+
+module.exports = async (...args) => {
+  const config = webBuildConfig(...args);
+  const compiler = webpack(config.toConfig());
+
+  const { err, stats } = await createTask(compilerRun, '开始webpack打包编译', 'webpack打包编译完成')(compiler);;
+
+  if (err) {
+    fail(err);
+    console.log('详细的错误信息:', err);
+  }
+
+  if (stats.hasErrors() || stats.hasWarnings()) {
+    console.log(stats.toString({
+      // 增加控制台颜色开关
+      colors: true,
+      errorDetails: true,
+    }));
+  };
+
+  return compiler;
+};

package/src/webpack/dev.js

@@ -0,0 +1,31 @@
+const webpackConfig = require('./base');
+const { DEFAULT_COPY_CONFIG } = require('../config/constant');
+const { getCopyPlugin } = require('./utils');
+
+module.exports = (...args) => {
+  const [tmsConfig, modules] = args;
+  const webpackDevConfig = webpackConfig(...args);
+
+  webpackDevConfig.devtool('source-map');
+
+  webpackDevConfig.mode('development');
+
+  const copyPluginParams = getCopyPlugin(DEFAULT_COPY_CONFIG, modules, tmsConfig, 'dev');
+  // console.log('copyPluginParams', copyPluginParams);
+  webpackDevConfig
+    .plugin('copy-webpack-plugin')
+    .use(require('copy-webpack-plugin'), [{
+      patterns: copyPluginParams,
+    }])
+    .end();
+
+  webpackDevConfig
+    .plugin('ExtractPlugin')
+    .use(require('./plugins/entryExtractPlugin'), [{
+      tmsConfig,
+      modules,
+    }])
+    .end();
+
+  return webpackDevConfig;
+};

package/src/webpack/devServer.js

@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const webDevConfig = require('./dev');
+const { setupDevWebPackHooks } = require('./utils');
+const { fail } = require('../utils/log');
+
+module.exports = (...args) => {
+  const config = webDevConfig(...args);
+  const compiler = webpack(config.toConfig());
+
+  setupDevWebPackHooks({
+    compiler,
+  }, () => {
+    // TODO 判断open参数，打开微信开发者工具
+    // openDevtool(api.resolve(config.outputDir || 'dist'))
+  });
+
+  compiler.watch(
+    {
+      aggregateTimeout: 1000,
+      poll: undefined,
+    },
+    (err, stats) => {
+      if (err) {
+        fail(err);
+        console.log('详细的错误信息:', err);
+      }
+      if (stats.hasErrors() || stats.hasWarnings()) {
+        console.log(stats.toString({
+          // 增加控制台颜色开关
+          colors: true,
+        }));
+      };
+    },
+  );
+
+  return compiler;
+};

package/src/webpack/plugins/entryExtractPlugin/index.js

@@ -0,0 +1,29 @@
+const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+const { DEFAULT_WEBPACK_ENTRY, DEFAULT_MODULE_DIR } = require('../../../config/constant');
+const { getEntry } = require('../../utils');
+
+class EntryExtraPlugin {
+  constructor(options = {}) {
+    this.options = options;
+    this.scriptExtensions = options.scriptExtensions || ['.ts', '.js'];
+  }
+
+  applyEntry(compiler, entry) {
+    const { context } = compiler.options;
+
+    Object.keys(entry).forEach((key) => {
+      new SingleEntryPlugin(context, entry[key], key).apply(compiler);
+    });
+  }
+
+  apply(compiler) {
+    const { tmsConfig = {}, modules = [] } = this.options;
+
+    compiler.hooks.watchRun.tap('EntryExtraPlugin', () => {
+      const entry = getEntry(DEFAULT_WEBPACK_ENTRY, modules, tmsConfig, DEFAULT_MODULE_DIR);
+      this.applyEntry(compiler, entry);
+    });
+  }
+}
+
+module.exports = EntryExtraPlugin;

package/src/webpack/plugins/px2rpx/index.js

@@ -0,0 +1,14 @@
+const px2rpx = postcss.plugin('postcss-px2rpx', (opts = {}) => {
+  const { proportion = 1, minPixelValue = 0 } = opts;
+
+  return (root) => {
+    root.replaceValues(pxRegExp, { fast: 'px' }, (string) => {
+      const pixels = parseInt(string, 10);
+      if (pixels < minPixelValue) return `${pixels}px`;
+      return `${proportion * parseInt(string, 10)}rpx`;
+    });
+  };
+});
+
+
+export default px2rpx;