Package react components

< H2 > Target: < / H2 >

I want to write a simple react component and package it into a npm package. Other projects can be directly installed through npm and then directly used in jsx through import

. < H2 > current operation: < / H2 >

create a new npm package, and then specify the main field in the package.json to the specified js file. The code in the js file is: 

   


 if you use babel-loader to jsx syntax in the component package with webpack, the packaged dist will contain the react dependencies in the current project, and when others use it, it will lead to code duplication. How can I directly export jsx the component? if not, how do I need to do it? my requirement now is to develop a react plug-in, but react and webpack are novice! Tears run ~
React.js
Dec.08,2021

components are packaged using babel to translate and then release. babel translation is just to convert the syntax of a file, such as jsx into js , es6 into es5 and so on, and the dependent code will not be packaged into the result.

  • .babelrc 
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": "> 0.25%, not dead"
      }
    ],
    "@babel/react"
  ]
}
  • use babel to translate 
babel -d dist libs
  • Source 
import React from 'react'

class ScrollView extends React.Component{
    render() {
        return (<div>
            scroll view
        </div>)
    }
}

export default ScrollView
  • after translation (a big block, omit some) 
function (_React$Component) {
  _inherits(ScrollView, _React$Component);

  function ScrollView() {
    _classCallCheck(this, ScrollView);

    return _possibleConstructorReturn(this, _getPrototypeOf(ScrollView).apply(this, arguments));
  }

  _createClass(ScrollView, [{
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, "scroll view");
    }
  }]);

  return ScrollView;
}(_react.default.Component);

var _default = ScrollView;
exports.default = _default;
  • Source Code Warehouse (a simple one opened)

https://github.com/followWinter/react-better-scroll.git

I think this will help you build your own components and upload them to npm
https://github.com/allan2code.

.

Previous: Can't you click on the pie chart of v-chart, the chart component of vux?

Next: When the Google console appears, it displays the previous style

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb08cc-22e3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb08cc-22e3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?