发布：npm - 如何在每个构建上设置反应 npm 组件位置

Question

我是创建 npm 包的新手。

我使用以下博客创建了我的第一个 react npm 包 - https://www.codementor.io/@peterodekwo/create-a-simple-react-npm-package-in-simple-steps-using-cra-w966okagi

它已成功发布，并且在反应中正常工作。

那么有什么问题。

当我安装我的 npm 包并实现它时。我必须使用下面的代码来导入。

import Card from 'owaiz-test/dist/Card';
import Button from 'owaiz-test/dist/Button';

https://prnt.sc/1cpkvsy

dist文件夹的问题。我不想用dist文件夹来写。

我想要类似的东西

import Card from 'owaiz-test/Card';
import Button from 'owaiz-test/Button';

我知道它正在从下面提到的 package.json 文件中编译代码。

"publish:npm": "rm -rf dist && mkdir dist &&  babel ./src/components -d dist --copy-files"

但是，如何更改上述代码或任何其他解决方案？

更新：

添加Package.json

{
  "name": "owaiz-test",
  "version": "0.1.1",
  "private": false,
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist &&  babel ./src/components -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/preset-react": "^7.0.0"
  }
}

更新 2

{
  "name": "owaiz-test",
  "version": "0.1.1",
  "private": false,
  "main": "dist/index.cjs.js",
  "browser": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "peerDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist &&  babel ./src/index.js -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/preset-react": "^7.0.0"
  }
}

Answer 1

您需要编辑 package.json

创建 index.js 文件作为包的主要条目

import Card from './components/Card'
import Button from './components/Button'

export { Card, Button }

在打包时使用 index.js：

"publish:npm": "...babel ./src/index.js ..."

设置主字段和浏览器字段（esm 包的模块可以跳过，TypeScript 定义的类型）：

  "main": "dist/index.cjs.js",
  "browser": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",

Docs

还需要将react和react-dom添加到peerDependencies而不是dependencies，这样就不会与您的代码捆绑在一起What is the correct way of adding a dependency to react in your package.json for a react component

UPD 来自问题的文章完全是废话，那些更好： https://blog.logrocket.com/the-complete-guide-to-publishing-a-react-package-to-npm/

https://dev.to/jimjunior/how-to-create-an-npm-library-from-react-components-2m2

但仍有一些注意事项。