reactjs - 使用yalc时如何显示代码更改

Question

我学习yalc并完全按照它所说的去做，但是当我更改我所做的库代码时 yalc publish上，我看不到我的应用程序中的代码更改。
图书馆是notistack
脚步:

yalc 在通知栏中发布

然后我运行 yalc add notistack在我的应用程序中或 yalc link notistack

当我更改 notstack 代码并运行时 yalc push然后什么也没有发生，但文档说我应该在我的应用程序中更改代码？
我什至重新启动应用程序服务器并执行 yalc update notistack但notstack 代码更改不可见。
奇怪的是在我的应用程序 VSCode node_modules 中，我看到了 notistack代码更改。就像 yalc push正在向应用程序传播通知堆栈更改，但应用程序未使用它们。
更奇怪的是，当我重启VSCode并启动App Server进行调试时，仍然使用旧的notstack代码。
我测试删除 yalc remove notistack并重新启动笔记本电脑，然后再做一次 yalc add notistack .然后我再次看到旧代码。
我尝试在 Chrome 浏览器中硬重置空现金，但没有运气让它起作用。
当我去yalc商店查看时:
C:\Users\user\AppData\Local\Yalc\packages\notstack\1.0.10\src:
我看到了最新的代码。
在 Chrome Inspector 控制台中，我看到了旧代码，但在 Inspector 源下，有正确的代码。这太令人困惑了。我也不能在 Inspector 或 VSCode 中设置断点，也不能在 notstack 中设置断点。这就像 JavaScript 文件错位了。
这发生在 Edge 和 Chrome 中。
两天后我现在做什么才能继续工作我必须删除那个 Yalc 存储文件夹，C:\Users\user\AppData\Local\Yalc\packages\noti........ ...
删除应用项目中的 yalc.lock
删除 package-lock.json 和 node_modules
然后重新开始发布和添加通知堆栈。这很耗时，但有效。
如何在 Yalc 中显示代码更改？
用于通知堆栈的 package.json

{
    "name": "notistack",
    "version": "1.0.10",
    "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
    "main": "src/index.js",
    "module": "dist/notistack.esm.js",
    "types": "src/index.d.ts",
    "license": "MIT",
    "author": {
        "name": "Hossein Dehnokhalaji",
        "email": "hossein.dehnavi98@yahoo.com",
        "url": "https://github.com/iamhosseindhv/notistack"
    },
    "homepage": "https://www.iamhosseindhv.com/notistack",
    "repository": {
        "url": "git+https://github.com/iamhosseindhv/notistack.git",
        "type": "git"
    },
    "scripts": {
        "build": "tsdx build --transpileOnly --entry ./src/index.js",
        "prebuild": "npm run docs",
        "prepublishOnly": "npm run build",
        "docs": "rimraf typedoc.json && typedoc --tsconfig",
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
    },
    "peerDependencies": {
        "@material-ui/core": "^4.0.0",
        "react": "^16.8.0 || ^17.0.0",
        "react-dom": "^16.8.0 || ^17.0.0"
    },
    "dependencies": {
        "clsx": "^1.1.0",
        "hoist-non-react-statics": "^3.3.0"
    },
    "bugs": {
        "url": "https://github.com/iamhosseindhv/notistack/issues"
    },
    "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/notistack"
    },
    "contributors": [
        "Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
    ],
    "keywords": [
        "notistack",
        "enqueueSnackbar",
        "snackbarprovider",
        "useSnackbar",
        "multiple",
        "react",
        "javascript",
        "material-ui",
        "toast",
        "redux",
        "snackbar",
        "stacked",
        "notification",
        "material design",
        "hossein",
        "dehnokhalaji",
        "iamhosseindhv"
    ],
    "yalcSig": "073ef039ed1e473029c88b6ad9af16d9"
}

更新
添加 App package.json

