@tmsfe/tmskit 0.0.5-beta.3 → 0.0.5-beta.4

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.gulp.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.gulp.dependencies).forEach((includeName) => {
+              if (attributes.src.indexOf(includeName) > -1) {
+                const includePath = tmsConfig.gulp.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.gulp.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),
+                    });
+                  }
+                }
+              }
+            });
+          }
+        },
+      });
+      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 = new Buffer(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 new Buffer(bitmap).toString('base64');
+    }
+  };
+});

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/utils/buildAppJson.js

@@ -1,5 +1,5 @@
 const fs = require('fs');
-const { DEFAULT_MODULE_DIR, MODULE_CONFIG_FILENAME } = require('../config/constant');
+const { DEFAULT_MODULE_DIR, MODULE_CONFIG_FILENAME, MODULE_CONFIG_INVALID_KEY } = require('../config/constant');
 const { fail } = require('./log');
 const { resolve, isObject, isArray } = require('./widgets');
 
@@ -98,7 +98,7 @@ const getAppJsonContent = (sourceAppJsonPath) => {
   // 加入默认值
   appJson.subpackages = [];
   appJson.pages = [];
-  appJson.plugins = {};
+  // appJson.plugins = {};
   delete appJson.entranceDeclare;
   return appJson;
 };
@@ -116,6 +116,60 @@ const updateSubpackages = (appJson, modulesConfig) => {
   }
 };
 
+/**
+ * 处理合并subpackages后的appjson, 整理重复不合法的地方
+ * @param {Object} appJson appjson
+ */
+const processAppJson = (appJson) => {
+  const { subpackages } = appJson;
+  const pluginsMap = {};
+  Object.keys(appJson.plugins || {}).forEach(key => pluginsMap[key] = ['app.json']);
+  const subps = subpackages.map((subp) => {
+    const invalidKeys = [];
+    Object.keys(subp).forEach((key) => {
+      if (key === 'plugins') {
+        Object.keys(subp.plugins).forEach((pk) => {
+          pluginsMap[pk] ? pluginsMap[pk].push(`分包${subp.name}`) : pluginsMap[pk] = [`分包${subp.name}`];
+        });
+        return;
+      }
+      if (MODULE_CONFIG_INVALID_KEY.indexOf(key) > -1) {
+        // 如果分包配置中有不支持的key，则错误提醒
+        invalidKeys.push(key);
+        return;
+      }
+      if (['requiredBackgroundModes', 'embeddedAppIdList'].indexOf(key) > -1) {
+        // 提到appjson最上层处理
+        const preVal = appJson[key];
+        // eslint-disable-next-line
+        preVal ? appJson[key] = Array.from(new Set(preVal
+          // eslint-disable-next-line
+          .slice(0).concat(subp[key]))) : appJson[key] = subp[key].slice(0);
+        return;
+      }
+    });
+    if (invalidKeys.length) {
+      fail(`不支持分包${subp?.name}配置${invalidKeys.join(',')}\n`);
+    }
+    // eslint-disable-next-line
+    invalidKeys.concat(['requiredBackgroundModes', 'embeddedAppIdList']).forEach(k => delete subp[k]);
+    return subp;
+  });
+  // 如果plugins重复，则错误提示
+  const pluginsErrMsg = Object.keys(pluginsMap).map((pk) => {
+    if (pluginsMap[pk].length > 1) {
+      return `${pluginsMap[pk].join(',')}重复配置plugin(${pk});`;
+    }
+    return '';
+  })
+    .reduce((pre, cur) => pre + cur, '');
+  if (pluginsErrMsg) {
+    fail(pluginsErrMsg);
+  }
+  // eslint-disable-next-line
+  appJson.subpackages = subps;
+};
+
 
 /**
  * 动态生成编译后的app.json
@@ -130,6 +184,8 @@ function buildOutputAppJson(tmsConfig, modules) {
   const appJson = getAppJsonContent(resolve('./app.json'));
   // 更新app.json中的subpackages
   updateSubpackages(appJson, modulesConfig);
+  // 处理appJson中重复||冲突的地方
+  processAppJson(appJson);
   // 更新主包，需在subpackages处理完成后执行， pages/
   updateMainPackages(appJson, tmsConfig.mainPackages, DEFAULT_MODULE_DIR);
 

package/src/utils/findCssImport.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-param-reassign */
+const strip = require('strip-comments');
+// 匹配规则
+const MATCH_RULE = new RegExp(/@import *(?:url\(['"]?([^'")]+)['"]?\)|['"]([^'"]+)['"]);?/g);
+
+/**
+ * 获取样式文件中的@import语句
+ * @param code 代码片段
+ * @returns 结果数组
+ */
+const findCssImports = (code) => {
+  // 将buffer转成字符串
+  code = code.toString();
+  // 去除注释
+  code = strip.block(code);
+  // 定义最后返回的结果
+  const result = [];
+  let matchList;
+  // 循环遍历代码段，直至匹配结果为空
+  while ((matchList = MATCH_RULE.exec(code))) {
+    // 存入结果数组
+    result.push(matchList?.[1] || matchList?.[2]);
+  }
+  // 返回结果
+  return result;
+};
+
+module.exports = {
+  findCssImports,
+};

