发布一个npm包（很简单的react-tiny-list-view包）

一、安装node.js

安装配置步骤

二、创建npm包

目录

用npm-helloworld为例

• npm-helloworld
  • index.js
  • package.json

简单的写了对应js文件

index.js

function hello(name) {
  console.log(`Hello ${name}!`);
}
hello('world');
复制代码

package.json（通过npm init来生成此文件）

{
  "name": "sexcyin-helloword",
  "version": "1.0.0",
  "description": "npm包开发测试",
  "main": "index.js",
  "files": ["lib"],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "sexcyin",
  "license": "ISC"
}
复制代码

• main: 这里是我们组件的入口文件。开发者在 import 我们的组件的时候会引入这里 export 的内容
• files: 申明将要发布到 npm 的文件。如果省略掉这一项，所有文件包括源代码会被一起上传到 npm

开发完成后，准备发布喽

三、发布npm包

1. 在 npm官网 注册一个npm账号
2. 切换到需要发包的项目根目录下，npm adduser 输入npm账号，输入用户名、密码、邮箱
3. 最后一步，执行npm publish即可 发布成功后，进入npm个人中心，可以看到自己的npm包已经发布在上面了

四、发布时可能会遇到的问题

Username: (sexcyin)
Password: (

如果 on 后面不是 https://registry.npmjs.org/ ，而是其他的镜像，比如我们大家常见的淘宝镜像： https://registry.npm.taobao.org/，则需替换成原来的，对应命令：

npm config set registry https://registry.npmjs.org/
复制代码

替换完毕再执行 npm adduser 、 npm publish ，这样应该就ok了！

五、react-tiny-list-view开发（造一个小轮子）

做SAB时遇到的一个问题，列表页滚动无限加载，当请求接口次数很多，列表数据相应增多，此时浏览器就会渲染很多dom，当dom过多，几千条上万条，浏览器就会很卡。当时并没有优化，因为没有时间而且没有思路（虽然兵哥已经给出方案，但没想明白。。。。）。

具体实现思路

1. 头尾各加多加一个div（topdiv，footdiv），
2. 给定最大渲染的列表中项的个数，
3. 监听滚动事件，向下滚动到底部时，请求接口，拼接数据，当请求很多次时，列表中实际项的个数超过了最大渲染数，需设置topdiv的高度，其高度为超出项的总高度；
4. 当向上滚动时，距离topdiv的高度小于一屏时，重新计算需要渲染哪些项，对应的topdiv高度减少，footdiv高度增加（为topdiv减少的高度）；
5. 再次向下滚动，此时footdiv的高度已大于0，当距离footdiv小于一屏时，需重新计算需要渲染哪些项，对应的topdiv高度增加，footdiv高度减少（为topdiv增加的高度）；

github地址

react-tiny-list-view

组件props说明及使用

import React, { Component } from "react";
import "./styles/index.less";
import ReactTinyListView from "react-tiny-list-view";
import data from "./data";

class App extends Component {
  state = {
    dataSource: [],
    isLoading: false,
    hasMore: true
  };
  loadCount = 0;
  componentDidMount() {
    this.setState({
      dataSource: data
    });
  }
  onEndReached = () => {
    if (this.loadCount >= 7) {
      this.setState({
        hasMore: false,
        isLoading: false
      })
      return false;
    }
    this.setState({
      isLoading: true
    });
    setTimeout(() => {
      this.setState({
        isLoading: false,
        dataSource: this.state.dataSource.concat(data)
      });
      this.loadCount++;
    }, 1000);
    return true;
  };
  render() {
    const { hasMore, isLoading } = this.state;
    const row = (rowData, rowID) => (
      

        
        

          

            {rowData.des}
          
          

            
              {rowID + 1}
            
          
        
      
    );
    return (
       (
          

            {hasMore ? (isLoading ? "Loading..." : "Loaded") : "No More"}
          
        )}
        pageSize={20}
        maxRenderCount={100}
        onEndReached={this.onEndReached}
      />
    );
  }
}
export default App;
复制代码

1. dataSource：数据源，Array
2. renderRow：Function，会根据dataSource来渲染列表中的项，在组件中会遍历dataSource，来调用renderRow方法，这样就可以自定义列表项的结构
3. renderFooter：Function，渲染加载中，加载完成，没有更多数据
4. pageSize：每次请求渲染多少数据
5. maxRenderCount：最大渲染个数
6. onEndReached：滚动到底部时的回调函数，需返回true（还有数据），false（没有更多数据了）

发布react包遇到的问题

1. 打包好，发布到npm上，import进来居然用不了，报错。
   解决方法：output中加libraryTarget: 'commonjs2'
2. 会把node_modules 里面的依赖包引入打包文件
   解决方法：使用webpack-node-externals

附一个正确的webpack.config.js

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const NodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: "[name].js", //打包文件名
    path: path.resolve(__dirname, "lib"), //打包文件的输出路径
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      } //同时支持es6 react
    ]
  },
  externals: [NodeExternals()],
  plugins: [
    new CleanWebpackPlugin(['lib'])
  ]
};
复制代码

包链接：react-tiny-list-view

转载于:https://juejin.im/post/5bce93626fb9a05d1f22483b