时间戳

首页 > 解决方案 > 发布：npm - 如何在每个构建上设置反应 npm 组件位置

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

问题描述

我是创建 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"

但是，我怎样才能对上面的代码或任何其他解决方案进行更改？

更新：

添加包.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"
  }
}

标签： node.jsreactjsnpm

解决方案

您需要编辑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",

文档

还需要将react和react-dom添加到peerDependencies而不是dependencies，因此它不会与您的代码捆绑在一起在您的 package.json 中为反应组件添加依赖项以做出反应的正确方法是什么

来自问题的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

但仍有一些警告。

推荐阅读