1

Estou com uma duvida, preciso criar um componente em react js é publicar ele no NPM.

eu consegui publicar ele, porem ele fica dando erro para transpilar de js para jsx ou de jsx para js.

então quando eu importo ele para meu projeto ele não reconhece as classes no import

como eu faço esse procedimento de publicação no NPM ?

2
  • Coloque o processo de publicação e também o código desse componente!
    – novic
    Commented 7/11/2019 às 16:42
  • Consegui resolver meu problema Virgilio Novic! Muitissimo Obrigado!!
    – user164319
    Commented 11/11/2019 às 17:59

1 Resposta 1

2

Conseguir obter o resultado esperado assim:

inserir a descrição da imagem aqui

Esse foram os arquivos necessarios..

/// Abaixo o código do .babelrc
{
  "presets": [
      "react",
      "env",
      "stage-0"
   ]
}


/// Abaixo segue o código do package.json
{
"name": "<nome do seu NPM>",
"version": "0.0.1",
"description": "React Validate Registro",
"keywords": [
    "validar",
    "CPF",
    "CNPJ"
],
"main": "./lib/index.js",
"license": "MIT",
"scripts": {
    "build": "webpack"
},
"peerDependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
},
"devDependencies": {
    "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",
    "prop-types": "^15.6.0",
    "react": "^16.11.0",
    "react-dom": "^16.0.0",
    "react-input-mask": "^2.0.4",
    "react-toastify": "^5.4.0",
    "reactstrap": "^8.1.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^3.2.1"
}



/// Por ultimo o código referente ao webpack
var path = require('path');

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

Após essas configuração, basta colocar no console (npm run build) Depois (npm adduser) que vai pedir seus dados de acesso do npm. logo em seguida (npm publish)

Detalhe

Crie seu componente dentro da pasta src com o nome index.js

Você deve fazer log-in para responder a esta pergunta.