介绍
构建自己的UI库,你必须要对一款打包工具熟悉(webpack, gulp或者grunt), 本文以webpack为例。
github地址
可以点个star,谢谢! 这套UI费了几个月时间和很多心血,现在已经趋于完善,你完全可以在你的生产环境中试着使用。对于性能的考虑,以及js/css压缩,按需引入等等都已经很完善。这套UI库富含移动端可能碰到的手势组件、弹出组件、懒加载、滚动加载等等...
中文文档地址
现在进入正题吧~~~
webpack配置
首先就是webpack配置,我用注释的形式说明
const path = require('path');
const webpack = require('webpack');
// 用于清空之前的打包文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 抽取所有的css到单一文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
'xxx': './packages/xxx.js',
// 或者你可以多入口配置
'xxx': './packages/xxx.js'
},
output: {
path: path.resolve(__dirname, 'bundle'), // 打包的文件目录
filename: './[name].js', // 打包文件名, [name]会自己生产entry的key名,或者你可以用hash,chunkhash这都是没问题的
library: 'libraryName', // 配置库名
libraryTarget: 'umd', // 配置输出对象的规范,你可以使用amd, commonjs, commonjs2,如果要兼容amd和commonjs则使用umd
globalObject: 'this', // 配置库的全局环境, umd则使用this
umdNamedDefine: true // umd输出是否为amd规范命名,默认false
},
externals: { // 如果用到额外的第三方库,为了防止第三方库被打包自己的库,可以使用此字段
vue: {...},
react: {...}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
exclude: path.resolve(__dirname, '/node_modules')
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, '/node_modules')
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 使用MiniCssExtractPlugin有个坑, 必须要有css-loader,而且sass-loader,postcss-loader等等要放css-loader之后
'css-loader',
'postcss-loader'
]
}]
},
resolve: {
extensions: ['.js'] // 配置默认扩展名,你也可以设置.vue,.ts等等
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'style.css'
}),
// 压缩css
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
]
}
复制代码
webpack4的production模式会自己使用uglifyjs-webpack-plugin来压缩js,css需要自己配置压缩。接着配置.babelrc来使用babel插件以及预设
// .babelrc
{
"presets": [
[
"@babel/preset-env", // 转es5
{
"modules": false
}
]
],
"plugins": [...]
]
}
复制代码
npm 发布
到这里你的webpack就算配置完了,然后你可以打包自己的库。 接着就是npm发布,你可能用的cnpm,那么你要切回npm, 然后配置.npmignore把不需要传到npm的过滤掉
// .npmignore
/node_modules/
/文件名/
/.npmignore
/xxx.js
复制代码
之后使用npm publish发布自己的库, 发布前请确保自己是否有REAMDE.MD文件,这个是npm要求一定要上传的文件。包名,版本以及其他信息,npm会从pacakge.json里读取。
你可能会想取消发布这时候就使用 npm unpublish 库名@版本
例: npm unpublish libraryName@1.0.0
取消发布只有在发布的24小时之内有效