babel-plugin-diff-platform
v1.0.3
Published
babel plugin diff platform find path
Downloads
15
Readme
单个ui库需要支持不同的平台适配,开发者需要每个平台不同支持,不同的样式,于是诞生了包。
安装
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编译会慢些。但目前现今社会机器配置已很好,不怎么影响。