最近工作上有开始了两个移动端H5开发的任务，于是就选用了当下流行的vant组件搭配vue来构建我们的开发框架了，由于是移动端开发，于是想着组件尽量按需来引入吧。于是使用了vant官方推荐的第一种按需引入的方案。项目中采用了typescript，所以使用 ts-import-plugin 实现按需引入。
初期使用还是比较不错的，npm run serve开发模式也很快，vant组件的展现也是正常的，但是build之后，在部署第一个production后，发现vant的样式没有被自动引入。就出现了开发模式正常，生产环境异常的情况。
下面开始了艰难的排错处理。
初步查阅资料发现有个推荐，把style: true改成style: (name) => ${name}/style/less，具体代码如下：
chainWebpack: (config) => {
config.module
.rule('ts')
.use('ts-loader')
.tap((options) => {
options = merge(options, {
transpileOnly: true,
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: 'vant',
libraryDirectory: 'es',
// style: true,
style: (name) => `${name}/style/less`,
}),
],
}),
compilerOptions: {
module: 'es2015',
},
});
return options;
});
},
值得庆幸的是，改完第一天确实可以了，然后就开心得打卡下班了。
不过第二天就暴露了问题了，项目中又进行了开发，又安装了其他的依赖，最后再build，样式不引入的诡异bug又出现了。
这次再查资料基本就没有了，而且都是那么几种，具体我也忘记了。
想着昨天是好的，今天就坏了，我就把版本重置到昨天的版本来测试，令人头疼的是，重置到昨天ok的版本今天也不ok了。令人头大。
折腾了好久，期间编译也好过一两次，这稳定性让我琢磨不透了。好在研究了很久，最后发现了问题，是node_modules下的.cache导致的，是缓存引起的。最后把cache清除后，就是稳定的样式不自动引入了。
如此问题算是稳定复现了，解决之路还是前路茫茫啊。
自查一个小时，未果。
中午吃饭都不香了。饭吃了一半，突然想到在查阅资料时找打vant在github上是有vant-demo
工程的，针对多种使用场景有相应的配置代码。火速填满肚子，继续战斗吧。先把typescript的示例代码下载到本地，安装依赖，然后build，一切正常，多次build，相当稳定。good。下面就是针对一些关键组件的版本进行项目和demo调用版本进行统一了。
"dependencies": {
"core-js": "^3.4.3",
"vant": "^2.2.0",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.1",
"@vue/cli-plugin-typescript": "^4.1.1",
"@vue/cli-service": "^4.1.1",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"ts-import-plugin": "^1.5.5",
"typescript": "^3.5.1",
"vue-template-compiler": "^2.6.10"
},
主要涉及vant、@vue/cli-plugin-babel、@vue/cli-plugin-typescript、@vue/cli-service、less、less-loader、ts-import-plugin这些组件吧，于是在项目中挨个修改版本。这算是最后的拼死一搏了，当时心里还是空落落的，改完后就是验证了，先把.cache删掉（这一步不建议省去，以免第一次验证就错误）。然后就是 npm install，最后npm run build。终于皇天不负有心人，看到vant样式编译出来的css还是值得的，后面又build了好几次，总算稳定了。
后记：开发之路漫漫，各种诡异bug不断。此次问题应该是各个依赖的版本不一致导致的，各组件的api在版本升级时可能进行了修改，导致相互调用时不通。既然官方demo中有版本配置，应该是测试ok的，我们开发时可以直接拿来用，不必须都装最新版，可能某个最新版本api有改动，其他组件还没完成适配，就会出现诡异bug了。
