uniapp使用cli脚手架创建兼容小程序和h5的项目 自动化命令打包运行_uniapp cli

HbuliderX搭建项目结构：

CLI搭建项目结构：

CLI方式搭建uniapp项目：

vue create -p dcloudio/uni-preset-vue my-test
1

大家可以看下两种方式搭建的项目文件夹目录有什么区别，上面的是HbuilderX模版搭建的小程序项目，下面的是cli搭建的项目，先把my-test项目中src下面的文件全部删除，然后我把小程序代码全部塞进了src文件夹下就可以。
package.json文件内容：

script中已经提前帮我们配置好了，你需要什么环境也可以自己再配，方便快捷，看着眼前一亮。没想到真正跑起来发现缺少了很多依赖包，按照提示，一个一个全部装一遍。在这期间，大家也许会遇到一个node-sass报错，就像这样：incompatible with ^4.0.0，这是因为node-sass兼容问题，解决方法：

npm uninstall node-sass
npm install node-sass@4.14.1
1
2

好了，下图是装完所有提示的依赖包后的package.json

这时在运行npm run serve，发现可以了，在浏览器打开，一片空白，纳尼？赶紧看下控制台，真凶出现：

这个东西我在网上也大面积搜了一下，国内的好像没什么人遇到过，国外的遇到了但是也没提出什么有效的解决办法。核心问题：Uncaught TypeError: _interopRequireDefault is not a function。这玩意一看就是编译后的代码，点击打开看一下，是这样的：

_interopRequireDefault这个function找不到了，于是看它的引入文件里面有没有，在node_models里面找的时候发现了一个诡异现象，@babel_runtime这个包自动装了两个版本，但是之前在package.json中明明只写了一个版本，大家可以看前面的截图，@babel_runtime的版本号是7.12.0。

先不管了，看看里面再说。顺藤摸瓜，我们需要找的是这个路径：

找到对应的js文件后，是这样的：

可以看到，最关键的default，被放在了条件判断里面返回，也就是说，在这里肯定因为某个原因，在编译的时候，并没有返回default，就导致了页面里引入的时候实际上就引入了underfined。
好的好的，到这里，问题的源头找到了，但是怎么解决呢？你是不是想在这里强制给它返回一个default？哈哈哈，最好不要这样，因为你这样的话是动了是你本地的依赖包的代码，即使在你的电脑这个问题解决了，以后别人看到打开这个代码，再跑起来还是会遇到一模一样的问题，需要想一个万全之策，彻底解决这个问题。
这时候，领导过来了，他提供了一个思路，换一个依赖包看看，不同依赖包之前会有些微小的差别，需要细心去找。我想起了之前看到的两个版本的@babel_runtime包，赶紧沿着相同的路径去找下另外一个包，看看有没有default，截图如下：

的确和之前的版本不一样，但是我也看不懂，只能切换下版本试一下看看，于是将package.json中的@babel_runtime版本切换到7.14.8，删掉node_models，重新npm install、npm run serve，成功！！没有报错！搞定！！
在成功运行的那一刻我还是很震惊的，当场就表示我要把这次改bug的经历写下来，发出来，因为这种事情有时候真的是没有思路，完全不知道该从哪里着手，而且这次小程序原地改版h5是以前没有尝试过的，中间过程切换了构建模式，又解决了巨多的依赖报错，还设置了各种自动化打包配置，在成功之前的每一步都是很绝望的在改，不知道后面还有多少bug在等着，这里也要特别感谢领导的关键支持，十分精准。
好啦，目前就这么多，h5现在已经完全自动化部署了，小程序也支持运行，一套代码，两端运行，搞定!