add

08335 / hivui-platform-template

hivui平台项目模板

Browse code add master
1 parent ca940fa commit 2e9c4621572257b9ea28820a5cda916f84e49679 caibinghong authored on 24 Mar 2022

Showing 3 changed files

Ignore Space Show notes View build/webpack.get-list.js
const path = require("path"); const fs = require("fs"); // const {Chalk} = require('chalk') const merge = require('webpack-merge'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const baseWebpackConfig = require('./webpack.base.conf'); const packageConfig = require('../package.json'); // console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV) // 用来记录当前打包的模块路径列表，判断进程参数 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") let moduleList = require('./webpack.get-module').moduleList \|\| []; if(argvs){ // console.log('指定模块编译：') moduleList=[]; let list = argvs.split(','); for(let i=0,l=list.length;i<l;i++){ let checkPath = fs.existsSync(list[i]+'/package.json'); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) continue; moduleList.push(list[i]); } } let evnConfig = require('./getEnvVar') let webpackList = []; //构建webpack 配置 for (let i = 0, l = moduleList.length; i < l; i++) { let MODULE = moduleList[i]; // console.log(i, MODULE); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; let outputPath = path.resolve(__dirname, '../dist', MODULE) entry[MODULE_NAME] = ['babel-polyfill', `${MODULE}/index.js`];// @babel/polyfill let wpk = merge({ mode: 'production', // mode: 'development', // devtool: 'source-map', }, baseWebpackConfig, { entry: entry, output: { path: outputPath, filename: `static/js/[name].js`, // publicPath:'./' // publicPath: `/${evnConfig.VITE_APP_SERVER.replace(/"/gi,"")}/render/${packageConfig.author}/${MODULE.replace('./', '')}/` publicPath: `${evnConfig.VITE_APP_USERPATH.replace(/"/gi,"")}/${MODULE.replace('./', '')}/` } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, './template.html') } wpk.plugins.push(new CleanWebpackPlugin([outputPath], { root: path.resolve(__dirname, '../'), //根目录 //其他配置按需求添加 verbose: false,//不提示删除 })); wpk.plugins.push( new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css', chunkFilename: `static/css/[name].[contenthash].css` }) ); wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27 const path = require("path"); const fs = require("fs"); // const {Chalk} = require('chalk') const merge = require('webpack-merge'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const baseWebpackConfig = require('./webpack.base.conf'); const packageConfig = require('../package.json'); // console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV) // 用来记录当前打包的模块路径列表，判断进程参数 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") let moduleList = require('./webpack.get-module').moduleList \|\| []; if(argvs){ // console.log('指定模块编译：') moduleList = argvs.split(',') } let evnConfig = require('./getEnvVar') let webpackList = []; //构建webpack 配置 for (let i = 0, l = moduleList.length; i < l; i++) { let MODULE = moduleList[i]; // console.log(i, MODULE); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; let outputPath = path.resolve(__dirname, '../dist', MODULE) entry[MODULE_NAME] = ['babel-polyfill', `${MODULE}/index.js`];// @babel/polyfill let wpk = merge({ mode: 'production', // mode: 'development', // devtool: 'source-map', }, baseWebpackConfig, { entry: entry, output: { path: outputPath, filename: `static/js/[name].js`, // publicPath:'./' // publicPath: `/${evnConfig.VITE_APP_SERVER.replace(/"/gi,"")}/render/${packageConfig.author}/${MODULE.replace('./', '')}/` publicPath: `${evnConfig.VITE_APP_USERPATH.replace(/"/gi,"")}/${MODULE.replace('./', '')}/` } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, './template.html') } wpk.plugins.push(new CleanWebpackPlugin([outputPath], { root: path.resolve(__dirname, '../'), //根目录 //其他配置按需求添加 verbose: false,//不提示删除 })); wpk.plugins.push( new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css', chunkFilename: `static/css/[name].[contenthash].css` }) ); wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

Ignore Space Show notes View

