最近公司需要把手头的一个项目做成npm包，方便给合作伙伴使用然后就经过了一系列的踩坑，还好最终完成了需求。 写下来做个分享，万一哪位jy能用上也是好的。总结下来的坑主要有：
1.打包时需要在package.json里面加上 "main": "build/main.js”,此路径是打包文件的存放路径，为了告诉使用包的入口在哪里
1）需要声明类型时需要在根目录加上 index.d.ts 增加导出组件类型的声明，在package.json里面加上 "typings": "index.d.ts",
2.打包时在webpack里面需要设置打包的入口 webpackConfig.entry = "./src/export.tsx”; 因为我们的react的index.tsx一般都是有 ReactDOM.render(, document.getElementById("root")); 所以如果我们在index.tsx里面直接导出组件，在其他react项目引用时可能会导致项目被这个组件给覆盖.可以在打包时手动注释代码 ，为了方便我自己加了一个export.tsx文件在里面做导出。
3.导出时至少要有一个export default xxxx ，也可以 export default {xxxx} 不然会报undefine的foreach错误
4.Webpack 有时需要设置下面参数: webpackConfig.output.filename = "main.js”;//对应package.json里面加上 "main”的路径。 webpackConfig.output.libraryTarget = "umd"; webpackConfig.output.libraryExport = "default"; webpackConfig.output.library = "maintest";
5.如果引用打包好的组件时遇到Error: Minified React error #321 错误是因为项目中出现两了两个react实例，需要在打包项目的webpack 的externals中配置 webpackConfig.externals = { ...webpackConfig.externals, react: { commonjs: "react", commonjs2: "react", amd: "react", root: "React", }, "react-dom": { commonjs: "react-dom", commonjs2: "react-dom", amd: "react-dom", root: "ReactDOM", }, };
，然后在package.json里面把react和react-dom放在peerDependencies里面
peerDependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" },
6.如果有组件样式，可用
new MiniCssExtractPlugin({
filename: cbridgeWidget.css,
}),
单独导出css 在使用此包的其他项目中引用。
7.静态图片资源打包后引用不显示可用 { test: /.(png|jpe?g|gif|webp)$/, type: "asset/inline", parser: { dataUrlCondition: { maxSize: 11 * 1024,//小于11kb的图片会被专程base64 }, }, }, 方式将图片转位base64.经过实践svg图片目前不能转化，目前没有找到解决svg的办法。也可以把图片上传服务器再引用。
8.本地调试可用npm link 的方式，打包项目执行npm link。 引用的项目执行npm link+包名（打包项目的package.json里面的name） 更好的方案yalc！（自行搜索，查看使用方法）
