lshi-import-loader
组件库按需引入工具支持(TS | JS | JSX | TSX)
使用方式 Install
npm i lshi-import-loader -D
Loader options
//注意:需要配置在最后webpack rules
...
{
test: /\.(jsx|tsx|js|ts)$/,
exclude: /node_modules/,
loader: "lshi-import-loader",
options:{
/** 按需引入目录名称 默认lib*/
libraryDirectory:'lib',
/* 组件库名称 默认lsui-vue*/
libraryName:'vue-lianshiui'
}
}
...
Vant 配置用法
//注意:需要配置在最后webpack rules
...
{
test: /\.(jsx|tsx|js|ts)$/,
exclude: /node_modules/,
loader: "lshi-import-loader",
options:{
/** 按需引入目录名称 默认lib*/
libraryDirectory:'es',
/* 组件库名称 默认vue-lianshiui*/
libraryName:"vant"
}
}
...
多个组件库使用方法
//注意:需要配置在最后webpack rules
...
{
test: /\.(jsx|tsx|js|ts)$/,
exclude: /node_modules/,
loader: "lshi-import-loader",
options:{
/** 按需引入目录名称 默认lib*/
libraryDirectory:{
"vant":'es',
"vue-lianshiui":'lib'
},
/* 组件库名称 默认lsui-vue*/
libraryName:["vant","vue-lianshiui"]
}
}
...
ElementUI使用方法
//注意:需要配置在最后webpack rules
...
{
test: /\.(jsx|tsx|js|ts)$/,
exclude: /node_modules/,
loader: "lshi-import-loader",
options:{
/** 按需引入目录名称 默认lib*/
libraryDirectory:{
"vant":'es',
"vue-lianshiui":'lib',
"element-ui": {
componentName: "/lib",
styleLibraryName: "/lib/theme-chalk",
css: true
}
},
/* 组件库名称 默认lsui-vue*/
libraryName:["vant","vue-lianshiui","element-ui"]
}
}
...
import { Button } from 'element-ui';
/** ===> */
var button = require('element-ui/lib/button');
require('element-ui/lib/theme-chalk/button.css');
/** ===> style:true */
var button = require('element-ui/lib/button');
require('element-ui/lib/theme-chalk/button/style.css');
组件库目录结构
├──lib
│ ├──Example component1 //按需引入组件文件名
│ │ ├──index.js //组件代码
│ │ ├──style //组件样式文件夹
│ │ │ |──index.css //组件样式
│ │ │ |──index.js //组件样式引入js文件
│ ├──index.js //全局引入js文件
│ ├──index.css //全局引入css文件
├──package.json