打包一个react组件并发布到npm上

Posted 2023-03-09

参考技术A 我们随便取一个仓库名one-antd-test

复制仓库地址备用。

$ git clone [刚才复制的git地址]

$ cd one-test-antd

$ npm init (根据提示一路回车，最后yes)

$ npm i -S react react-dom

$ npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react @babel-loader css-loader style-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin webpack-node-externals

先看下我们预期的目录结构

webpack.config.js

.babelrc babel的配置文件

src/components/NewButton/index.js

src/components/NewButton/index.css

src/components/index.js

src/app.js

npm run build

如果出现 “This is probably not a problem with npm. There is likely additional logging output above.” 报错 可以尝试 $ rm-rf node_modules && npm i 删除之前的依赖重新安装。

根目录下建一个.gitignore文件 屏蔽一些不需要提交到git上的文件

$ git add .

$ git commit -m "create a package"

$ git push

$ npm login 登录 根据提示输入账号、密码、邮箱

$ npm publish (注意publish命令只能用npm 不能用cnpm之类)
如果发布不成功，改一下package.json里的name换个包名（有可能是包名和其他包重复了）