@lanqiang/react-demo

7.0.1 • Public • Published

npm发布注意事项: 注册 npm 账户:

在这里](https://www.npmjs.com/) 注册一个 npm 账号 npm login

然后你会得到一个让你输入username、password 和 email 的提示,把它们填在相应的位置。

关于 package.json 需要注意的点

package.json 里面的配置信息非常重要,我解释一下几个重要的配置。

name: 包名,如果你学习的话建议加一个 scoped,就是我上面的 @taoweng/react-demo 而不是 react-demo,因为 npm 包特别的多,很容易重复。这样这个包就会是私有的,可以通过 npm publish --access=public 将这个包变为共有的包。 version: 包的版本,每次发布包的版本不能和上次一样。详细规范可见这里 description:包的简介。 repository:适合写 Github 地址,建议写成::username/:repository。 license:认证。不知道该用什么的,就写MIT 吧。 main:包的入口文件。就是引入这个包的时候去加载的入口文件。 keywords:添加一些关键词更容易使你的包被搜索到

在 GitHub Pages 上发布一个在线 demo 发布在线 demo 可以直接用 Github Pages 来帮助我们托管,通过 webpack 构建生产环境版本,然后发到 Github 上去即可。

首先去 Github 创建一个用来存放你组件代码的仓库。

把你的项目初始化成 git 项目 git init

##首次搭建组件包,需在终端执行此命令,连接远程仓库 git remote add origin https://github.com/lanqiang101/-lanqiang-react-demo.git

接下来我们可以安装 gh-pages 来帮助我们发布到 github pages: npm i gh-pages -D 然后我们就可以 build 项目之后再将 expamples/dist 发布到 gh-pages 分支: webpack --mode production npm run build gh-pages -d examples/dist

这个时候,我们可以通过 lanqiang101.github.io/-lanqiang-react-demo/ 访问到我们写的 lanqiang101 是 github 的 -lanqiang-react-demo/ 是仓库名,注意改成你自己的

这些命令我们可以写成 npm-scriprt,方便后面继续发布,所以我们增加两个脚本:

{ "name": "@lanqiang/react-demo", "version": "7.0.0", "description": "第一个npm组件练习", "repository": ":username/:repository", "main": "index.js", "scripts": { "start": "webpack-dev-server --open development", "build": "webpack --mode production", "compile": "npx babel src --out-dir lib", "deploy": "gh-pages -d example/dist", "publish-demo": "npm run build && npm run deploy" }, "keywords": [ "npm组件", "组件发布", "npm发布步骤" ], "author": ":username", "license": "MIT", "devDependencies": { "@babel/cli": "^7.2.3", "@babel/core": "^7.2.2", "@babel/preset-env": "^7.3.1", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "gh-pages": "^2.2.0", "html-webpack-plugin": "^3.2.0", "webpack": "^4.29.0", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" }, "dependencies": { "@babel/polyfill": "^7.2.5", "react": "^16.7.0", "react-dom": "^16.7.0" } }

添加了 deploy 脚本和 publish-demo,以后需要发布 demo 的时候只需要 npm run publish-demo即可

结语 以后发布新版本的时候,只需要更改一下 package.json 里面的 version 版本号,然后执行 npm publish 和 npm run publish-demo 就可以同步 npm 和 demo

npm publish --access public:发布公共组件,免费,私包需要收费

Package Sidebar

Install

npm i @lanqiang/react-demo

Weekly Downloads

2

Version

7.0.1

License

MIT

Unpacked Size

137 kB

Total Files

14

Last publish

Collaborators

  • lanqiang