build/webpack.get-list.js

const path = require("path");
const fs = require("fs");
// const {Chalk} = require('chalk')
const merge = require('webpack-merge');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const baseWebpackConfig = require('./webpack.base.conf');

const packageConfig = require('../package.json');
// console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV)

// 用来记录当前打包的模块路径列表，判断进程参数
let argvs = (process.argv[2] || "").replace(/\s*$/g, "")
let moduleList = require('./webpack.get-module').moduleList || [];
if(argvs){
  // console.log('指定模块编译：')
  moduleList=[];
  let list = argvs.split(',');
  for(let i=0,l=list.length;i<l;i++){
    let checkPath = fs.existsSync(list[i]+'/package.json');
    //如果目录存在 返回 true ，如果目录不存在 返回false
    if (checkPath == false) continue;
    moduleList.push(list[i]);
  }
}

let evnConfig = require('./getEnvVar')

module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

const packageConfig = require('../package.json');
// console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV)

let evnConfig = require('./getEnvVar')

module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

Ignore Space Show notes View build/webpack.get-module.js
// const fs = require("fs"); // var {Chalk} = require('chalk') var glob = require('glob') const packageConfig = require('../package.json') const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; // 获取所有的moduleList var moduleList = [] // console.time() moduleList = glob.sync(`./${projectName}/!(dist\|node_modules\|build)//package.json`);// 这个执行比较快 114.811ms for(let i=0,l=moduleList.length;i<l;i++){ moduleList[i]= moduleList[i].replace(/\/package\.json/gi,'') } exports.moduleList = moduleList const fs = require("fs"); // var {Chalk} = require('chalk') var glob = require('glob') debugger const packageConfig = require('../package.json') const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; // 获取所有的moduleList var moduleList = [] // console.time() moduleList = glob.sync(`./${projectName}/!(dist\|node_modules\|build)//package.json`);// 这个执行比较快 114.811ms for(let i=0,l=moduleList.length;i<l;i++){ moduleList[i]= moduleList[i].replace(/\/package\.json/gi,'') } exports.moduleList = moduleList

Ignore Space Show notes View

build/webpack.get-module.js