package/src/utils/io.js

@@ -6,6 +6,17 @@ const path = require('path');
  * @returns
  */
 const isDirEmpty = dirname => fs.promises.readdir(dirname).then(files => files.length === 0);
+
+// 判断是否是文件
+const isFile = (pathName) => {
+  try {
+    const stat = fs.lstatSync(pathName);
+    return stat.isFile();
+  } catch {
+    return false;
+  }
+};
+
 /**
  * 确保目录存在，不存在就创建一个
  * @param {*} dirname 目录名
@@ -26,13 +37,31 @@ const copyFile = function (src, dest) {
   fs.copyFileSync(src, dest);
 };
 
+// 判断文件内容是否一致，不一致再进行拷贝
+function diffContentCopyFile(originFile, destFile) {
+  if (fs.existsSync(destFile)) {
+    const depDestContent = fs.readFileSync(destFile, 'utf8');
+    const depOriginContent = fs.readFileSync(originFile, 'utf8');
+    if (depDestContent !== depOriginContent) {
+      console.log(`拷贝${originFile}内容到${destFile}`);
+      copyFile(originFile, destFile);
+    }
+  } else {
+    console.log(`拷贝${originFile}内容到${destFile}`);
+    copyFile(originFile, destFile);
+  }
+}
+
 // 添加后缀
 function ext(filePath, extensions) {
   let newFilePath = filePath;
+  let extPath = '';
+  // try catch需要包裹：用来处理'./lib/timer'没有后缀的情况
   try {
     const stat = fs.lstatSync(newFilePath);
     if (stat.isDirectory()) {
-      newFilePath += (newFilePath[newFilePath.length - 1] === '/') ? 'index' : '/index';
+      extPath = newFilePath[newFilePath.length - 1] === '/' ? 'index' : '/index';
+      newFilePath += extPath;
     }
   } catch (e) {}
 
@@ -40,16 +69,24 @@ function ext(filePath, extensions) {
     const file = newFilePath.endsWith(ext) ? newFilePath : newFilePath + ext;
     if (fs.existsSync(file)) {
       return {
-        file,
         ext,
+        extPath: extPath + ext,
+        file,
       };
     }
   }
-  return null;
+  return {
+    ext: '',
+    extPath,
+    file: filePath,
+  };
 }
 
 // 判断文件是否在某个目录
 const fileInDir = (dir, file) => {
+  if (!fs.existsSync(dir) || !fs.existsSync(file)) {
+    return false;
+  }
   const relativePath = path.relative(dir, file);
   if (relativePath.startsWith('..')) {
     return false;
@@ -57,10 +94,13 @@ const fileInDir = (dir, file) => {
   return true;
 };
 
+
 module.exports = {
   isDirEmpty,
   copyFile,
+  diffContentCopyFile,
   ensureDirExist,
   ext,
   fileInDir,
+  isFile,
 };

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;
+};