准备要在 npm 上发布的 React 组件 [英] Preparing a React component to publish on npm

问题描述

我有一个要在 npm 中发布的组件，我只是通过从项目的 components 文件夹中导入它进行了测试.

我设法发布了它，但现在我得到了:

<块引用>

./node_modules/@//index.js 模块中的错误解析失败:意外令牌 (11:8) 您可能需要一个合适的加载程序来处理这种文件类型.

我的 index.js 如下:

从react"导入 React从./bootstrap/containers/main"导入 Main导出默认类 BootstrapTable 扩展 React.Component {构造函数(道具){超级(道具)}使成为() {返回 (<Main {...this.props} changePage={(p) =>this.props.changePage(p)}/>)}}

旁注:我不需要更改 webpack 配置，因为它应该可以正常工作，就像我目前使用的许多其他包一样.

解决方案

我解决了，感谢@zerkms 为我的研究迈出了第一步.

步骤:

1. 安装了 webpack 并将以下配置添加到 webpack.config.js(我的 index.js 在 ./src 中，并且外部组件非常重要，因此您不会加载 react 实例):

<块引用>

var path = require('path');模块.出口 = {模式:'生产'，条目:'./src/index.js',输出: {路径:path.resolve('dist'),文件名:'index.js',图书馆目标:'commonjs2'},模块: {规则:[{测试:/\.js?$/,排除:/(节点模块)/，用: {loader: 'babel-loader'}}]},外部:{'反应':'反应'，'react-dom': 'react-dom','反应引导':'反应引导'}}

2. 在主文件夹中创建了一个 .babelrc，内容如下:

<块引用>

<代码>{预设":["反应","环境",阶段-0"]}

3. 创建了一个 .npmignore 文件:

<块引用>

src.babelrcwebpack.config.js

4. 使用以下内容创建一个 package.json 文件(您的软件包可能不同，但基本上只安装您需要的npm i package-name"):

<块引用>

<代码>{"name": "@scope/包名","版本": "1.0.0","description": "我的组件","main": "dist/index.js",脚本":{构建":webpack"},存储库":{"类型": "git","url": "git+https://github.com/myrepo.git"},关键词":["反应",引导程序"],"作者": "我","许可证": "麻省理工学院",peerDependencies":{反应":^ 16.4.0"，反应引导":^0.32.1"，反应域":^ 16.4.0"},开发依赖":{反应":^ 16.4.0"，反应引导":^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","路径": "^0.12.7","webpack": "^4.5.0","webpack-cli": "^2.0.14"}}

5. npm 安装
6. npm 运行构建
7. npm 版本 1.0.0(更新增量)
8. npm 发布

完成！

这些文章很有帮助:

• React + npm - 如何将 React 组件发布到 npm
• 如何创建 React 组件并在 NPM 上发布
• 使用 webpack 4 构建 React 组件的指南，发布到 npm，并将演示部署到 GitHub Pages

I have a component that I want to publish in npm, I tested simply by importing it from the components folder in the project.

I managed to publish it, but now I get:

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

My index.js is as follows:

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)}/>
    )
  }
}

Side note: I shouldn't need to change the webpack config as it should work as it is, like many other packages I am currently using.

解决方案

I solved it, thanks to @zerkms for the first step needed for my research.

Steps:

1. Installed webpack and added the following config to webpack.config.js (my index.js is in ./src and externals are very important so you don't load instances of react):

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'
  }
}

2. Created a .babelrc in the main folder with the following:

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

3. Created an .npmignore file with:

src
.babelrc
webpack.config.js

4. Created a package.json file with the following (your packages might be different but basically just install what you need "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"
  }
}

5. npm install
6. npm run build
7. npm version 1.0.0 (increment for updates)
8. npm publish

done!

These articles were great help:

• React + npm - How to Publish a React Component to npm
• How to create a React component and publish it on NPM
• A guide to building a React component with webpack 4, publishing to npm, and deploying the demo to GitHub Pages

这篇关于准备要在 npm 上发布的 React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！