背景

我的项目采纳monorepo(yarn workspace)形式来治理，当应用vant这种库的时候，须要在援用处配置.postcssrc.js来解决rem和px转换。

// .postcssrc.jsmodule.exports = {    'postcss-pxtorem': {        rootValue: 50,        propList: ['*'],    },};

问题由此产生

规定

首先咱们须要通晓postcss和monorepo的根底规定

  1. .postcssrc.js只对文件所在目录与上级目录产生成果；

    反过来说当webpack编译某个文件a的时候，会一路从a向上找postcss配置，找到第一个后就利用。
  2. monorepo的一项根底优化是将所有我的项目的依赖node_modules合并晋升到我的项目根目录。

问题

1.0

因为下面的规定产生了一个问题

多个我的项目援用vant的时候，因为vant版本不统一，导致有的在根目录的node_modules有的在包当前目录的node_modules；

  • 多个vant很难保障应用统一的版本
  • 多个vant很难保障应用统一的配置

2.0

一个天然的解决办法是将vant收敛到某个包中，其余包应用的时候从这个包外面援用

// package-commonimport { Button } from 'vant';export { Button };// package-mobileimport { Button } from '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']  ]}

这个plugin的个性

  • 将import语句转译为多条语句
  • 不会解决export语句

demo如下

// 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-common引入，失去了局部引入的个性，随着各个包的开发common中的vant体积会越来越大；

解决办法

须要使得package-common适配babel-plugin-import，使得其反对局部引入。

首先

配置puzzle-common的目录构造如下

以Button为例

// index.tsimport { Button } from 'vant';export default Button;// style.tsexport * from 'vant/es/button/style/index.js';

其次

重新配置babel-import-plugin，这次以package-common为入口

// babel.config.js  plugins: [    ['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');

合乎咱们的预期，成果失常。

完