npm发布组件库怎么配置webpack？

Question

这是我的webpack配置

// 导入处理路径的模块
const path = require('path');
const webpack = require("webpack");

// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    // 项目入口文件
    entry: path.resolve(__dirname, 'src/main.ts'),
    // 项目输出文件
    output: {
        filename: 'bundle.js',
        libraryTarget: "umd", // 不用省略
        path: path.resolve(__dirname, 'dist'),
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.json'],
    },
    // 文件处理规则
    module: {
        rules: [{
                test: /\.(ts|js)x?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(ts|tsx)$/,
                loader: "ts-loader",
            },
            {
                test: /\.css$/,
                use: [{
                        loader: "style-loader",
                    },
                    {
                        loader: 'css-loader',
                    }
                ],
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [{
                    loader: 'url-loader',
                    // 降低loader版本，启用CommonJS模块语法
                    options: {
                        esModule: false
                    }
                }]
            },
            {
                test: /\.less$/,
                use: [{
                        loader: 'style-loader', // 从JS字符串创建样式节点
                    },
                    {
                        loader: 'css-loader', // 将CSS转换为CommonJS
                        options: {
                            modules: {
                                //生成随机类名
                                localIdentName: "cosmo-[local]-[hash:5]"
                            }, //开启css模块化
                        },
                    },
                    {
                        loader: 'less-loader', // 编译less为CSS


                    },
                ],
            }
        ]

    },
    externals: [{
        lodash: '_',
        react: 'react',
        antd: 'antd',
    }, ],
    optimization: {},
    // 插件
    plugins: []
}

这是我的packages.json

{
  "name": "package1_test",
  "version": "1.1.0-alpha.0",
  "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "main": "dist/bundle.js",
  "typings": "dist/index.d.ts",
  "module": "dist/main.d.ts",
  "files": [
    "dist"
  ],
  "mode": "production",
  "directories": {
    "lib": "dist"
  },
  "scripts": {
    "dev": "webpack --config webpack.config.js --watch --progress --colors --mode=production",
    "build": "webpack --config webpack.config.js --progress --colors"
  },
  "alias": {
    "react": "../../node_modules/react",
    "react-dom": "../../node_modules/react-dom/profiling"
  },
  "peerDependencies": {
    "antd": "^4.10.3",
    "react": ">=16",
    "react-dom": ">=16"
  },
  "devDependencies": {
    "@types/react": "^16.9.25",
    "@types/react-dom": "^16.9.5",
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-plugin-import": "^1.13.3",
    "css-loader": "^3.4.2",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "style-loader": "^1.1.3",
    "ts-loader": "^6.2.2",
    "typescript": "^3.8.3",
    "url-loader": "^4.0.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  },
  
  "dependencies": {
  
  }
}

这是我的入口文件

import Main from "./index.tsx"
export  {
  Main
} 

发布后获取不到我的组件只能用 export default Main才行，但是我想要的是那种 import {Button,List} from "antd"这种形式的也就是多组件库发布，应该怎么配置呢？请教诸位大神
这是我的项目地址项目托管地址

Answer 1

项目中要安装babel-plugin-import插件，要配置babel.config.js。组件库的每一个组件要分别导出成单个文件。你看看插件的文档，就知道它干了什么了

Answer 2

参考一下发布了的npm包: https://github.com/ruofee/vue...

package.json中的main属性就是npm包的入口, 像上边这个项目, package.json是这么写的:

{
    ...,
    "main": "./lib/vue-filter-box.umd.min.js",
    ...
}

当我们引入这个包的时候:

import VueFilterBox from 'vue-filter-box';

实际上就是:

import VueFilterBox from 'vue-filter-box/lib/vue-filter-box.umd.min.js';

望采纳