完美调试，避免踩坑测试本地npm并发布-> 直接开干 npm init -y 再来粘贴一下package 为什么这么顺利

背景：需要导航头共用在我们几个老的项目中【没有使用微前端的方案】由于一些原因所以导航上面的内容引入的antd，那我们就开始重新写一下。不要在意细节，主要是引入antd的这个方案会出现一些问题。

需求 提取一个公共包，引入antd开发一个组件供大家使用

-> 直接开干 npm init -y

// src/index.tsx 
import React from "react";
import { Button, ButtonProps } from "antd";

export interface CustomButtonProps extends ButtonProps {
  // 移除了 customProp,因为我们不再需要它
}

export const CustomButton: React.FC<CustomButtonProps> = (props) => {
  return <Button {...props}>+ {props.children}</Button>;
};

export default CustomButton;

// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.tsx',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ tsconfig: './tsconfig.json' }),
    postcss(),
  ],
  external: ['react', 'react-dom', 'antd'],
};

再来粘贴一下package

{
  "name": "test-buttonv1",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "type": "module",
  "files": [
    "dist"
  ],
  "scripts": {
    "prepare": "install-peers",
    "build": "rollup -c",
    "dev": "rollup -c -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^26.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "install-peers-cli": "^2.2.0",
    "rollup": "^4.22.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "tslib": "^2.7.0",
    "typescript": "^5.6.2"
  },
  "dependencies": {
    "@rollup/plugin-babel": "^6.0.4"
  },
  "peerDependencies": {
    "antd": "^5.0.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

为什么这么顺利，顺利的不像是我写出来的东西，代码整体来看没有任何问题。

下一步我们开始本地调试

npm i  //安装依赖
npm build //打包输出
npm link // 本地连接

一切就绪没有任何问题。

随便使用cra创建一个项目，单纯的只贴一下app.tsx

这个文件ok了，什么也不用管了。

开始link本地包

// 在cra的项目中
npm link test-buttonv1

完全没问题，一切都那么的顺利。 开始最后一步 发射

npm start

wocao

有大佬知道这个问题怎么解决可以告知一下

尝试方案

• 修改react，antd版本，
• 不使用rollup打包
• 更新node
• 更新配置文件

以上都没有彻底解决这个问题。

恶心自己2天后，找到一个yalc，

直接上命令

npm i yalc -g

-> 第一次
// 本地npm的位置 
npm build // 每次修改都需要build
yalc publish // yalc会生成在本地的一个文件夹下，相当于发布在本地

// cra项目
yalc add test-buttonv1 // 安装本地依赖包 使用yalc来进行连接 可以看到本地项目有一个.yalc和自己的包是不是一致。


-> 第二次  第三次  N次。。。。。
//本地npm更新
npm build && yalc publish

//cra项目
yalc update 

成功！！！！

最后发布npm

npm login
npm publish

总结： 以后还是如果有第三方的包调试并且本地启动有误的话，还是使用yalc吧。