发布自己的第一个npm包

在如今的项目开发中,npm基本已经成为前端必不可少的一部分,作为一个合格的前端,了解并学习npm是相当必要的,接下来发布 我自己的第一个npm包。

第一步:注册

1.前往github和npm网站分别注册账号,在github上新建一个项目,并clone下来

2.clone下来后,进入项目执行npm init,一路center按到底。 3.接下来执行npm addUser 输入你在npm上面注册的用户名和密码与邮箱。

第二步:封装

1.在packeage.json里面加入

  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-istanbul": "^2.0.1",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
1
2
3
4
5
6
7
8
9
10

基于react,babel用于将es6转成es5,接下来执行npm install 安装依赖包。完成之后可以来编写代码。

2.项目结构

.babelrc负责编译将es6转为es5

{
    "presets": ['react', 'es2015',"stage-1"],
    "plugins": ['transform-react-jsx']
}
1
2
3
4

index.js作为入口文件

import HRate from './components/HRate';
module.exports = {
  HRate
};
1
2
3
4

HRate.js则为具体的组件

import React from 'react';

export default class HRate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 根据页面当中的星星的数量来设置默认值
      value: 0,
      arr: [1, 2, 3, 4, 5]
    };
  }

  componentWillReceiveProps(nextProps){
    if(this.props.value !== nextProps.value){
      this.setState({
        value: nextProps.value
      })
    }
  }

  // 返回数值
  changeRate = (data) => {
    const {disabled} = this.props;
    const {value} = this.state;
    if (!disabled && this.props.onChange) {
      this.props.onChange(value !== data ? data : 0);
    }
    this.setState({
      value: value !== data ? data : 0
    })
  };

  render() {
    const {arr, value} = this.state;
    const {size = 20, item = '☆'} = this.props;
    return (
        <span>
          {
            arr.map((ele, index) => (
              <span key={index}>
                {value >= ele
                    ? <span  style={{color:"#FFAC2D",fontSize:`${size}px`}} onClick={() => this.changeRate(ele)}>{item}</span>
                    : <span  style={{color:"#999999",fontSize:`${size}px`}} onClick={() => this.changeRate(ele)}>{item}</span>
                }
              </span>
            ))
          }
        </span>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

接下来在package.json中加入

  "main": "lib/index.js",
  script: {
    "build": "babel src --out-dir lib"
  }
1
2
3
4

运行npm run build将src目录下的文件输出到lib目录下

第三步:发布及运用

1.在项目中执行npm addUser, npm publish,发布成功后就可以在npm官网上看到自己发布的包

2.如果要运用发布的包,则可以执行

npm install hrate

import { HRate } from 'hrate';
...
render(){
    return <HRate />
}
1
2
3
4
5

最终效果

npm地址 hratw gitHub地址 hrate

最后更新时间: 10/8/2019, 7:41:17 PM