Ignore Space Show notes View build/webpack.prod.conf.js
// 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 // const os = require('os'); // const cpus = os.cpus().length; // console.log(cpus, ' Math.floor(cpus/2)\|\|1', Math.floor(cpus / 2) \|\| 1) const chalk = require('chalk') let webpack = require('webpack') let argvs = (process.argv[2] \|\| "").replace(/\s$/g, ""); let moduleList = argvs != "" ? argvs.split(',') : []; let len = moduleList.length; let startTime = new Date().valueOf(); // 秒数转化为时分秒 function formatSeconds(value) { // 秒 let second = parseInt(value) // 分 let minute = 0 // 小时 let hour = 0 // 天 // let day = 0 // 如果秒数大于60，将秒数转换成整数 if (second > 60) { // 获取分钟，除以60取整数，得到整数分钟 minute = parseInt(second / 60) // 获取秒数，秒数取佘，得到整数秒数 second = parseInt(second % 60) // 如果分钟大于60，将分钟转换成小时 if (minute > 60) { // 获取小时，获取分钟除以60，得到整数小时 hour = parseInt(minute / 60) // 获取小时后取佘的分，获取分钟除以60取佘的分 minute = parseInt(minute % 60) // 如果小时大于24，将小时转换成天 // if (hour > 23) { // // 获取天数，获取小时除以24，得到整天数 // day = parseInt(hour / 24) // // 获取天数后取余的小时，获取小时除以24取余的小时 // hour = parseInt(hour % 24) // } } } let result = '' + parseInt(second) + '秒' if (minute > 0) { result = '' + parseInt(minute) + '分' + result } if (hour > 0) { result = '' + parseInt(hour) + '小时' + result } // if (day > 0) { // result = '' + parseInt(day) + '天' + result // } return result } let timerCtl = setInterval(function () { console.log(chalk.green(`正在编译中，目前已消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)} ...`)) }, 1000 60 * 5); //----------- 【一般编译，按参数，一个接一个的】 --------------- function DoWebpackBuild(list, start, total, step = 200) { let wpkCfg, isEndAll = false; if (list == null \|\| list.length == 0) { console.log(chalk.yellow(`没有模块可编译！`)); clearInterval(timerCtl); return; } // wpkCfg = list[start]; wpkCfg = list.slice(start, start + step); if (wpkCfg == null \|\| wpkCfg.length == 0) { isEndAll = true; clearInterval(timerCtl); console.log(chalk.green(`消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)}`)); return; } console.log('**************************************************************\n'); console.log(`【进度 ${start}/${total} 】,正在编译${start} - ${total < step ? total : start + step}之间的模块...\n`); console.log('*************************************************************\n'); let cmper = webpack(wpkCfg); let cmperStep = 5,cmperTotal=5; cmper.apply(new webpack.ProgressPlugin({ handler(percentage, message, ...args) { // console.log(args.length,'...args', args[0],'\n', args[1],'\n', args[2]) let t = (new Date().valueOf() - startTime) / 1000; if(t>cmperTotal \|\| percentage>0.95){ cmperTotal+=cmperStep; console.log(` 进度 : ${(percentage100).toFixed(2)} %`)//,message } }, })); cmper.run((err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 let info = {}; try { info = stats.toJson(); } catch (e) { info = { errors: [] }; console.log('stats.toJson()', err, stats) } // console.error(info.errors); for (let i = 0, l = info.errors.length; i < l; i++) { // console.log(chalk.red(info.errors[i].message)); // console.error(info.errors[i].message) console.error(info.errors[i]) } } // 处理完成 if (isEndAll) { cmperTotal = 10; clearInterval(timerCtl); console.log(chalk.green(`消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)}`)); } else { DoWebpackBuild(list, start + step, total); } }) } if (len == 0) { //-------- 【用parallel-webpack，全部编译情况下】 ------------ /* moduleList = require('./webpack.get-module').moduleList \|\| []; console.log(`=========进入全模块编译状态(${moduleList.length})模块...=============`) var run = require('parallel-webpack').run; run( require.resolve('./webpack.get-list.js'), { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 1,// use 2 workers cup个数 argv: [argvs] }, ()=>{ //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); }); / let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【编译所有共${len}】=====================\n`) DoWebpackBuild(webpackList, 0, len);//, 0, len //以上两种时间上差不多 20s } else { let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【按需编译共${len}】=====================\n`) DoWebpackBuild(webpackList, 0, len)//, 0, len } // 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 // const os = require('os'); // const cpus = os.cpus().length; // console.log(cpus, ' Math.floor(cpus/2)\|\|1', Math.floor(cpus / 2) \|\| 1) const chalk = require('chalk') let webpack = require('webpack') let argvs = (process.argv[2] \|\| "").replace(/\s$/g, ""); let moduleList = argvs != "" ? argvs.split(',') : []; let len = moduleList.length; let startTime = new Date().valueOf(); // 秒数转化为时分秒 function formatSeconds(value) { // 秒 let second = parseInt(value) // 分 let minute = 0 // 小时 let hour = 0 // 天 // let day = 0 // 如果秒数大于60，将秒数转换成整数 if (second > 60) { // 获取分钟，除以60取整数，得到整数分钟 minute = parseInt(second / 60) // 获取秒数，秒数取佘，得到整数秒数 second = parseInt(second % 60) // 如果分钟大于60，将分钟转换成小时 if (minute > 60) { // 获取小时，获取分钟除以60，得到整数小时 hour = parseInt(minute / 60) // 获取小时后取佘的分，获取分钟除以60取佘的分 minute = parseInt(minute % 60) // 如果小时大于24，将小时转换成天 // if (hour > 23) { // // 获取天数，获取小时除以24，得到整天数 // day = parseInt(hour / 24) // // 获取天数后取余的小时，获取小时除以24取余的小时 // hour = parseInt(hour % 24) // } } } let result = '' + parseInt(second) + '秒' if (minute > 0) { result = '' + parseInt(minute) + '分' + result } if (hour > 0) { result = '' + parseInt(hour) + '小时' + result } // if (day > 0) { // result = '' + parseInt(day) + '天' + result // } return result } let timerCtl = setInterval(function () { console.log(chalk.green(`正在编译中，目前已消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)} ...`)) }, 1000 * 60 * 5); //----------- 【一般编译，按参数，一个接一个的】 --------------- function DoWebpackBuild(list, start, total, step = 200) { let wpkCfg, isEndAll = false; if (list == null \|\| list.length == 0) { console.log(chalk.yellow(`没有模块可编译！`)); clearInterval(timerCtl); return; } // wpkCfg = list[start]; wpkCfg = list.slice(start, start + step); if (wpkCfg == null \|\| wpkCfg.length == 0) { isEndAll = true; clearInterval(timerCtl); console.log(chalk.green(`消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)}`)); return; } console.log('**************************************************************\n'); console.log(`【进度 ${start}/${total} 】,正在编译${start} - ${total < step ? total : start + step}之间的模块...\n`); console.log('*************************************************************\n'); webpack(wpkCfg, (err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 let info = {}; try { info = stats.toJson(); } catch (e) { info = { errors: [] }; console.log('stats.toJson()', err, stats) } // console.error(info.errors); for (let i = 0, l = info.errors.length; i < l; i++) { // console.log(chalk.red(info.errors[i].message)); // console.error(info.errors[i].message) console.error(info.errors[i]) } } // 处理完成 if (isEndAll) { clearInterval(timerCtl); console.log(chalk.green(`消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)}`)); } else { DoWebpackBuild(list, start + step, total); } }); } if (len == 0) { //-------- 【用parallel-webpack，全部编译情况下】 ------------ / moduleList = require('./webpack.get-module').moduleList \|\| []; console.log(`=========进入全模块编译状态(${moduleList.length})模块...=============`) var run = require('parallel-webpack').run; run( require.resolve('./webpack.get-list.js'), { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 1,// use 2 workers cup个数 argv: [argvs] }, ()=>{ //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); }); */ let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【编译所有共${len}】=====================\n`) DoWebpackBuild(webpackList, 0, len);//, 0, len //以上两种时间上差不多 20s } else { let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【按需编译共${len}】=====================\n`) DoWebpackBuild(webpackList, 0, len)//, 0, len }

