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

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

背景

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

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

改造 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 等环境变量，可以官网对应的参数说明，知道使用方法后，也可以按现有项目进行修改

资料参考

HBuilder 官网: www.dcloud.io/hbuilderx.h…
uni-app 教程：uniapp.dcloud.io/

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

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

背景

目录

使用 HBuilder X 创建新项目

使用 vue-cli 创建新项目

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

拓展一：配置使用 HBuilder X 的小程序项目多环境打包

拓展二：配置过程中遇到的其他问题

杂谈

资料参考