feat: the production environment can be dynamically configured

build/script/build.ts

@@ -0,0 +1,28 @@
+// #!/usr/bin/env node
+
+import { sh } from 'tasksfile';
+import { argv } from 'yargs';
+import { runBuildConfig } from './buildConf';
+import { runUpdateHtml } from './updateHtml';
+import { errorConsole, successConsole } from '../utils';
+
+export const runBuild = async () => {
+  try {
+    const argvList = argv._;
+    let cmd = `cross-env NODE_ENV=production vite build`;
+    await sh(cmd, {
+      async: true,
+      nopipe: true,
+    });
+
+    // Generate configuration file
+    if (!argvList.includes('no-conf')) {
+      await runBuildConfig();
+    }
+    await runUpdateHtml();
+    successConsole('Vite Build successfully!');
+  } catch (error) {
+    errorConsole('Vite Build Error\n' + error);
+    process.exit(1);
+  }
+};

build/script/buildConf.ts

@@ -0,0 +1,44 @@
+import { GLOB_CONFIG_FILE_NAME } from '../constant';
+import fs, { writeFileSync } from 'fs-extra';
+
+import viteConfig from '../../vite.config';
+import { errorConsole, successConsole, getCwdPath, getEnvConfig } from '../utils';
+
+const getShortName = (env: any) => {
+  return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
+    .toUpperCase()
+    .replace(/\s/g, '');
+};
+
+function createConfig(
+  {
+    configName,
+    config,
+    configFileName = GLOB_CONFIG_FILE_NAME,
+  }: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} }
+) {
+  try {
+    const windowConf = `window.${configName}`;
+    const outDir = viteConfig.outDir || 'dist';
+    const configStr = `${windowConf}=${JSON.stringify(config)};
+
+      Object.freeze(${windowConf});
+      Object.defineProperty(window, "${configName}", {
+        configurable: false,
+        writable: false,
+      });
+    `;
+    fs.mkdirp(getCwdPath(outDir));
+    writeFileSync(getCwdPath(`${outDir}/${configFileName}`), configStr);
+
+    successConsole('The configuration file is build successfully！');
+  } catch (error) {
+    errorConsole('Configuration file configuration file failed to package\n' + error);
+  }
+}
+
+export function runBuildConfig() {
+  const config = getEnvConfig();
+  const configFileName = getShortName(config);
+  createConfig({ config, configName: configFileName });
+}

build/script/changelog.ts

@@ -1,14 +1,11 @@
 // #!/usr/bin/env node
 
 import { sh } from 'tasksfile';
-import chalk from 'chalk';
+import { errorConsole, successConsole } from '../utils';
 