Ignore Space Show notes View

build/webpack.prod.conf.js

// 多进程 编译所有
//parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度
// const os = require('os');
// const cpus = os.cpus().length;
// console.log(cpus, ' Math.floor(cpus/2)||1', Math.floor(cpus / 2) || 1)
const chalk = require('chalk')
let webpack = require('webpack')
let argvs = (process.argv[2] || "").replace(/\s*$/g, "");
let moduleList = argvs != "" ? argvs.split(',') : [];
let len = moduleList.length;
let startTime = new Date().valueOf();
//  秒数转化为时分秒
function formatSeconds(value) {
  //  秒
  let second = parseInt(value)
  //  分
  let minute = 0
  //  小时
  let hour = 0
  //  天
  //  let day = 0
  //  如果秒数大于60，将秒数转换成整数
  if (second > 60) {
    //  获取分钟，除以60取整数，得到整数分钟
    minute = parseInt(second / 60)
    //  获取秒数，秒数取佘，得到整数秒数
    second = parseInt(second % 60)
    //  如果分钟大于60，将分钟转换成小时
    if (minute > 60) {
      //  获取小时，获取分钟除以60，得到整数小时
      hour = parseInt(minute / 60)
      //  获取小时后取佘的分，获取分钟除以60取佘的分
      minute = parseInt(minute % 60)
      //  如果小时大于24，将小时转换成天
      //  if (hour > 23) {
      //    //  获取天数，获取小时除以24，得到整天数
      //    day = parseInt(hour / 24)
      //    //  获取天数后取余的小时，获取小时除以24取余的小时
      //    hour = parseInt(hour % 24)
      //  }
    }
  }

let result = '' + parseInt(second) + '秒'
  if (minute > 0) {
    result = '' + parseInt(minute) + '分' + result
  }
  if (hour > 0) {
    result = '' + parseInt(hour) + '小时' + result
  }
  //  if (day > 0) {
  //    result = '' + parseInt(day) + '天' + result
  //  }
  return result
}

