HBuilderX下创建项目通过npm方式编译(脱离HBuilderX编译使用)

在HBuilderX下创建的项目通常只能通过可视化界面进行使用维护,然而要想不通过HBuilderX编辑器的情况下维护uni-app项目就需要对项目进行修改。(如果还有其他方法可以交流借鉴下-)

编译器的区别(HBuilderX下创建的项目和cli创建的项目的区别)

cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行 npm update，或者手动修改 package.json 中的 uni 相关依赖版本后执行 npm install。更新后可能会有新增的依赖并不会自动安装，手动安装缺少的依赖即可。

HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。

已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。

cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

案例地址

https://github.com/molimobai/uni-app-cli

操作流程 需要先进行vue-cli安装，为了安装uni-app的cli版本使用 npm不行的话可以使用cnpm操作 npm install -g @vue/cli 使用正式版（对应HBuilderX最新正式版） vue create -p dcloudio/uni-preset-vue my-project 使用alpha版（对应HBuilderX最新alpha版） vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

然后通过安装生成一个初始的uni-preset-vue项目，在项目下创建一个src目录。把原先HBuilderX创建的项目文件全部拖入src目录中就可以进行在外部进行npm操作使用。

development 使用方式 npm run dev:%PLATFORM% production 使用方式 npm run build:%PLATFORM% %PLATFORM% 参考列表 %PLATFORM% 描述
h5   H5  
mp-alipay   支付宝小程序  
mp-baidu   百度小程序  
mp-weixin   微信小程序  
mp-toutiao   字节跳动小程序  
mp-qq   qq 小程序  
mp-360   360 小程序  
mp-kuaishou   快手小程序  
quickapp-webview   快应用(webview)  
quickapp-webview-union   快应用联盟  
quickapp-webview-huawei   快应用华为  
项目编译位置

根目录下dist内 build(发行包) dev(测试包)

修订日期

2021-08-31
1.项目文档创建