React npm包开发
前期工作
1.搭建webpack 快速搭建
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"
]
}
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包的发布