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

一、安装node.js

二、创建npm包

三、发布npm包

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

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

Username: (sexcyin)
Password: (<default hidden>)
Email: (this IS public) (66666@qq.com)
Logged in as sexcyin on https://registry.npm.taobao.org/.
PS D:\rocky\npm-helloworld> npm publish
npm ERR! publish Failed PUT 401
npm ERR! code E401
npm ERR! 404 unauthorized Login first: sexcyin-helloword
npm ERR! 404
npm ERR! 404  'sexcyin-helloword' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\SD\AppData\Roaming\npm-cache\_logs\2018-10-23T02_52_36_898Z-debug.log
复制代码

如果 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过多，几千条上万条，浏览器就会很卡。当时并没有优化，因为没有时间而且没有思路（虽然兵哥已经给出方案，但没想明白。。。。）。

具体实现思路

头尾各加多加一个div（topdiv，footdiv），
给定最大渲染的列表中项的个数，
监听滚动事件，向下滚动到底部时，请求接口，拼接数据，当请求很多次时，列表中实际项的个数超过了最大渲染数，需设置topdiv的高度，其高度为超出项的总高度；
当向上滚动时，距离topdiv的高度小于一屏时，重新计算需要渲染哪些项，对应的topdiv高度减少，footdiv高度增加（为topdiv减少的高度）；
再次向下滚动，此时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) => (
      <div key={rowID} className="item">
        <img src={rowData.img} />
        <div className="desc">
          <div style={{ marginBottom: "8px", fontWeight: "bold" }}>
            {rowData.des}
          </div>
          <div>
            <span style={{ fontSize: "30px", color: "#FF6E27" }}>
              {rowID + 1}
            </span>
          </div>
        </div>
      </div>
    );
    return (
      <ReactTinyListView
        dataSource={this.state.dataSource}
        renderRow={row}
        renderFooter={() => (
          <div style={{ padding: 0, textAlign: "center" }}>
            {hasMore ? (isLoading ? "Loading..." : "Loaded") : "No More"}
          </div>
        )}
        pageSize={20}
        maxRenderCount={100}
        onEndReached={this.onEndReached}
      />
    );
  }
}
export default App;
复制代码

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

发布react包遇到的问题

打包好，发布到npm上，import进来居然用不了，报错。
解决方法：output中加libraryTarget: 'commonjs2'
会把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'])
  ]
};
复制代码