Hi! It's a guide where you going to can know how packaging project React, build and publish in a repository npm.
These guide will show the following topics:
- Explains the package.json-
- How to publish the project npm-package
- How use the component
{
"private": false,
"name": "@viamericas/viacheck-check-processing",
"version": "2.0.0",
"description": "A React component scan and deposit checks.",
"main": "build/index.js",
"scripts": {
"test": "jest",
"start": "webpack --watch --mode development --devtool inline-source-map",
"start:dev": "webpack-dev-server --watch --config ./webpack.config.dev.js",
"start:source": "webpack --watch --mode development --devtool source-map",
"build": "webpack --mode production",
"precommit": "lint-staged",
"lint": "eslint .",
"prepush": "yarn test"
},
"lint-staged": {
"*.{js,jsx}": [
"pretty-quick --staged",
"eslint src/ --fix",
"git add"
]
},
"eslintConfig": {
"extends": "react-app"
},
"repository": {
"type": "git",
"url": "https://github.com/Viamericas/base-project-npm-package.git"
},
"keywords": [
"react",
"check procesing page",
"scan"
],
"author": "Cindy Milena Lamadrid Jaraba",
"license": "ISC",
"peerDependencies": {
"@viamericas/viacheck-detail-check-processing": "^1.0.26",
"@viamericas/viam-alert-messages": "^2.0.8",
"axios": "^0.19.0",
"base64-arraybuffer": "^0.2.0",
"i18next": "^18.0.1",
"i18next-xhr-backend": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"utif": "^3.1.0"
},
"dependencies": {
"@viamericas/viacheck-detail-check-processing": "^1.0.26",
"@viamericas/viam-alert-messages": "^2.0.6",
"axios": "^0.19.0",
"base64-arraybuffer": "^0.2.0",
"i18next": "^18.0.1",
"i18next-xhr-backend": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-i18next": "^11.2.2",
"utif": "^3.1.0"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@testing-library/react": "^9.1.3",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"css-loader": "^3.2.0",
"eslint": "6.1.0",
"eslint-config-airbnb": "18.0.1",
"eslint-config-prettier": "^6.1.0",
"eslint-loader": "^3.0.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "1.7.0",
"husky": "^3.0.5",
"jest": "^24.9.0",
"lint-staged": "^9.2.5",
"prettier": "^1.18.2",
"pretty-quick": "^1.11.1",
"react-test-renderer": "^16.9.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.9.0"
}
}It's library for will transpilation your code jsx to javascript.
{
// They are the necessary components for code transpilation.
"presets": ["@babel/preset-env", "@babel/preset-react"],
// Here: You can add the necessary add-ons to interpret the writing style of the code.
"plugins": [
"@babel/plugin-proposal-class-properties",
"transform-object-rest-spread",
"transform-react-jsx"
]
}Follow the steps below:
- npm login
- npm build
- npm publish or npm publish --scope=organization name
- "--scope": is only necessary if the package name in the package.json file does not have the company name as a prefix. Always the company name must be with the "@-2 at the beginning and a separator "/" at the end in the package.json file: @viamericas/demo-react-to-npm-package
{
"name": "@viamericas/demo-react-to-npm-package",
....
}# In your package project:
npm build
npm publish
# Remember the company name in the package.json or --scope in npm command
# In the contnent project:
npm install @company_name/package_name # If is a private business package
npm install package_name # If is a public business package# In your package project:
# Make sure that the package name in the package.json file does not have the company name
npm start # you can use this command if you want to run development mode.
npm run start:source # If you want to run development mode with source_map, you can use this command if you are going to work with a debugger
npm link # This command will make a package works locally in your PC as temp package.
# In the contnent project:
npm link package_name # It's the same as running npm i package_name
- When you finish testing in development, remember to remove the npm link
# In the content project
npm unlink package_name
# In the package project
npm unlinkimport CheckProcessing from '@viamericas/viacheck-check-processing';
const params = { user, // login user agencyByDefault: branch, // branch token, // cognito token userBranchs: userBranchs.join(','), // All barch of the user userGroups, //Admin,Agent clientUrl: process.env.REACT_APP_API_URL, //Url of viacheck Api depositUrl: process.env.REACT_APP_URL_VIACHECK_DEPOSIT, //Url of viacheck deposit Api gateway ocrUrl: process.env.REACT_APP_URL_OCR, //Url of Ocr Api agencyName:"Dummy A00765", //Agency Name viacheckSettings:{ //Viacheck configurations "maxAmountPerCheck": 700.00, "maxAmountPerDay": 0.00, "ownLicense": false, "mva": 1.00, "stateCode": "AZ", "bank": "NABCO", "isGVerify": true, "endorsementText": "PAY TO THE ORDER OF @FLIB AS - SA@NCXXBFM. PAY TO THE ORDER OF VIAMERICAS CORP." }
<CheckProcessing
params={params} // parameters
language={language} // language. es, en
languageURL={process.env.REACT_APP_BUCKECT_LANGUAGE_URL} url to get the the traduction depending of the language selected
token={localStorage.getItem('token')} // cognito token
loadingImage="./assets/loading.gif" // gif for loading
scannerReady="./assets/scannerReady.png" // image to show when the scaner is ready
addNewStateRanger={addNewStateRanger} // Ranger method to configure scanner status
addOnLostConnectionRanger={addOnLostConnectionRanger} // Ranger method to configure the conection of scanner
addOnBusySocket={addOnBusySocket} // Ranger method to configure when the web socket is busy
/>