想要用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.defaultfilename: '[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 是 babelloader: 'babel-loader',options: {
    // babel 转义的配置选项babelrc: false,presets: [// 添加 preset-reactrequire.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安装的modulescommonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块image({
    limit: 10000})],external:['react']
}