如何发布自己的NPM包（react模块）及使用

npm 包目录结构，以QueryBar为例

├── lib/                          // 编译目录
    ├── QueryBar/                 // 单个组件目录
        ├── index.js           // 单个组件
        ├── index.less        // 单个组件样式 
    ├── index.js/               //导出组件
└── src/                           // 源码目录
    ├── QueryBar/                 // 单个组件目录
        ├── index.js           // 单个组件
        ├── index.less        // 单个组件样式 
    ├── index.js/               
├── index.js   //整体index.js 
├── package.json                    
├── package-lock.json                            
└── readme.md      //文档，组件介绍及使用

注册NPM 账号

注册地址：https://www.npmjs.com/。

初始化自己要发布的项目

- 新建项目比如（npmdemo）
- 初始化项目 npm init，新建package.json

安装TypeScript,可选安装

- 全局安装typescript
sudo npm install -g typescript （已安装的跳过）
- 项目内安装typescript
sudo npm install  typescript  --save-dev
- 初始化TypeScript和Webpack的工具，全局安装（安装过，可跳过）
npm install tsc-init -g
- 项目安装tsc，生成tsconfig.json
npm install tsc-init

新建index.js文件

module.exports = "";

项目新建lib文件和src文件夹

src是源文件夹，lib是编译过后的文件夹

把react 项目里componentsQueryBar放入src

-新建index.js（在src下）
import QueryBar from './QueryBar';
export {QueryBar};
- 安装 npm install antd

安装编译

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-istanbul babel-preset-es2015 babel-preset-react babel-preset-stage-0 react react-dom

配置package.json

{
  "name": "zsm",
  "version": "1.0.1",
  "description": "zsm",
  "main": "./lib/index.js",
  "directories": {
    "lib": "lib"
  },
  "files": [
    "lib",
    "src"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "rm -rf lib && mkdir lib",
    "lib": "npm run clean && babel src --out-dir lib --copy-files",
    "prepublish": "npm run lib"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-istanbul": "^5.2.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "dependencies": {
    "antd": "^3.23.2"
  }
}

登录npm,发布自己的npm包

npm login  
用户名、密码、邮件

发布包

npm publish

删除发布的包

sudo npm unpublish 包名 --force

---

使用自己的发布包

安装

//npm
npm i dexp123
//yarn
yarn add dexp123

使用包

import { QueryBar } from 'zsm'; //我是文件是有带QueryBar文件夹，所以引用是{}，如果src里是直接 index.js无文件夹，是不带{}的引用
<QueryBar dataSource={this.queryBarData} handleSearch={this.handleSearch} />