kn-cli 1.0.123 → 1.0.124

package/build/postcss.config.js

@@ -14,7 +14,7 @@ const plugins = [
 ];
 if(pxtorem){
   writeLog('启用pxtorem');
-  plugins.push( require("postcss-pxtorem")({rootValue:100,propList:['*']}) )
+  plugins.push( require("postcss-pxtorem")({rootValue:100,propList:['*'],minPixelValue:3}) )
 }else{
   writeLog('关闭pxtorem');
 }

package/build/start.sh

@@ -115,14 +115,20 @@ build(){
 
   if [ -n "$build_type" ] && [ $build_type =  "dev" ]
   then
-    showLog "开始npm run dev"
-    if [ "${dev_mode}" = "watch" ]
+    if [ -n "$devTool" ] && [ $devTool =  "vite" ]
     then
-      npm run dev:watch
-      checkResult "npm run dev:watch"
+      showLog "开始运行vite"
+      npx vite
     else
-      npm run dev
-      checkResult "npm run dev"
+      showLog "开始npm run dev"
+      if [ "${dev_mode}" = "watch" ]
+      then
+        npm run dev:watch
+        checkResult "npm run dev:watch"
+      else
+        npm run dev
+        checkResult "npm run dev"
+      fi
     fi
   else
     showLog "开始npm run build"
@@ -132,8 +138,24 @@ build(){
 }
 
 
-checkNode "v16.18.0"
-checkResult "检查node"
+showNormal "检查devTool:${devTool}"
+
+if [ -n "$build_type" ] && [ $build_type =  "dev" ]
+then
+  if [ -n "$devTool" ] && [ $devTool =  "vite" ]
+  then
+    checkNode "v20.19.0"
+    checkResult "检查node"
+  else
+    checkNode "v16.18.0"
+    checkResult "检查node"
+  fi
+else
+  checkNode "v16.18.0"
+  checkResult "检查node"  
+fi
+
+
 
 build
 checkResult "start.sh"

package/build/vite.config.js

@@ -0,0 +1,159 @@
+import { defineConfig } from 'vite';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import API_CONFIG from './webpack.api';
+import CLI_CONFIG from './cli.config';
+
+const dirname = __dirname;
+const webpackPath=__webpackPath;
+
+
+const resource_path_relative= CLI_CONFIG?.site_root_path??'/';
+const entry = CLI_CONFIG?.entry??path.resolve(dirname,'src');
+const devServer=CLI_CONFIG?.devServer??{};
+
+// @ts-ignore
+const host = devServer?.host??'localhost';
+// @ts-ignore
+const port = devServer?.port??8080;
+const protocol=CLI_CONFIG?.https?'https:':'http:';
+
+let optimizeDeps=undefined;
+if(typeof entry != 'string'){
+  console.log('cli.config.js的entry配置错误，不支持vite');
+}
+
+if(CLI_CONFIG?.rules?.compileNpmPackage){
+  optimizeDeps={
+    include:CLI_CONFIG?.rules?.compileNpmPackage,
+    esbuildOptions:{
+      loader: {
+        '.js': 'jsx', // 显式告诉 esbuild，遇到 .js 后缀也用 jsx loader
+      },
+    }
+  };
+}
+
+const NowDateTime = Date.now();
+
+const appVersion= CLI_CONFIG?.version ?? '';
+
+const {API_PROXY,API_HOSTS} = API_CONFIG;
+
+let API_HOST={};
+if(API_HOSTS){
+  let apiKeys = Object.keys(API_HOSTS);
+  apiKeys.map(key=>{
+    API_HOST[key] = JSON.stringify(API_HOSTS[key])
+  });
+}
+
+let PROXY={}
+if(API_PROXY){
+  Object.keys(API_PROXY)?.forEach(key=>{
+    let item = API_PROXY[key];
+    PROXY[key]={
+      target:item.target,
+      changeOrigin:item.changeOrigin,
+    }
+    PROXY[key].rewrite=path=>{
+      Object.keys(item.pathRewrite)?.forEach(pathKey=>{
+         path = path.replace(new RegExp(pathKey),item.pathRewrite[pathKey]);
+      })
+      return path;
+    }
+  })
+}
+
+
+function warn(txt){
+  console.log(`\x1b[40;32m %s \x1b[0m`,txt);
+}
+warn(`=====================env=========================`);
+warn(`dirname:${dirname}`);
+warn(`build_env:${process.env.build_env}`);
+warn(`mock:${process.env.mock}`);
+warn(`noSkipNpmInstall:${process.env.noSkipNpmInstall}`);
+warn(`build_log_level:${process.env.build_log_level}`);
+warn(`=====================env end=========================`);
+
+export default defineConfig({
+  base:resource_path_relative,
+  root:dirname,
+  resolve: {
+    alias:[
+      {
+        find: /^~@/,
+        replacement: path.resolve(dirname,'src'),
+      },
+      {
+        find: /^~(?=[^@])/,
+        replacement: '',
+      },
+      {
+        find: /^@\//,
+        replacement: path.resolve(dirname,'src')+'/',
+      }
+    ]
+  },
+  plugins: [
+    react(),
+    createHtmlPlugin({
+      entry: 'src/index.jsx', 
+      inject: {
+          data: {
+            // 这里定义 HTML 中需要的变量
+            BUILD_ENV: (process.env.build_env),
+            APP_VERSION: (appVersion),
+            SITE_NAME:(CLI_CONFIG.name),
+          }
+        }
+    }),
+  ],
+  // 如果你还在用 .js 后缀写 JSX，这行必不可少
+  // esbuild: {
+  //   loader: "jsx",
+  //   include: /[.]jsx?$/
+  // },
+  // 2. 针对预构建（重要）：解决 node_modules 或启动时的转换报错
+  // @ts-ignore
+  optimizeDeps,
+  server: {
+    host,
+    port,
+    // @ts-ignore
+    open: devServer?.open??`${protocol}//${host}:${port}`,
+    // @ts-ignore
+    proxy:PROXY,
+    fs: {
+      allow: [
+        // 允许访问项目源码目录
+        dirname,
+        // 允许访问 Vite 配置所在的目录（为了读取 node_modules 等）
+        path.resolve(__dirname)
+      ]
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: CLI_CONFIG?.less?.javascriptEnabled??false,
+        modifyVars:CLI_CONFIG?.less?.modifyVars??false,
+      },
+    },
+    modules: {
+      localsConvention: 'camelCaseOnly',
+      generateScopedName: '[local]--[hash:base64:5]',
+    },
+  },
+  define: {
+    VERSION_HASH: JSON.stringify(`${NowDateTime}-${new Date().toLocaleString()}`),
+    BUILD_ENV: JSON.stringify(process.env.build_env),
+    APP_VERSION: JSON.stringify(appVersion),
+    SITE_NAME:JSON.stringify(CLI_CONFIG.name),
+    // @ts-ignore
+    MOCK: process?.env?.mock == 1 ? '1' : false, //JSON.stringify(process.env.mock)
+    ...API_HOST,
+  }
+})

