Linux下构建 uniapp h5 应用（非命令行创建项目）

最近公司有git提交uniapp项目之后自动部署h5的需求，故有了此文章。大致流程就是git提交代码后通过Webhooks触发git拉取，然后在Linux主机上编译构建，接下来就是实际操作（省略了git拉取之前的操作，默认已经将代码拉取到Linux主机了），当前的操作用户为root，以下命令默认都没有加sudo。本文使用的项目是由HBuilderX创建的，并非命令行创建

1.基本环境

主机为centos7，通过以下命令安装nodejs和cnpm，安装完成之后

curl -sL https://rpm.nodesource.com/setup_14.x | bash -
yum install -y nodejs
# 安装cnpm
npm install cnpm -g --registry=https://registry.nlark.com
# 查看cnpm信息
cnpm -v

cnpm@7.0.0 (/usr/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.13 (/usr/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@14.17.2 (/usr/bin/node)
npminstall@5.0.1 (/usr/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr
linux x64 5.4.72-microsoft-standard-WSL2
registry=https://registry.nlark.com

2.安装uniapp-cli

在windows的系统上打开HBuilderX的安装目录，然后进入plugins/uniapp-cli（我的路径是D:\Program Files\HBuilderX\plugins\uniapp-cli）目录，将该文件下的文件拷贝到Linux主机上（不需要拷贝node_modules目录和package-lock.json文件），然后在Linux上打开uniapp-cli的目录执行cnpm install，耐心等待安装完成，如有需要可以安装下less和node-sass-china，命令 cnpm install bcrypt less node-sass-china --save，其中安装node-sass-china需要编译（需要安装make，gcc，g++等）耗时比较久，如果安装过程中出现下载错误则执行以下命令

mkdir -p /var/tools/uniapp-cli/node_modules/_node-sass-china@4.13.1@node-sass-china/vendor/linux-x64-83
cd /var/tools/uniapp-cli/node_modules/_node-sass-china@4.13.1@node-sass-china/vendor/linux-x64-83
curl -o binding.node http://cdn.npm.taobao.org/dist/node-sass/v4.13.1/linux-x64-83_binding.node

如果出现以下错误Binary has a problem: Error: /var/tools/uniapp-cli/node_modules/_node-sass-china@4.13.1@node-sass-china/vendor/linux-x64-83/binding.node: invalid ELF header则需要安装apt install python-snappy(ubuntu，debian)或者cnpm install bcrypt --save(centos)，bcrypt 安装到uniapp-cli下，如果还是不可以，删除 node_modules 之后多尝试看看直至成功。

此时还需要注意，如果报错Syntax Error: Error: Cannot find module '/var/tools/compile-node-sass/node_modules/node-sass-china' 还需要构建两个软连接

ln -s /var/tools/uniapp-cli/ /var/tools/compile-node-sass
ln -s /var/tools/uniapp-cli/ /var/tools/compile-less

3.编写构建命令

打开项目目录，然后执行cnpm init -y生成package.json文件，编辑该文件，内容如下

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    # 以下就是打包的命令了，NODE_ENV的取值：uni-build=构建编译，development=开发模式（不打包仅运行）
    "linux:h5": "INIT_CWD=`pwd` && cd /var/tools/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uni-build node /var/tools/uniapp-cli/bin/uniapp-cli.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4.运行编译命令

然后运行cnpm install cross-env -g && cnpm install && cnpm run linux:h5就出现了熟悉的内容，成功之后就可以根据下面的路径直接部署了，是不是很爽啊😄

> demo@1.0.0 linux:h5 /var/tools/uniapp-cli/demo
> INIT_CWD=`pwd` && cd /var/tools/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uni-build node /var/tools/uniapp-cli/bin/uniapp-cli.js

请注意运行模式下，因日志输出、sourcemap以及未压缩源码等原因，性能和包体积，均不及发行模式。

⠋  开始编译当前项目至 h5 平台...
 DONE  Compiled successfully in 26868ms                                                                      12:46:27 PM

 DONE  Build complete. The demo/unpackage/dist/build/h5 directory is ready to be deployed.

欢迎将H5站部署到uniCloud前端网页托管平台，高速、免费、安全、省心，详见：
https://uniapp.dcloud.io/uniCloud/hosting

The End