开发React组件包(npm)

125 阅读1分钟

React npm包开发

前期工作

1.搭建webpack 快速搭建

image.png 2.配置loader

由于上述的配置无法解析react语法,所以需要下载解析插件(loader)

1. npm i @babel/preset-react --save-dev
2.// webpack.config.js  rules中添加
{
    test: /\.(js|jsx)$/i,
    use: ["babel-loader"],
    exclude: /node_modules/
  },
3. 创建.babelrc 文件
{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
    ]
}

image.png

3.开发组件包

npm i react react-dom --save

import React from 'react'
import ReactDom from 'react-dom'
const Topo = ()=> {
    return <div>Topo</div>
}
ReactDom.render(<Topo></Topo>, document.getElementById('app'))
export default Topo

4.发布

前期发布的文章中存在npm包的发布