-const createChangeLog = async () => {
+export const runChangeLog = async () => {
   try {
     let cmd = `conventional-changelog -p custom-config -i CHANGELOG.md -s -r 0 `;
-    // if (shell.which('git')) {
-    //   cmd += '&& git add CHANGELOG.md';
-    // }
     await sh(cmd, {
       async: true,
       nopipe: true,
@@ -18,21 +15,10 @@ const createChangeLog = async () => {
       async: true,
       nopipe: true,
     });
-    console.log(
-      chalk.blue.bold('****************  ') +
-        chalk.green.bold('CHANGE_LOG generated successfully！') +
-        chalk.blue.bold('  ****************')
-    );
+    successConsole('CHANGE_LOG.md generated successfully！');
   } catch (error) {
-    console.log(
-      chalk.blue.red('****************  ') +
-        chalk.green.red('CHANGE_LOG generated error\n' + error) +
-        chalk.blue.red('  ****************')
-    );
+    errorConsole('CHANGE_LOG.md generated error\n' + error);
+
     process.exit(1);
   }
 };
-createChangeLog();
-module.exports = {
-  createChangeLog,
-};

build/script/cli.ts

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import { argv } from 'yargs';
+
+import { runChangeLog } from './changelog';
+import { runPostInstall } from './postinstall';
+import { runPreview } from './preview';
+import { runPreserve } from './preserve';
+import { runBuild } from './build';
+
+const task = (argv._ || [])[0];
+
+console.log('Run Task: ' + chalk.cyan(task));
+
+switch (task) {
+  // change log
+  case 'log':
+    runChangeLog();
+    break;
+
+  case 'build':
+    runBuild();
+    break;
+
+  case 'preserve':
+    runPreserve();
+    break;
+
+  case 'postinstall':
+    runPostInstall();
+    break;
+
+  case 'preview':
+    runPreview();
+    break;
+
+  // TODO
+  case 'gzip':
+    break;
+  default:
+    break;
+}
+
+export default {};

build/script/hm.ts

@@ -0,0 +1,12 @@
+// 百度统计代码 用于站点部署
+// 只在build:site开启
+export const hmScript = `<script>
+var _hmt = _hmt || [];
+(function() {
+  var hm = document.createElement("script");
+  hm.src = "https://hm.baidu.com/hm.js?384d6046e02f6ac4ea075357bd0e9b43";
+  var s = document.getElementsByTagName("script")[0];
+  s.parentNode.insertBefore(hm, s);
+})();
+</script>
+`;

build/script/postinstall.ts

@@ -2,9 +2,14 @@ import { exec, which } from 'shelljs';
 
 function ignoreCaseGit() {
   try {
-    if (which('git')) {
+    if (which('git').code === 0) {
       exec('git config core.ignorecase false ');
     }
-  } catch (error) {}
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+export function runPostInstall() {
+  ignoreCaseGit();
 }
-ignoreCaseGit();

build/script/preserve.ts

@@ -1,53 +1,57 @@
-// 是否需要更新依赖，防止package.json更新了依赖，其他人获取代码后没有install
+// Do you need to update the dependencies to prevent package.json from updating the dependencies, and no install after others get the code
 
 import path from 'path';
 import fs from 'fs-extra';
 import { isEqual } from 'lodash';
-import chalk from 'chalk';
 import { sh } from 'tasksfile';
+import { successConsole, errorConsole } from '../utils';
 
 const resolve = (dir: string) => {
   return path.resolve(process.cwd(), dir);
 };
 
+const reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
+
 let NEED_INSTALL = false;
 
-fs.mkdirp(resolve('build/.cache'));
-function checkPkgUpdate() {
-  const pkg = require('../../package.json');
-  const { dependencies, devDependencies } = pkg;
-  const depsFile = resolve('build/.cache/deps.json');
-  if (!fs.pathExistsSync(depsFile)) {
-    NEED_INSTALL = true;
-    return;
+export async function runPreserve() {
+  const cwdPath = process.cwd();
+  if (reg.test(cwdPath)) {
+    errorConsole(
+      'Do not include Chinese, Japanese or Korean in the full path of the project directory, please modify the directory name and run again!'
+    );
+    errorConsole('项目目录全路径请勿包含中文、日文、韩文,请修改目录名后再次重新运行!');
+    process.exit(1);
   }
-  const depsJson = require('../.cache/deps.json');
 
-  if (!isEqual(depsJson, { dependencies, devDependencies })) {
-    NEED_INSTALL = true;
+  fs.mkdirp(resolve('build/.cache'));
+  function checkPkgUpdate() {
+    const pkg = require('../../package.json');
+    const { dependencies, devDependencies } = pkg;
+    const depsFile = resolve('build/.cache/deps.json');
+    if (!fs.pathExistsSync(depsFile)) {
+      NEED_INSTALL = true;
+      return;
+    }
+    const depsJson = require('../.cache/deps.json');
+
+    if (!isEqual(depsJson, { dependencies, devDependencies })) {
+      NEED_INSTALL = true;
+    }
   }
-}
-checkPkgUpdate();
-
-(async () => {
+  checkPkgUpdate();
   if (NEED_INSTALL) {
-    console.log(
-      chalk.blue.bold('****************  ') +
-        chalk.red.bold('检测到依赖变化，正在安装依赖(Tip: 项目首次运行也会执行)！') +
-        chalk.blue.bold('  ****************')
+    // no error
+    successConsole(
+      'A dependency change is detected, and the dependency is being installed to ensure that the dependency is consistent! (Tip: The project will be executed for the first time)！'
     );
     try {
-      // 从代码执行貌似不会自动读取.npmrc 所以手动加上源地址
-      // await run('yarn install --registry=https://registry.npm.taobao.org ', {
-      await sh('yarn install ', {
+      await sh('npm run bootstrap ', {
         async: true,
         nopipe: true,
       });
-      console.log(
-        chalk.blue.bold('****************  ') +
-          chalk.green.bold('依赖安装成功,正在运行！') +
-          chalk.blue.bold('  ****************')
-      );
+
+      successConsole('Dependency installation is successful, start running the project！');
 
       const pkg = require('../../package.json');
       const { dependencies, devDependencies } = pkg;
@@ -64,4 +68,4 @@ checkPkgUpdate();
       }
     } catch (error) {}
   }
-})();
+}

build/script/preview.ts

@@ -11,7 +11,7 @@ import { getIPAddress } from '../utils';
 const BUILD = 1;
 const NO_BUILD = 2;
 
-// 启动服务器
+// start server
 const startApp = () => {
   const port = 9680;
   portfinder.basePort = port;
@@ -23,7 +23,6 @@ const startApp = () => {
     if (err) {
       throw err;
     } else {
-      // const publicPath = process.env.BASE_URL;
       app.listen(port, function () {
         const empty = '    ';
         const common = `The preview program is already running:
@@ -36,7 +35,7 @@ const startApp = () => {
   });
 };
 
-const preview = async () => {
+export const runPreview = async () => {
   const prompt = inquirer.prompt({
     type: 'list',
     message: 'Please select a preview method',
@@ -61,7 +60,3 @@ const preview = async () => {
   }
   startApp();
 };
-
-(() => {
-  preview();
-})();

build/script/updateHtml.ts

@@ -0,0 +1,98 @@
+import { readFileSync, writeFileSync, existsSync } from 'fs-extra';
+import viteConfig, { htmlConfig } from '../../vite.config';
+import { getCwdPath, successConsole, errorConsole } from '../utils';
+import { GLOB_CONFIG_FILE_NAME } from '../constant';
+import { hmScript } from './hm';
+const pkg = require('../../package.json');
+
+const { title, addHm, cdnConf, useCdn } = htmlConfig;
+
+function injectTitle(html: string, htmlTitle: string) {
+  if (/<\/title>/.test(html)) {
+    return html.replace(/<\/title>/, `${htmlTitle}</title>`);
+  }
+  return html;
+}
+
+function injectConfigScript(html: string) {
+  const tag = `\t\t<script  src='${viteConfig.base || './'}${GLOB_CONFIG_FILE_NAME}?v=${
+    pkg.version
+  }-${new Date().getTime()}'></script>`;
+
+  if (/<\/head>/.test(html)) {
+    return html.replace(/<\/head>/, `${tag}\n\t\t</head>`);
+  }
+  return html;
+}
+
+function injectHmScript(html: string) {
+  if (/<head>/.test(html)) {
+    return html.replace(/<head>/, `<head>\n${hmScript}`);
+  }
+  return html;
+}
+
+function injectCdnCss(html: string) {
+  if (!cdnConf) return html;
+  const { css } = cdnConf;
+  if (!css || css.length === 0) return html;
+
+  let cdnCssTag = '';
+  for (const cssLink of css) {
+    cdnCssTag += `<link rel="stylesheet" href="${cssLink}">`;
+  }
+  if (/<\/head>/.test(html)) {
+    return html.replace(/<\/head>/, `${cdnCssTag}\n\t\t</head>`);
+  }
+  return html;
+}
+
+function injectCdnjs(html: string) {
+  if (!cdnConf) return html;
+  const { js } = cdnConf;
+  if (!js || js.length === 0) return html;
+
+  let cdnJsTag = '';
+  for (const src of js) {
+    // TODO
+    // <script type="importmap">
+    // { "imports": {
+    //   "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.esm-browser.js",
+    //   "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.13/vue-router.esm.js",
+    //   "vuex":       "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
+    // } }
+    // </script>
+    cdnJsTag += `\t<script type="text/javascript" src="${src}"></script>\n`;
+  }
+  if (/<\/body>/.test(html)) {
+    return html.replace(/<\/body>/, `${cdnJsTag}\n</body>`);
+  }
+  return html;
+}
+
+export async function runUpdateHtml() {
+  const outDir = viteConfig.outDir || 'dist';
+  const indexPath = getCwdPath(outDir, 'index.html');
+  if (!existsSync(`${indexPath}`)) {
+    return;
+  }
+  try {
+    let processedHtml = '';
+    const rawHtml = readFileSync(indexPath, 'utf-8');
+    processedHtml = rawHtml;
+    processedHtml = injectTitle(processedHtml, title);
+    processedHtml = injectConfigScript(processedHtml);
+    if (addHm) {
+      processedHtml = injectHmScript(processedHtml);
+    }
+    if (useCdn) {
+      processedHtml = injectCdnCss(processedHtml);
+      processedHtml = injectCdnjs(processedHtml);
+    }
+
+    writeFileSync(indexPath, processedHtml);
+    successConsole('Update Html Successfully!');
+  } catch (error) {
+    errorConsole('Update Html Error\n' + error);
+  }
+}