package/build/vite.package.json

@@ -0,0 +1,25 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "main": "lib/index",
+  "scripts": {
+    "dev": "npx vite"
+  },
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "~17.0.2",
+    "@types/react-dom": "~17.0.2",
+    "mockjs-async": "~0.0.5",
+    "@vitejs/plugin-react": "~4.3.4",
+    "less": "~4.2.2",
+    "vite": "~6.4.1",
+    "postcss-preset-env": "~7.8.3",
+    "postcss-pxtorem": "~5.1.1",
+    "vite-plugin-html": "~3.2.2"
+  },
+  "overrides": {
+    "@jridgewell/gen-mapping": "0.3.5"
+  },
+  "browserslist": ["> 0.05%"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-cli",
-  "version": "1.0.123",
+  "version": "1.0.124",
   "description": "",
   "main": "index.js",
   "scripts": {

package/readme.md

@@ -140,6 +140,9 @@ report
 
 
 # 更新日志
+* 1.0.124
+  支持vite6调试模式，由于@vitejs/plugin-react目前稳定版本只有4.3.4还不完全支持vite7，所以暂时使用vite6  
+  
 * 1.0.120
   支持??=语法编译
 

package/src/build.js

@@ -48,13 +48,17 @@ module.exports= async (options={})=> {
   const sourceDir = path.resolve(projectPath,'public');
   // 用户项目文件夹下的package.json
   const projectPackagePath = path.resolve(projectPath,'package.json');
+
   const tempDir = path.resolve(ROOT,'temp');
   const tempProjectDir = path.resolve(tempDir,projectName);
   // 构建模板
   const tempWebpackDir = path.resolve(tempProjectDir,"_webpack");
   const tempWebpackPackagePath = path.resolve(tempWebpackDir,'package.json');
+  const tempVitePackagePath = path.resolve(tempWebpackDir,'vite.package.json');
   const tempWebpackConfigPath = path.resolve(tempWebpackDir,'webpack.config.js');
   const tempStartShell = path.resolve(tempWebpackDir,'start.sh');
+  const tempViteConfigPath = path.resolve(tempWebpackDir,'vite.config.js');
+
 
   let projectPackage,webpackPackage;
 
@@ -63,6 +67,13 @@ module.exports= async (options={})=> {
 
   if(type=='dev'){
     answer = await inquirer.prompt([
+      {
+        name:'devTool',
+        type:'list',
+        message:'选择调试工具',
+        choices:['webpack','vite'],
+        default:'webpack'
+      },
       {
         name:'type',
         type:'list',
@@ -85,10 +96,11 @@ module.exports= async (options={})=> {
         default:'不需要'
       },
     ]);
+    
   }
   let logCount='';
   const tasks = new Listr([
-    {...TaskNodeVersion},
+    // {...TaskNodeVersion},
     {
       title:"创建临时缓存文件夹",
       task:async (ctx,task)=>{
@@ -162,7 +174,12 @@ module.exports= async (options={})=> {
           try{
             task.title='开始构造package'
             projectPackage= require(projectPackagePath);
-            webpackPackage= require(tempWebpackPackagePath);
+            if(type == 'dev' && answer?.devTool == 'vite'){
+              webpackPackage= require(tempVitePackagePath);
+            }else{
+              webpackPackage= require(tempWebpackPackagePath);
+            }
+
             // 将项目文件夹下的package.json内dependencies部分合并入 _webpack/package.json
             webpackPackage.dependencies = {...webpackPackage.dependencies ,...projectPackage.dependencies};
             webpackPackage.devDependencies = {...webpackPackage.devDependencies ,...projectPackage.devDependencies};
@@ -262,6 +279,11 @@ module.exports= async (options={})=> {
               data = data.replace(/__dirname/ig,`${TransformWindowsPath(sourceFolder)}`);
               return data;
             })
+            await replaceFileData(tempViteConfigPath,function(data){
+              data = data.replace(/__dirname/ig,`"${TransformWindowsPath(sourceFolder)}"`);
+              data = data.replace(/__webpackPath/ig,`"${TransformWindowsPath(tempWebpackDir)}"`);
+              return data;
+            });
             resolve();
           }catch(ex){
             throw new Error(`
@@ -323,6 +345,7 @@ module.exports= async (options={})=> {
             let build_env='';
             let mock='';
             let noSkipNpmInstall='';
+            let devTool=answer?.devTool||'webpack';
             switch(answer?.type){
               case '本地调试':{build_env='localdebug'}break;
               case '测试环境':{build_env='dev'}break;
@@ -345,6 +368,9 @@ module.exports= async (options={})=> {
             if(noSkipNpmInstall){
               cmdParams.push(`noSkipNpmInstall=${noSkipNpmInstall}`)
             }
+            if(devTool){
+              cmdParams.push(`devTool=${devTool}`)
+            }
           }
 
           if(cliConfig?.registryType){