@tmsfe/tmskit 0.0.1 → 0.0.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmsfe/tmskit",
-  "version": "0.0.1",
+  "version": "0.0.5-beta.0",
   "description": "tmskit",
   "main": "main.js",
   "bin": {
@@ -18,50 +18,39 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
     "@rollup/plugin-babel": "^5.0.2",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-dynamic-import-vars": "^1.1.1",
     "@rollup/plugin-json": "^4.0.3",
-    "async": "^3.2.2",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^8.2.3",
-    "copy-webpack-plugin": "^9.1.0",
-    "cross-env": "^7.0.3",
-    "leven": "3.1.0",
-    "metalsmith": "^2.3.0",
-    "minimist": "^1.2.5",
     "rollup": "^2.6.1",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^6.1.0",
-    "rollup-plugin-typescript2": "0.27.0",
-    "ts-loader": "^9.2.6",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.64.0",
-    "webpack-cli": "^4.9.1"
+    "rollup-plugin-typescript2": "0.27.0"
   },
   "dependencies": {
-    "axios": "^0.21.4",
+    "async": "^3.2.2",
     "chalk": "^4.1.0",
-    "commander": "^6.2.1",
+    "commander": "^8.3.0",
+    "copy-webpack-plugin": "^9.1.0",
     "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-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",
-    "mini-css-extract-plugin": "^2.4.5",
+    "metalsmith": "^2.3.0",
     "miniprogram-ci": "1.4.13",
     "ora": "^5.1.0",
+    "precinct": "^8.3.1",
     "replace-ext": "^2.0.0",
-    "rollup-plugin-replace": "^2.2.0",
     "shelljs": "^0.8.4",
-    "tslib": "^1.14.1",
-    "typescript": "^3.8.3",
-    "username": "5.1.0",
-    "webpack-chain": "^6.5.1"
+    "through2": "^4.0.2"
   },
   "engines": {
     "node": "^12.17.0 || >= 14.0.0"

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 = {
@@ -48,6 +48,8 @@ const ENV = {
   prod: 'production',
 };
 
+const  TEMPLATE_TKIT_DIR = '_tmskit';
+
 export {
   HOME_DIR,
   CACHE_DIR,
@@ -62,4 +64,5 @@ export {
   MODULE_CODE_DIR,
   MODE,
   ENV,
+  TEMPLATE_TKIT_DIR,
 };

package/src/config/defaultTmsConfig.js

@@ -4,14 +4,13 @@ module.exports = {
   envData: {},
   // 模块配置信息
   modules: [],
-  webpack: {
+  cloudDir: 'cloud',
+  gulp: {
     /** 编译输出文件夹位置 */
     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,78 @@
+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)));
+
+    // 监听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));
+    }
+  }
+};

package/src/gulp/dev.js

@@ -0,0 +1,94 @@
+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');
+
+module.exports = async (tmsConfig, newModules) => {
+  // 监听app.json
+  watch(resolve('app.json'), { ignoreInitial: false, events: ['add', 'change'] }, () => {
+    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)));
+    }
+  });
+  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'] }, () => {
+      buildOutputAppJson(tmsConfig, newModules);
+    });
+  }
+  // 监听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));
+    }
+  }
+};

package/src/gulp/replaceEnv.js

@@ -0,0 +1,28 @@
+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;

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,24 +7,40 @@ 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);
+
+      cmd.options?.forEach(opt => command.option(...opt));
+
+      command.action(cmd.action);
+    }
+  });
+}
+
+registerCommand(program, commands);
 
