系统环境
    **

    • 安装node.js
    • 安装npm

    • 开发工具WS、VSCODE

      PS:具体的安装方式在这里不作具体的说明

    准备工作

    需注册npm账号，注册成功后邮箱必须验证。npm官网：https://www.npmjs.com/

    操作步骤

    一、创建项目，操作命令（可用开发工具完成）如下**：

    • mkdir afc-npm —创建项目目录
    • cd afc-npm —进入项目根目录
    • npm init —设置package.json的初始值

    package.josn的相关属性，如图所示：
    image.png
    属性说明：

    • name —包名，不能跟已发布的npm包重名
    • version —版本号
    • description —描述信息
    • homepage —官网url
    • author —作者
    • contributors —其它贡献者
    • dependencies –依赖包列表
    • repository —包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上；
    • main —main 字段指定了程序的主入口文件，一般是编译后的程序入口文件(“./lib/index.js”)

    二、编写相关组件

    目录结构，仅供参考**
    image.png

    目录说明
    ├── lib —编译后文件
    │
    ├── AfcList
    │ ├── index.js
    │
    ├── index.js —组件入口
    ├── node_modules —依赖包
    ├── src
    —组件原文件
    │
    ├── AfcList
    │ ├── index.js
    ├── .babelrc
    ├── .gitignore —过滤文件
    ├── package.json
    └── package-lock.json

    项目所需依赖，直接安装即可：
    npm install —save-dev rimraf babel-cli babel-core babel-loader babel-plugin-istanbul babel-preset- es2015 babel-preset-react babel-preset-stage-0 react react-dom

    自定义组件，如图：
    image.png
    组件入口，如图：
    image.png

    创建.babelrc文件，配置bable对es6(es2015)进行转换，如图：
    image.png

    创建脚本命令，如图：
    image.png**
    cleanLib 用来清理lib中已有的内容
    bableBuild 用bable把src中的文件打包编译到lib中
    prepublish 执行上面两个脚本，prepublish会在npm publish前执行

    三、NPM PUBLISH时过滤部分文件

    npm publish 的时候会把项目目录里面所有的文件都publish到npm仓库中， 但是往往有一部分目录和文件不想发布上去，比如项目的源码、编译脚本等等信息。

    方法一：使用 .gitignore 设置忽略哪些文件

    方法二：使用 .npmignore 设置忽略哪些文件

    方法三：使用 package.json 的 files 字段选择发布哪些文件

    直接在 package.json 中 files 字段设置发布哪些文件或目录。这个优先级高于 .npmignore 和 .gitignore。

    以.gitignore设置为列，如图：
    image.png

    四、发布组件到NPM平台
    **
    1、编译程序，执行package.json文件定义好的命令脚本：
    image.png

    2、发布前把package.json文件的main属性改为编译后的程序入口，每次发布版本号必须高于上个版本号。如图：
    image.png

    3、最后的发布，请不要把npm注册的资料给忘了。

    a) 执行npm adduser命令,依次输入npm登录账号、密码、验证过的邮箱地址

    image.png

    b) 执行npm publish完成最后的发布：

    image.png

    PS：发布成功后的样子，如图

    image.png

    登录npm平台（https://www.npmjs.com/）,个人中心可以看到自己发布的npm包：
    image.png