babel-plugin-diff-platform

---

单个ui库需要支持不同的平台适配，开发者需要每个平台不同支持，不同的样式，于是诞生了包。

• 安装
• 配置.babelrc
• 输入
• 输出
• 原理
• 优劣

安装

npm install -D babel-plugin-diff-platform

配置.babelrc

{
  "plugins": [
    ["diff-platform", {
        "platform": "pc", // 定义依赖追加路径
        "path": "dist", // 默认是dist 支持绝对路径引用
        "extensions": [".js", ".json", ".vue", ".jsx"] // 定义追加路径主文件后缀， 默认 .js .json .vue
    }]
  ]
}

输入

import Buttons from 'vt-button'
import { join } from 'path'
const { readFile } = require('fs')
const img = require('./assets/a.png')

输出

import Buttons from "vt-button/pc";
import { join } from "path";
const { readFile } = require("fs");
const img = require("./assets/a.png");

原理

通过babel ast解析到import,require的依赖，依次迭代根据extensions包装后的路径,若命中，则返回包装后的资源，反之则返回原资源。

优劣

优势

UI库使用者一次配置，在不同平台项目只需修改platform即可，插件会自动找到对应平台的依赖。另外，兼容其他ui库的引用。

劣势

由于使用迭代，node_module中文件过多，使用babel编译会慢些。但目前现今社会机器配置已很好，不怎么影响。