1.0.1 • Published 1 year ago
fan.zhang-ui v1.0.1
cat-ui
喜马拉雅国际版前端基础组件库
预览地址
http://static2.test.ximalaya.com/yx/cat-ui/last/out/index.html
安装
npm install fan.zhang-ui
or
yarn add fan.zhang-ui
发布到云效
yarn build:storybook
yarn xpm3-test
发布版本
yarn release
npm publish
使用
1 在入口中导入 css
文件
// index.js
import 'fan.zhang-ui/styles/index.css';
// 如果需要引入全局的normalize.css或者reset.css
import 'fan.zhang-ui/styles/common/normalize.css';
import 'fan.zhang-ui/styles/common/reset.css';
2 使用组件
import { Button } from 'fan.zhang-ui';
const App = () => {
return <Button>Add</Button>;
};
export default App;
3 组件按需加载
npm install babel-plugin-import -D
下载babel-plugin-import
插件- 配置
babel-plugin-import
插件:
webpack.config.js
/**
* css name covert
* 1 Button => button
* 2 ElementSelect => element-select
* @param {string} name 组件名称
*/
const cssNameConvert = function(name) {
const len = name.length;
let ret = '';
for (let i = 0; i < len; i++) {
const charCode = name.charCodeAt(i);
if (charCode >= 65 && charCode <= 90) {
ret +=
i === 0
? String.fromCharCode(charCode + 32)
: `-${String.fromCharCode(charCode + 32)}`;
} else {
ret += name[i];
}
}
return ret;
};
module.exprots = {
module: {
rules: [
{
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
plugins: [
[
'import',
{
libraryName: 'fan.zhang-ui',
libraryDirectory: 'lib/components',
"camel2DashComponentName": false,
customStyleName: name => {
const newName = cssNameConvert(name);
return `fan.zhang-ui/styles/${newName}.css`;
}
}
]
]
}
}
}
]
}
}
开发流程
更新日志
1.0.1
1 year ago