-  command.action(cmd.action);
-});
 
 program.on('--help', () => {
   log();
-  log(`  Run ${chalk.cyan('tms <command> --help')} for detailed usage of given command.`);
+  log(`  Run ${chalk.cyan(`${TMS_NAME}  <command> --help`)} for detailed usage of given command.`);
   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/create/ask.js

@@ -1,17 +1,19 @@
 const fs = require('fs');
 const inquirer = require('inquirer');
+const { resolve } = require('../../utils/widgets');
+const { TEMPLATE_TKIT_DIR } = require('../../config/constant');
 /**
  * 获取模板内的问题
- * @param {string} templateDir 模板目录
+ * @param {string} dir questions.json所在的目录
  * @returns {Array} inquirer 问题数组
  */
-const parseTemplateQuestions = (templateDir) => {
+const parseTemplateQuestions = (dir) => {
   let prompts = [];
-  if (!fs.existsSync(`${templateDir}/questions.json`)) {
+  if (!fs.existsSync(`${dir}/questions.json`)) {
     return prompts;
   }
   try {
-    const json = JSON.parse(fs.readFileSync(`${templateDir}/questions.json`));
+    const json = JSON.parse(fs.readFileSync(`${dir}/questions.json`));
     if (Array.isArray(json) && json.length > 0) {
       json.forEach((item, index) => {
         if (!isQuestionType(item)) {
@@ -38,7 +40,7 @@ const isQuestionType = (result) => {
 };
 
 const ask = templateDir => (files, metalsmith, next) => {
-  const prompts = parseTemplateQuestions(templateDir);
+  const prompts = parseTemplateQuestions(resolve(templateDir, TEMPLATE_TKIT_DIR));
   const metadata = metalsmith.metadata();
   const filteredPrompts = prompts.filter((prompt) => {
     if (metadata[prompt.name] && `${metadata[prompt.name]}`.trim() !== '') {

package/src/scripts/create/generator.js

@@ -1,5 +1,4 @@
 const Metalsmith = require('metalsmith');
-const fs = require('fs');
 const render = require('./render');
 const ask = require('./ask');
 const FILES_TO_IGNORE = require('./ignoreFiles');
@@ -18,7 +17,6 @@ const generator = (buildDir, distDir, preMetadata) => new Promise((resolve, reje
       if (err) {
         reject(err);
       } else {
-        fs.unlinkSync(`${distDir}/questions.json`);
         resolve('finish');
       }
     });

package/src/scripts/create/index.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const fs = require('fs');
 const shelljs = require('shelljs');
-const { TEMPLATE_DIR, TEMPLATE_PATH } = require('../../config/constant.js');
+const { TEMPLATE_DIR, TEMPLATE_PATH, TEMPLATE_TKIT_DIR } = require('../../config/constant.js');
 const { downloadRepoForGit, createTask, resolve } = require('../../utils/widgets');
 const io = require('../../utils/io');
 const { fail, succeed } = require('../../utils/log');
@@ -33,7 +33,7 @@ async function create(appName) {
   const cwd = process.cwd();
   const targetDir = path.resolve(cwd, appName);
   const appType = 'mp';
-  createAppDir(targetDir);
+  await createAppDir(targetDir);
 
   // 创建缓存目录
   io.ensureDirExist(TEMPLATE_DIR);
@@ -49,12 +49,19 @@ async function create(appName) {
     appName,
     appType,
   }).then(() => {
-    succeed('项目创建完成，开始初始化...');
     shelljs.cd(appName);
-    // 初始化构件主包的代码， 让用户打开项目可以跑起来
-    if (fs.existsSync(resolve(`${appName}/tms.config.js`))) {
-      shelljs.exec('tmskit run build');
+    const hooks = require(resolve(appName, TEMPLATE_TKIT_DIR, 'hooks.js'));
+    if (hooks.afterCreate) {
+      hooks.afterCreate.forEach((item) => {
+        if (typeof item === 'function') {
+          item.call(null, shelljs, { appName });
+        } else {
+          shelljs.exec(item);
+        }
+      });
     }
+    shelljs.rm('-rf', resolve(appName, TEMPLATE_TKIT_DIR));
+    succeed('项目创建完成.');
   })
     .catch((err) => {
       fail(err.message);

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

@@ -1,15 +1,15 @@
 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.gulp.outputDir));
 
   const { targetModules: newModules } = await init(tmsConfig, targetModules);
 
-  webpackBuildServer(tmsConfig, newModules, env);
+  gulpBuild(tmsConfig, newModules, env);
 }
 
 module.exports = build;

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

@@ -1,4 +1,4 @@
-const webpackServer = require('../../../webpack/devServer');
+const gulpDev = require('../../../gulp/dev');
 const fs = require('fs');
 const { resolve } = require('../../../utils/widgets');
 const init = require('../init/index');
@@ -45,7 +45,7 @@ function isInit(tmsConfig, targetModules, contextDir) {
   }
 
   //  判断package.json的版本是否有新的版本
-  return checkDependencies(targetModules, resolve('./'), tmsConfig.webpack.outputDir);
+  return checkDependencies(targetModules, resolve('./'), tmsConfig.gulp.outputDir);
 }
 
 async function dev(tmsConfig, targetModules, env) {
@@ -60,7 +60,7 @@ async function dev(tmsConfig, targetModules, env) {
   }
 
   console.log('当前dev启动的有效模块', newModules.map(item => item.name));
-  webpackServer(tmsConfig, newModules, env);
+  gulpDev(tmsConfig, newModules, env);
 }
 
 module.exports = dev;

package/src/scripts/run/index.js

@@ -1,7 +1,8 @@
 const init = require('./init/index');
 const dev = require('./dev/index');
 const build = require('./build/index');
-const { createTask  } = require('../../utils/widgets');
+const install = require('./install/index');
+const { createTask } = require('../../utils/widgets');
 const { MODE } = require('../../config/constant');
 const { readTmsConfig, checkModules } = require('../../utils/tkitUtils');
 
@@ -11,10 +12,12 @@ const handleModulesArg = (cmd) => {
     return MODE.main;
   }
   // 单模块 或 多模块开发
+  const { argv } = process;
+  const reset = argv.indexOf('-m') > -1 ? argv.slice(argv.indexOf('-m') + 1) : [];
   if (cmd.module) {
     return [
       cmd.module,
-      ...cmd.args,
+      ...reset,
     ];
   }
   // 全量模块
@@ -46,6 +49,9 @@ async function run(commandName, cmd) {
     case 'dev':
       dev(tmsConfig, modules, env);
       return;
+    case 'install':
+      install(tmsConfig, modules, env);
+      return;
     case 'build':
       build(tmsConfig, modules, env);
       return;