乐趣区

关于postcss:一个monorepo与postcss和vant冲突问题解决方案

jiezi

背景

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

// .postcssrc.js

module.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-common

import {Button} from 'vant';

export {Button};

// package-mobile
import {Button} from 'package-common';

惋惜这样是不行的。
这波及到 vant 这种 ui 组件库的另一个性能，局部引入；

即局部引入，vant 官网应用 babel-plugin-import 实现此性能。只须要配置 babel.config.js 即可实现。

// babel.config.js

module.exports = {presets: [...],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

这个 plugin 的个性

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

demo 如下

// package-common

import {Button} from 'vant';

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('vant/es/button');
require('vant/es/button/style/index.js');

因而对于咱们下面的应用形式产生了如下问题

3.0

// package-common

import {Button} from 'vant';

export {Button};

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('vant/es/button');
require('vant/es/button/style/index.js');
module.exports.Button = _button;

// package-mobile
var _button = require('package-common').Button;

能够看出所有组件曾经率先由 puzzle-common 引入，失去了局部引入的个性，随着各个包的开发 common 中的 vant 体积会越来越大；

解决办法

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

首先

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

以 Button 为例

// index.ts
import {Button} from 'vant';
export default Button;

// style.ts
export * 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-mobile

import {Button} from 'package-common/vant';

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('package-common/vant/es/button/index.ts');
require('package-common/vant/es/button/style.js');

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

完

退出移动版