s***@163.com
s***@163.com
  • 发布:2024-08-23 09:53
  • 更新:2024-08-23 09:53
  • 阅读:128

cli项目使用vscode开发的一些自动化配置及问题

分类:uni-app

package.json 中 scripts 如下

"scripts": {  
    "dev:h5": "uni",  
    "build:h5": "uni build",  
    "dev:mp-weixin": "concurrently 'uni -p mp-weixin' 'node adt.js'",  
    "build:mp-weixin": "uni build -p mp-weixin && node adt.js",  
    "dev:app": "concurrently 'UNI_OUTPUT_DIR=dist/dev/${npm_package_name}-app-dev uni -p app' 'node adt.js'",  
    "build:app": "UNI_OUTPUT_DIR=dist/build/${npm_package_name}-app-build uni build -p app && node adt.js",  
    "dev:app-android": "concurrently 'UNI_OUTPUT_DIR=dist/dev/${npm_package_name}-app-dev uni -p app-android' 'node adt.js'",  
    "build:app-android": "UNI_OUTPUT_DIR=dist/build/${npm_package_name}-app-build uni build -p app-android && node adt.js",  
    "dev:app-ios": "concurrently 'UNI_OUTPUT_DIR=dist/dev/${npm_package_name}-app-dev uni -p app-ios' 'node adt.js'",  
    "build:app-ios": "UNI_OUTPUT_DIR=dist/build/${npm_package_name}-app-build uni build -p app-ios && node adt.js",  
    "dev:app-harmony": "concurrently 'UNI_OUTPUT_DIR=dist/dev/${npm_package_name}-app-dev uni -p app-harmony' 'node adt.js'",  
    "build:app-harmony": "UNI_OUTPUT_DIR=dist/build/${npm_package_name}-app-build uni build -p app-harmony && node adt.js"  
  }

1、concurrently 为npm命令多线程执行库 可以全局安装或项目下安装
开发模式下 uni编译命令不会结束, 直接使用 && 串行执行,造成后续 node命令 不能执行 ; 如果使用& 并行执行 开发模式 下后续没法监控变化 ;使用这个库可以解决问题
2、UNI_OUTPUT_DIR 为改变编译输出目录 一定要写到 uni命令之前 ,否则无效

adt.js 脚本 放到根目录 代码如下

const fs = require('fs');  
const path = require('path');  
const { execSync } = require('child_process');  
const npmEvent = process.env.npm_lifecycle_event;  
let cli;  
if (process.platform === 'win32') {//Windows  
    if (npmEvent.includes('mp-weixin')) {  
        cli = 'C:\\Program Files (x86)\\Tencent\\微信web开发者工具\\cli.exe';  
    } else {  
        cli = 'C:\\Program Files\\DCloud\\HBuilderX\\cli.exe';  
    }  
} else if (process.platform === 'darwin') {//MacOS  
    if (npmEvent.includes('mp-weixin')) {  
        cli = '/Applications/wechatwebdevtools.app/Contents/MacOS/cli';  
    } else {  
        cli = '/Applications/HBuilderX.app/Contents/MacOS/cli';  
    }  
}  
let project;  
let cls;  
const envEvent = npmEvent.split(':')[0];  
if (npmEvent.includes('mp-weixin')) {//微信小程序  
    project = path.resolve(__dirname, `dist/${envEvent}/mp-weixin`);  
    cls = `${cli} open --project ${project}`;  
} else {//APP  
    project = path.resolve(__dirname, `dist/${envEvent}/${process.env.npm_package_name}-app-${envEvent}`);  
   cls = `${cli} open && ${cli} project open --path ${project}`;  
}  

if (fs.existsSync(project)) {  
    execSync(cls);  
} else {  
    let startTime = Date.now();  
    const checkProject = () => {  
        if (fs.existsSync(project)) {  
            execSync(cls);  
        } else {  
            const elapsedTime = Date.now() - startTime;  
            if (elapsedTime < 300 * 1000) {  
                setTimeout(checkProject, 1000);  
            } else {  
                console.error('编译失败,请检查代码后重新执行。');  
            }  
        }  
    };  
    checkProject();  
}

windows下 工具路径可能不对 (安装目录 找到 cli 路径 替换即可 )

问题:上面的是 cls 的命令代码 在 vscode 直接执行 是没问题的 ,但是 如果 使用 HBuilderX 打开的这个项目 就没法执行 cls 的命令代码(注 如果 使用cli命令启动的 HBuilderX 好像没问题)

1 关注 分享
BFC

要回复文章请先登录注册