let cmper = webpack(wpkCfg);
  let cmperStep = 5,cmperTotal=5;
  cmper.apply(new webpack.ProgressPlugin({
    handler(percentage, message, ...args) {
      // console.log(args.length,'...args', args[0],'\n', args[1],'\n', args[2])
      let t = (new Date().valueOf() - startTime) / 1000;

if(t>cmperTotal || percentage>0.95){
        cmperTotal+=cmperStep;
        console.log(` 进度 : ${(percentage*100).toFixed(2)} %`)//,message
      }

},
  }));
  cmper.run((err, stats) => {
    //这个回调一定要写，不然打包不出来
    if (err || stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理
      let info = {};
      try {
        info = stats.toJson();
      } catch (e) {
        info = {
          errors: []
        };
        console.log('stats.toJson()', err, stats)
      }
      // console.error(info.errors);
      for (let i = 0, l = info.errors.length; i < l; i++) {
        // console.log(chalk.red(info.errors[i].message));
        // console.error(info.errors[i].message)
        console.error(info.errors[i])
      }
    }
    // 处理完成
    if (isEndAll) {
      cmperTotal = 10;
      clearInterval(timerCtl);
      console.log(chalk.green(`消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)}`));
    } else {
      DoWebpackBuild(list, start + step, total);
    }
  })

}

if (len == 0) {
  //-------- 【用parallel-webpack，全部编译情况下】 ------------
  /*
  moduleList = require('./webpack.get-module').moduleList || [];
  console.log(`=========进入全模块编译状态(${moduleList.length})模块...=============`)
  var run = require('parallel-webpack').run;
  run(
    require.resolve('./webpack.get-list.js'), 
    {
      watch: false,
      maxRetries: 1,
      stats: false, // defaults to false
      maxConcurrentWorkers: 1,// use 2 workers  cup个数
      argv: [argvs]
    }, ()=>{
      //多打包时，如果其中一个模块出错，不知道是哪个模块
      console.log('\n--------编译完成------- \n');
    });
  */
  let webpackList = require('./webpack.get-list.js');
  len = webpackList.length;
  console.log(`【编译所有 共${len}】=====================\n`)
  DoWebpackBuild(webpackList, 0, len);//, 0, len
  //以上两种时间上差不多   20s
} else {
  let webpackList = require('./webpack.get-list.js');
  len = webpackList.length;
  console.log(`【按需编译 共${len}】=====================\n`)
  DoWebpackBuild(webpackList, 0, len)//, 0, len
}

webpack(wpkCfg, (err, stats) => {
    //这个回调一定要写，不然打包不出来
    if (err || stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理
      let info = {};
      try {
        info = stats.toJson();
      } catch (e) {
        info = {
          errors: []
        };
        console.log('stats.toJson()', err, stats)
      }
      // console.error(info.errors);
      for (let i = 0, l = info.errors.length; i < l; i++) {
        // console.log(chalk.red(info.errors[i].message));
        // console.error(info.errors[i].message)
        console.error(info.errors[i])
      }
    }
    // 处理完成
    if (isEndAll) {
      clearInterval(timerCtl);
      console.log(chalk.green(`消耗 ${formatSeconds((new Date().valueOf() - startTime) / 1000)}`));
    } else {
      DoWebpackBuild(list, start + step, total);
    }
  });
}

Show line notes below