Используя самодельный npm пакет в реакции. Не удалось скомпилировать

Question

Я следовал https://zellwk.com/blog/publish-to-npm/, чтобы создать свой собственный пакет npm (https://www.npmjs.com/package/demo-to-publish). Структура папок моего пользовательского пакета выглядит следующим образом:

1. sr c -> index. js
2. node_modules
3. Элемент списка
4. Lable. js
5. пакет. json
6. webpack.config. js

Содержимое моего пакета. json как

{
  "name": "demo-to-publish",
  "version": "1.0.5",
  "description": "testing publishing to npm",
  "main": "./src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "react": "^16.12.0"
  }
}

Содержимое моего индекса. js в папке sr c выглядит следующим образом:

import React, { Component } from "react";

export default class Button extends Component {
  render() {
    return (
      <div>
        <button>Click me</button>
      </div>
    );
  }
}

Содержимое моего webpack.config. js как следующим образом:

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env","@babel/preset-react"]
          }
        }
      }
    ]
  }
};

После публикации в npm я установил его, используя npm i demo-to-publish в моем новом приложении реагировать. Я написал следующий код для использования этого пакета.

import Button from "demo-to-publish";
<Button/>

Ошибка, с которой я сталкиваюсь, приведена на скриншоте ниже.

Как решить эту проблему? Помогите мне, так как я впервые публикую пакет npm.

Answer 1

Issue

Проблема в том, что your code is not transpiled, и поэтому он не должным образом распознается браузером и, следовательно, ошибки. По умолчанию create-реагировать-приложение не переносит node_modules .
Вы можете найти больше здесь в выпуске github https://github.com/facebook/create-react-app/issues/3889

В модуле узла нет ошибок, только проблема с транспиляцией.

---

Исправлено

После прохождения репо (https://github.com/prak-mtl/demo-to-publish), есть 2 возможных исправления, которые могут быть сделаны и перечислены ниже. Рекомендованным решением будет 2-е , но для этого потребуется, чтобы вы выполнили сборку, а затем опубликовали sh

Решение 1

. Для этого вам необходимо внести некоторые изменения в и CRA и npm репо. Вам необходимо добавить конфигурацию в конфигурацию babel , чтобы перенести указанный модуль узла c. Поскольку конфигурация CRA не может быть изменена (если вы не извлекли код), вам необходимо добавить дополнительную конфигурацию, используя опцию override.

- Выполните этот шаг в демонстрационной версии sh repo

Внутри пакета. json пакета npm (т.е. https://github.com/prak-mtl/demo-to-publish/blob/master/package.json), вам нужно изменить основной путь, так как мы будем переносить код в новую папку lib. Измените его на ./lib/src/index.js и повторно напечатайте sh пакет.

- Выполните эти шаги в приложении CRA

1. Создайте файл (<any-name>.js, здесь скажем babel_override.js)
2. Добавьте следующий код в babel_override. js:

module.exports = {
    overrides: [
        {
            test: ["./node_modules/demo-to-publish"],
            presets: ["@babel/preset-react"]
        }
    ]
}

Это будет использоваться для переноса кода внутри demo-to-publish в папка node_modules в приложении CRA

Вы должны установить @babel/preset-react. Если нет, установите его.

Удалите и переустановите пакет demo-to-publi sh в приложении CRA.

Перед запуском проект, код должен быть передан, поэтому выполните следующую команду в терминале

NODE_ENV=development ./node_modules/.bin/babel ./node_modules/demo-to-publish -d ./node_modules/demo-to-publish/lib --config-file ./babel_override.js

• `NODE_ENV может быть разработкой, тестированием или производством
• -d ./node_modules/demo-to-publish/lib будет публиковать перенесенный код в папке lib

• --config-file - конфигурация переопределения babel, созданная на шаге 1. Вы должны получить успешный результат типа: Successfully compiled 3 files with Babel.

• Запустите проект agian, теперь он должен работать нормально

Решение 2 ( Рекомендуется )

Этот подход требует от вас собрать пакет npm. Поскольку у вас уже есть веб-пакет, это не должно быть проблемой. Следующие шаги необходимо выполнить в demo-to-publish repo

1. Добавить цель библиотеки как commonjs2 в выходных данных. Конфигурация webpack будет выглядеть примерно так:

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    libraryTarget: 'commonjs2' //This one the most important line, others things will remain same
  },
  module: {
    //Other code
  }
};

Это будет использоваться для вывода сборки в папку dist.

В пакете. json (https://github.com/prak-mtl/demo-to-publish/blob/master/package.json) нам нужно обновить основной атрибут. Измените его значение с ./src/index.js на ./dist/index.js Запустите npm Запустите сборку в репозитории. Он должен создать новую папку dist, содержащую один index.js файл внутри него Publi sh пакет npm сейчас

Затем, в приложении CRA установите пакет и работайте в обычном режиме. Это должно работать нормально.

Надеюсь, это поможет. Возврат для любых сомнений.

Answer 2

Если ваш компонент класса не имеет какого-либо состояния, рекомендуется использовать только функциональный компонент.

import React from "react"
export default const Button = () => (
  <div>
    <button>Click me</button>
  </div>
)