{
  "name": "greta-thunberg-fff",
  "version": "1.2.9",
  "private": true,
  "homepage": "https://greta.portplays.com",
  "main": "index.js",
  "module": "dist/index.js",
  "files": [
    "dist",
    "README.md"
  ],
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/styles": "^4.11.2",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.2",
    "change-case": "^4.1.2",
    "classnames": "^2.3.1",
    "clean-tag": "^3.1.1",
    "clsx": "^1.1.1",
    "comma-separated-values": "^3.6.4",
    "crypto-js": "^4.0.0",
    "date-fns": "^2.23.0",
    "faker": "^5.5.3",
    "firebase": "^7.23.0",
    "formik": "^2.2.5",
    "framer-motion": "^2.9.5",
    "gsap": "^3.5.1",
    "history": "^5.0.0",
    "i": "^0.3.6",
    "lodash": "^4.17.19",
    "lodash.debounce": "^4.0.8",
    "mammoth": "^1.4.11",
    "material-table": "^1.69.2",
    "moment": "^2.27.0",
    "my-notistack-fork": "file:.yalc/my-notistack-fork",
    "normalize-wheel": "^1.0.1",
    "npm": "^7.11.2",
    "pdfjs-dist": "^1.8.357",
    "preval.macro": "^5.0.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-activity": "^1.2.2",
    "react-bootstrap": "^1.3.0",
    "react-chartjs-2": "^2.11.1",
    "react-data-grid": "^6.1.0",
    "react-detect-offline": "^2.4.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.4",
    "react-helmet": "^6.1.0",
    "react-motion": "^0.5.2",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^7.2.5",
    "react-resize-detector": "^5.0.7",
    "react-router": "^6.0.0-beta.4",
    "react-router-dom": "^6.0.0-beta.4",
    "react-scripts": "^3.4.0",
    "react-slick": "^0.27.3",
    "react-spring": "^8.0.27",
    "react-transition-group": "^4.4.1",
    "react-visibility-sensor": "^5.1.1",
    "rebass": "^4.0.7",
    "recompose": "^0.30.0",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "sass": "^1.41.1",
    "simplebar-react": "^2.3.5",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.1.1",
    "styled-system": "^5.1.5",
    "three": "^0.85.2",
    "typescript": "^3.9.7",
    "uuid": "^8.3.1",
    "xlsx": "^0.10.1",
    "yup": "^0.32.1"
  },
  "scripts": {
    "start": "set PORT=6545&& react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "axios": "^0.19.2",
    "babel-eslint": "^10.1.0",
    "clean-tag": "^3.1.1",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.2",
    "gh-pages": "^2.0.1",
    "prettier": "^2.1.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "^3.4.3",
    "rebass": "^4.0.7",
    "styled-system": "^5.1.5"
  }
}

Answer 1

如果我理解正确，我会看到两个问题:

fork npm 包

同时使用两个包

首先我得承认我不知道 yalc但是在快速浏览之后，我会说它似乎可以作为 npm 工作做;我将提供我的答案 npm , 我留给你使用 yalc 来调整我的答案;但我很确定这只是运行 yalc 的问题命令而不是 npm一，使用相同的参数。
1. fork 一个 npm 包
如果我理解正确，您不是 notistack 的作者，你有自己的fork，但我还是不明白它的名字。
难道你 fork 了 notistack你没有改名？
所以，当我们想要 fork 一个包时，我们需要给它一个新名字，比如 my-notistak-fork ; package.json文件应该类似于:

{
    "name": "my-notistack-fork",
    "version": "new version progression numbers",
    "license": "MIT",
    "author": {
        ... describe yourself
    },
    "homepage": "a new homepage, if you have one",
    "repository": {
        "url": "URL of your fork"
    },
    "bugs": {
        "url": "URL of issues in your fork"
    },
    "funding": {
        ... if you have one, describe it
    },
    "contributors": [
        ... who contribute to your fork
    ],
    ...
}

我只写了需要更改的字段，其他的可以保持不变(但这取决于您更改包的程度，无论如何这是另一个主题)。
用 npm publish 发布它命令。
现在您已发布 my-notistack-fork这是 notistack 的克隆(在你 fork 的版本中)。
2.同时使用两个包
与 npm这是一件微不足道的事情，而且效果很好。

在您本地克隆的根目录中 my-notistack-fork存储库发出 npm link命令。

在本地应用服务器存储库的根目录中，发出以下命令:

npm add my-notistack-fork

npm link my-notistack-fork

npm install

就这样。现在更改两个存储库中的每一个中的文件应该立即反射(reflect)您的调试/开发环境。
在这样做之前可能清理本地应用程序服务器存储库的根目录可能是一个好主意。我的意思是:

删除 node_modules目录

删除任何锁定文件( package-lock.json 和/或 yalc 一个)

删除对 notistack 的任何引用来自你 package.json文件