接手了一个uniapp项目,旧代码只能hbuilder编辑器打包,无法上公司的流水线,抽空研究了一下怎么转成npm打包。
网上的教程看起来特别简单,无非就是找个壳子把旧代码包起来。但是转换的过程中,踩坑不断。
思路一
按官网上教的用vue-cli 4.x去创建了一个的默认模板,旧代码扔进src文件夹,npm run serve。
报错一堆,连html-webpack-plugin都报错说找不到……检查了node_modules,生成的模板是webpack 5.74。菜鸡懵逼,uniapp官网不是说vue脚手架4创建出来的应该是webpack4吗…
但是不管我怎么尝试uniapp的npm指令,创建出的默认模板都是webpack5……
突然想到github上应该有类似的项目,我可以把人家的壳子扒下来。
思路二
顺利找到一个开源uniapp项目,这个项目是webpack4,地址:
https://github.com/stavyan/TinyShop-UniApp
src替换成我的旧代码,走起~
下面记录一下,遇上的各种报错信息
报错1:node-sass安装不上
TinyShop的sass-loader版本是7.1.0,并且同时装了sass和node-sass。
sass-loader不一定非要装node-sass,sass-loader官网上看,低版本sass-loader一直推荐装node-sass,但是高版本开始就说node-sass和sass可以二选一。
于是我删掉了package.json的node-sass,重新npm i。
报错2:less-loader未安装
迷惑,为啥有了sass,还要装less,全局搜代码,发现其中有两个文件写的是:
<style lang="less" scoped>
干掉,改成
<style lang="scss" scoped>
报错3:/deep/编译没通过
因为这个版本的sass不支持/deep/,全局替换成::v-deep
报错4: end value has mixed support, consider using flex-end instead
flex布局不支持start和end,要改成flex-end和flex-start。开发过pc端的同学应该也遇到过,start和end甚至低版本的谷歌浏览器都不支持。
至此,打包和运行都没啥问题了,如果部署后不是根目录,vue.config.js还需要加上:
publicPath: './'
之前写在manifest里的proxy代理,依旧有效,不用在vue.config.js再写一遍。
--------分割线----------
发生了变态的特殊情况,本地运行和打包都没问题,公司流水线上编译失败……
报错信息:
Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema。
- options has an unknown property 'data'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
全网都告诉我,sass-loader版本过高,要降到7.1.0,可我已经是7.1.0了啊啊啊啊啊啊。
难道还要降到6不成?
自暴自弃降到了6,结果报错更多了(跪下
prependData是8的写法,破罐破摔sass-loader改成8,竟然编译通过了……迷惑脸……
我怀疑公司的流水线依赖包源是不是有问题……