手摸手教你写react组件的npm并上传

作者: MJ 分类: react 发布时间: 2019-09-04 13:10

从有这个想法到最后实现,花了一个周末,中间查阅了很多资料,最后实现了,也算挺欣慰的,可以先看下下边文章(我自己维护的自己常用的模块汇总),后期有时间了出一下详细的教程。

想法产生的原因是,工作中会用到很多公共的模块,比如提示、loading等,就想到把他们单独摘出来,下次再用直接下载就行,而现在大家基本上用到的都是vue或者react等,就想到了npm,npm现在也很火很成熟,当然了,优秀的npm模块还是很多的,平时自己用的也比较多。

但是在自己的具体业务中还是会想要自己的用着舒服、更接近自己业务的模块,举个最简单的例子就是,我自己工作中用到的提示和loading,每次都复制一份都新项目中就效率比较低,现在也有很多公共的ui库做的也比较好,但是我们会遇到比较简单的业务 ,我自己就不考虑引入大型库(虽然可以按需加载或者现在ui库也提供了部分单独引入一些模块的功能,不在讨论范围)。

扯远了,大家可以直接去下边的地址下载示例代码,直接改造自己的插件模块。

示例代码下载( 欢迎star

https://github.com/majiang666/react-simple-tips

一:直接下载下来之后,运行

yarn install

二:修改核心代码文件 src/lib/Tips.js和 src/lib/Tips.css,所有的功能都在这里写

import React from "react";
import "./Tips.css";
const Tips = ({ showFlag,location,distance,tipsMsg }) => {
  let styles = {};
  (location === 'center') ? 
    styles.location = {
      top: '50%',
      transform:'translateY(-50%)'
    } :
    styles.location = {
      [`${location ? location : 'bottom'}`]:(distance ? distance : '50px')
    }

  return(
    (showFlag ? showFlag : false) ? 
    (
      <div className="tips fadeInUp" style={ styles.location }>
        <span className="tips-box">
          {tipsMsg ? tipsMsg : '提示'}
        </span>
      </div>
    ) : 
    (
      null
    )
  )
};

export default Tips;

三:修改src/lib/index.js导出文件

import Tips from "./Tips";
export { Tips };

四:src/index.js,这个用来测试我们的插件代码功能

import React from 'react';
import ReactDOM from "react-dom";
import { Tips } from "./lib";
let showFlag = true;//true false
let location = "bottom";//top center bottom
let distance = '50px';//默认50px,只有location为top/bottom生效
let tipsMsg = "系统错误";//默认文案为:提示
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      flag:false
    }
  }
  funs = () => {
    this.setState({
      flag:true
    });
    setTimeout(() => {
      this.setState({
        flag:false
      });
    }, 2000);
  }
  render(){
    return(
      <div>
        <h1>Hello React</h1>
        <Tips 
        showFlag = { this.state.flag }
        location = { location }
        distance = { distance }
        tipsMsg = { tipsMsg }
        />
        <button onClick={this.funs}>tips</button>
        <h1>Hello React</h1>
      </div>
    )
  }
}
  
ReactDOM.render(<App />, document.getElementById("root"));

五:修改我们的package.json文件,比如

"name": "react-simple-tips",
  "version": "0.1.6",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [
    "dist"
  ],
  "keywords": [
    "react",
    "tips",
    "prompt"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/majiang666/react-simple-tips"
  }

六:直接运行

yarn build

七:注册一下npm账号, https://www.npmjs.com/signup

八:然后在终端中运行登录npm的命令

npm login

九:然后在终端中运行发布的命令

npm publish

最后一步大家要注意,每一次发布都需要改一下package.json中的 “version”: “0.1.6”, 不然发布不会成功的,还有就是发布的时候,自己写的插件名不能跟已有的npm包名字冲突。

最后,兄弟版vue的实现方式直接参考 :https://juejin.im/post/5bbab9de5188255c8c0cb0e3

也可以直接用写好的模板,直接下载下来,开发自己功能模块就行
https://github.com/majiang666/vue-simple-tips

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注