构建自己的 UI 库,你必须要对一款打包工具熟悉(webpack, gulp 或者 grunt), 本文以 webpack 为例。
https://github.com/Reming960227/atom-design
可以点个 star,谢谢! 这套 UI 费了几个月时间和很多心血,现在已经趋于完善,你完全可以在你的生产环境中试着使用。对于性能的考虑,以及 js/css 压缩,按需引入等等都已经很完善。这套 UI 库富含移动端可能碰到的手势组件、弹出组件、懒加载、滚动加载等等...
https://atom-design.github.io/docs/#/
现在进入正题吧~~~
首先就是 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": [...] ] }
到这里你的 webpack 就算配置完了,然后你可以打包自己的库。 接着就是 npm 发布,你可能用的 cnpm,那么你要切回 npm, 然后配置.npmignore 把不需要传到 npm 的过滤掉
// .npmignore /node_modules/ /文件名 / /.npmignore /xxx.js
之后使用 npm publish 发布自己的库, 发布前请确保自己是否有 REAMDE.MD 文件,这个是 npm 要求一定要上传的文件。包名,版本以及其他信息,npm 会从 pacakge.json 里读取。
你可能会想取消发布这时候就使用 npm unpublish 库名 @版本
例:npm unpublish [email protected]
取消发布只有在发布的 24 小时之内有效