使用webpack和rollup打包组件库的方法

{
 // 程序主入口模块，用户引用的就是该模块的导出
 "main": "dist/bundle.js",
 // 项目包含的文件
 "files": [
  "src",
  "dist"
 ],
 // 将react和react-dom移动到该配置中，兼容依赖
 "peerDependencies": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
 },
}

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
 mode: 'production',
 entry: './src/Loading.jsx',
 output: {
  filename: "index.js",
  path: path.join(__dirname, "./dist/"),
  libraryTarget: 'umd',
 },
 optimization: {
  minimize: false,
 },
 resolve: {
  extensions: ['.jsx']
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    loader: [MiniCssExtractPlugin.loader, 'css-loader&＃63;modules'],
   },
   {
    test: /\.(js|jsx)$/,
    loader: "babel-loader",
    exclude: /node_modules/,
   },
  ]
 },
 plugins: [
  new MiniCssExtractPlugin({
   filename: "main.min.css" // 提取后的css的文件名
  })
 ],
}

// rollup.config.js
// 解决rollup无法识别commonjs的问题
import commonjs from 'rollup-plugin-commonjs'
// babel处理es6代码的转换
import babel from 'rollup-plugin-babel'
// resolve将我们编写的源码与依赖的第三方库进行合并
import resolve from 'rollup-plugin-node-resolve'
// postcss处理css文件
import postcss from 'rollup-plugin-postcss'

export default {
 input: "src/Loading.jsx",
 // 打包一份cjs和一份es的文件
 output: [
  {
   file: "dist/loading.es.js",
   format: "es",
   globals: {
    react: 'React',
   },
  }, {
   file: 'dist/loading.cjs',
   format: "cjs",
   globals: {
    react: 'React',
   },
  },
 ],
 external: ['react'],
 plugins: [
  postcss(
   { extensions: ['.css'] }
  ),
  babel({
   exclude: "node_modules/**",
   runtimeHelpers: true,
  }),
  commonjs(),
  resolve(),
 ],
}

npm pack

npm version [ | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=] | from-git]

npm publish