想要用Npm发布一个自己的组件包踩坑记录（webpack,rollup)

底下这个写的很详细，看完就懂
https://blog.csdn.net/xjl271314/article/details/106220492/
关于 如何基于antd封装自己的react组件并发布到npm
https://zhuanlan.zhihu.com/p/80754775

我自己遇到的一些问题，走的弯路。
1、npm link 方便调试

$ # 先去到模块目录，把它 link 到全局
$ cd path/to/my-utils
$ npm link

$ # 再去项目目录通过包名来 link
$ cd path/to/my-project
$ npm link my-utils

结束后回到模块目录。
npm unlink

2、进入地址，是组件打包之后的webpack入口

3、关于打包的注意事项
1、记得添加library
https://segmentfault.com/a/1190000018242549

2、https://zhuanlan.zhihu.com/p/93773786
报错：

Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

3、antd无样式，以及样式打包报错
npm i antd
webpack添加rules

      {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [ 'style-loader', 'css-loader','less-loader' ]
      },

4、代码分割，不要只在main.js里
https://blog.csdn.net/Umbrella_Um/article/details/100184565

5、使用mini-css-extract-plugin拆分样式插件，但是react的style失效了。使用这个插件就不能用style-loader，然后我又换回了style-loader。

如果还是使用mini-css-extract-plugin，打包项目的时候出现css样式丢失问题，可以看这里 解决。

6、
最后我的wbpack

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin') // 引入压缩插件

module.exports = {
  mode: 'none', // 因为默认是production 默认会进行压缩
  entry: {
    ResizableTable:'./ResizableTable/index.js',
    'ResizableTable.min':'./ResizableTable/index.js',
    vendors: ['react-resizable']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    library: 'react-antd-resizable-table',
    libraryTarget: 'umd',
    libraryExport: "default", // 不添加的话引用的时候需要 xxx.default
    filename: '[name].js',
  },
 resolve: {
     extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
 },
 optimization: {
  minimize: true,
  minimizer: [
      new TerserPlugin({ // 使用压缩插件
          include: /\.min\.js$/
      })
  ]
},
 module: {
   rules: [
     {
       test: /\.jsx?$/, // jsx/js文件的正则
       exclude: /node_modules/, // 排除 node_modules 文件夹
        use: {
          // loader 是 babel
          loader: 'babel-loader',
          options: {
              // babel 转义的配置选项
              babelrc: false,
              presets: [
                  // 添加 preset-react
                  require.resolve('@babel/preset-react'),
                  [require.resolve('@babel/preset-env'), {modules: false}]
              ],
              /** 
               * 该配置使用babel-plugin-import 按需加载 antd样式，不加该配置信息antd组建的样式会无法显示。
               * babel-plugin-import 在 babel 运行时，将类似import { ModuleName } from 'libiaryName'的代码转化为组件所在的路径，这样实际引用的就是这个组件的模块而不是整个 Library
              */
              plugins:[
                '@babel/plugin-proposal-class-properties',
                "@babel/plugin-proposal-object-rest-spread",
                ["import", {libraryName: "antd", libraryDirectory: "lib", style:"css"}]
              ],
          }
        }
      },
      {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [ 'style-loader', 'css-loader','less-loader' ]
      },
    ]
  },
  devtool: 'source-map',
  // 使自己项目中依赖于宿主项目里的库，不重复打包,比如react，因为引入的肯定是react项目，所以不需要再将react打包进npm包
  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      root: 'React',
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      root: 'ReactDOM',
    },
    'lodash':'lodash'
  }
};

使用rollup

看一篇这个，再看一个底下的视频教程，就可以了。
https://zhuanlan.zhihu.com/p/95119407
https://www.bilibili.com/video/av89385215

rollup打包实践：https://www.cnblogs.com/tugenhua0707/p/8179686.html

npm i rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react @emotion/babel-preset-css-prop -D

查找外部模块：rollup-plugin-node-resolve

打包图片：rollup-plugin-img
https://github.com/alwaysonlinetxm/rollup-plugin-img

我的rollup.config

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import image from 'rollup-plugin-img';

export default {
  input:'./src/index.js',
  output:[
    {file:'./dist/lib/index.js',format:'cjs'},
    {file:'./dist/es/index.js',format:'esm'},
  ],
  globals: {
    "react": "react" // 指明 global.react 即是外部依赖 react
  },
  plugins:[
    babel(),
    resolve(),  // 这样 Rollup 能找到npm安装的modules
    commonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块
    image({
      limit: 10000
    })
  ],
  external:['react']
}