后台项目由monorepo（yarnworkspace）管理。使用vant之类的库时，需要在引用处配置.postcssrc.js来处理rem和px的转换。//.postcssrc.jsmodule.exports={'postcss-pxtorem':{rootValue:50,propList:['*'],},};问题由此产生。首先我们要知道postcss和monorepo.postcssrc.js的基本规则只对文件所在目录和下级目录有影响；反之，webpack在编译一个文件a时，会从a开始一直往上查找postcss配置，找到第一个后应用。monorepo的一项基础优化是将所有项目的依赖node_modules合并并提升到项目根目录。问题1.0由于上述规则出现问题。vant被多个项目引用时，由于vant版本不一致，有的node_modules在根目录下，有的node_modules在package的当前目录下；多个vants很难使用一致的版本多个vants很难保证一致的配置。2.0的一个自然的解决方案是将vants汇聚到某个包中，并在使用其他包时从这个包中引用它们//package-commonimport{Button}from'vant';export{Button};//package-mobileimport{Button}来自'package-common';不幸的是，这是不可能的。这里涉及到vant的ui组件库的另一个功能，部分导入；即部分导入，vant官方使用babel-plugin-import来实现该功能。只需要配置babel.config.js即可实现。//babel.config.jsmodule.exports={presets:[...],plugins:[['import',{libraryName:'vant',libraryDirectory:'es',style:true},'vant']]}这个插件的特性是将import语句翻译成多条语句，不处理export语句。演示如下//package-commonimport{Button}from'vant';↓↓↓↓↓var_button=require('vant/es/button');require('vant/es/button/style/index.js');所以，我们上面的用法会出现如下问题3.0//package-commonimport{Button}from'vant';export{Button};↓↓↓↓↓var_button=require('vant/es/button');require('vant/es/button/style/index.js');module.exports.Button=_button;//package-mobilevar_button=require('package-common').Button;可以看出，所有的组件都被puzzle-commonfirst引入，部分引入的特性已经丢失。随着每个包的开发，vant的体积会越来越大；解决方案是将package-common适配为babel-plugin-import，使其支持部分导入。首先配置puzzle-common的目录结构如下，以Button为例//index.tsimport{Button}from'vant';exportdefaultButton;//style.tsexport*from'vant/es/button/style/index.js';其次重新配置babel-import-plugin，这次以package-common作为入口//babel.config.jsplugins:[['import',{libraryName:'package-common/vant',libraryDirectory:'',style:true},'vant']]此时引用翻译如下//package-mobileimport{Button}from'package-common/vant';↓↓↓↓↓↓var_button=require('package-common/vant/es/button/index.ts');require('package-common/vant/es/button/style.js');正如我们预期的那样工作，工作正常。超过
