uni-app 框架 | 用命令行方式打包 HBuilder X 创建的项目

·  阅读 1090
uni-app 框架 | 用命令行方式打包 HBuilder X 创建的项目

uni-app 框架 | 用命令行方式打包 HBuilder X 创建的项目

关键词: uni-app vue-cli webpack 环境变量 process.env

背景

当前公司内部统一的前端技术架构中,打包构建这一环节都是基于 webpacknpm run build 命令。而最近接手的几个项目都是用 HBuilder X 创建的项目, 打包构建时,只能通过HBuilder X 来操作。为了保证统一的打包构建流程,同时也为了更快的熟悉接手的项目,开始折腾如何将 uni-app 的打包构建转化为常见的 npm run build 命令进行打包构建。

在学习和折腾的过程中,还意外的了解到如何使用 HBuilder 来配置多个小程序打包环境,也一起记录在这里。

目录

  • 使用 HBuilder X 创建新项目
  • 使用 vue-cli 创建新项目
  • 改造 HBuilder X 创建的项目为命令行可执行的项目
  • 拓展一:配置使用 HBuilder X 的小程序项目多环境打包
  • 拓展二:配置过程中遇到的其他问题
使用 HBuilder X 创建新项目

建议直接使用官网的使用说明即可

  • 使用 HBuilder X 创建一个 uni-app 的默认模板项目

  • 创建教程,参考通过 HBuilderX 可视化界面,创建 uni-app,(地址:uniapp.dcloud.io/quickstart-…

  • 创建完成后的目录示例:

HBuilderX-图1-1.jpg

  • 启动项目至内置浏览器示例:

HBuilderX-图1-2.jpg

使用 vue-cli 创建新项目

建议直接使用官网的使用说明即可

  • 使用 vue-cli 创建一个 uni-app 的默认模板项目
  • 创建教程,参考通过 vue-cli 命令行创建 uni-app,(地址:uniapp.dcloud.io/quickstart-…
  • 创建完成后的目录示例:

HBuilderX-图2-1.jpg

  • 启动项目,浏览器示例:

HBuilderX-图2-2.jpg

改造 HBuilder X 创建的项目为命令行可执行的项目

改造工作的核心就是对比两种方式的项目目录,然后同步项目目录即可。

  • 改造 HBuilder X 项目
    • 在 HBuider X 项目中,创建 src 目录,参考 uni-app 的项目,将 uni-app 中 pages、static 目录放入 src 目录,将 App.vue、main.js、manifest.json、pages.json、uni.scss 等文件都放入 src 目录
    • 将 uni-app 中 babel.config.js、package.json、postcss.config.js 等文件放入 HBuilder X 项目的根目录中
  • 改造后的代码目录示例

HBuilderX-图3-1.jpg

  • 用命令行的方式启动改造后的项目

    • 在迁移后的项目根目录下,执行 npm install
    • 启动项目,执行 npm run serve
    • 查看启动后的页面,为了做区别,修改了原来的 Hello 为 你好
  • 启动项目,浏览器示例:

HBuilderX-图3-2.jpg

  • 至此,改造的核心步骤已完成

  • 注意事项

    • 用 HBuilder X 创建的项目,并没有 node_modules、public 等目录,以及 package.json 、babel.config.js 等文件
    • 两种创建项目方式的目录层级也不一致
    • 如果项目较大,使用 HBuilder X 安装过第三方 npm 包,则需要保留原来安装的,并与 vue-cli 创建的项目的 package.json 进行合并,因为 vue-cli 中包含有 @dcloudio 的私有包
    • 如果在迁移过程中,启动时遇见找不到包的情况,则安装即可
    • 建议保留原有的项目,copy 项目进行操作,同时启动正常后,建议与测试部门确认沟通,过一遍冒烟测试,和主场景回归
拓展一:配置使用 HBuilder X 的小程序项目多环境打包

此拓展仅应用于 HBuilder X 创建的项目

  • 依赖项目的 package.json 文件,参考官方配置文档(地址:uniapp.dcloud.io/collocation…

  • package.json 扩展配置用法(拷贝代码记得去掉注释!)

        {
            /**
             package.json其它原有配置 
             */
            "uni-app": {// 扩展配置
                "scripts": {
                    "custom-platform": { //自定义编译平台配置,可通过cli方式调用
                        "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                        "BROWSER":"",  //运行到的目标浏览器,仅当UNI_PLATFORM为h5时有效
                        "env": {//环境变量
                            "UNI_PLATFORM": "",  //基准平台
                            "MY_TEST": "", // ... 其他自定义环境变量
                         },
                        "define": { //自定义条件编译
                            "CUSTOM-CONST": true //自定义条件编译常量,建议为大写
                        }
                    }
                }    
            }
        }
    复制代码
  • 实际项目中的配置示例

    {
        "uni-app": {
            "scripts": {
                "mp-weixin-dev": { 
                    "title":"微信小程序(Dev环境)", 
                    "env": {
                        "UNI_PLATFORM": "mp-weixin",  
    					"VUE_APP_ENV": "dev",
    					"UNI_OUTPUT_DIR": "dist"
                     },
                    "define": { 
                        "CUSTOM-CONST": true 
                    }
                },
    			"mp-weixin-test": {
    			    "title":"微信小程序(Test环境)", 
    			    "env": {
    			        "UNI_PLATFORM": "mp-weixin",  
    					"VUE_APP_ENV": "test",
    					"UNI_OUTPUT_DIR": "dist"
    			     },
    			    "define": { 
    			        "CUSTOM-CONST": true 
    			    }
    			},
    			"mp-weixin-pre": {
    			    "title":"微信小程序(Pre环境)", 
    			    "env": {
    			        "UNI_PLATFORM": "mp-weixin",  
    					"VUE_APP_ENV": "pre",
    					"UNI_OUTPUT_DIR": "dist"
    			     },
    			    "define": { 
    			        "CUSTOM-CONST": true 
    			    }
    			},
    			"mp-weixin": {
    			    "title":"微信小程序(生产环境)", 
    			    "env": {
    			        "UNI_PLATFORM": "mp-weixin",  
    					"VUE_APP_ENV": "production",
    					"UNI_OUTPUT_DIR": "dist"
    			     },
    			    "define": { 
    			        "CUSTOM-CONST": true 
    			    }
    			}
            }    
        }
    }
    复制代码
  • 配置完成后,HBuilder X 开发工具的示例

HBuilderX-图4-1.jpg

拓展二:配置过程中遇到的其他问题
  • uniapp项目,通过cli指令新建的项目,在任意页面style标签使用lang="scss"报错:options has an unknown property 'prependData',文章地址:ask.dcloud.net.cn/question/10…
  • uni-app自定义打包目录package.json命令配置,在 scripts 命令后,增加一个 UNI_OUTPUT_DIR 参数: UNI_OUTPUT_DIR=你的指定目录

杂谈

  • 由本文可见,大部分内容都是依赖于官方文档,如果在参考应用的过程中,发现有出入,请以官方文档为准
  • 关于如何使用拓展中的 env 等环境变量,可以官网对应的参数说明,知道使用方法后,也可以按现有项目进行修改

资料参考

分类:
前端
标签:
分类:
前端
标签: