Подготовка компонента React к публикации на npm

У меня есть компонент, который я хочу опубликовать в npm, я протестировал, просто импортировав его из папки компонентов в проекте.

Мне удалось его опубликовать, но теперь я получаю:

ERROR in ./node_modules/@//index.js Module parse failed: Unexpected token (11:8) You may need an appropriate loader to handle this file type.

Мой index.js выглядит следующим образом:

import React from "react"
import Main from "./bootstrap/containers/main"

export default class BootstrapTable extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
        <Main {...this.props} changePage = {(p) => this.props.changePage(p)}/>
    )
  }
}

Боковое примечание: мне не нужно менять конфигурацию веб-пакета, поскольку он должен работать как есть, как и многие другие пакеты, которые я использую в настоящее время.

Поэтому вам нужно превратить его в commonjs + es / js.

— 06.06.2018 03:16

Спасибо! глядя на это сейчас: jasonwatmore.com/post/2018/04/14/…

— 06.06.2018 04:57

reactjs npm

06.06.2018 03:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

616

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил это благодаря @zerkms за первый шаг, необходимый для моего исследования.

Шаги:

Установил веб-пакет и добавил следующую конфигурацию в webpack.config.js (мой index.js находится в ./src, а внешние элементы очень важны, поэтому вы не загружаете экземпляры реакции):

var path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [{
      test: /\.js?$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader'
      }
    }]
  },
  externals: {
    'react': 'react',
    'react-dom': 'react-dom',
    'react-bootstrap': 'react-bootstrap'
  }
}

Создал .babelrc в основной папке со следующим:

{
    "presets": [
        "react",
        "env",
        "stage-0"
    ]
}

Создал файл .npmignore с:

src
.babelrc
webpack.config.js

Создан файл package.json со следующим (ваши пакеты могут быть разными, но в основном просто установите то, что вам нужно «npm i package-name»):

{
  "name": "@scope/package-name",
  "version": "1.0.0",
  "description": "My component",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/myrepo.git"
  },
  "keywords": [
    "react",
    "bootstrap"
  ],
  "author": "Me",
  "license": "MIT",
  "peerDependencies": {
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0",
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "path": "^0.12.7",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}