xvpackage v0.0.2

构建npm包

1. 新建文件夹，进入文件夹，执行命令

npm init

2. 完善项

{
  "name": "xvpackage", //包名
  "version": "0.0.1", //版本号
  "description": "", //描述
  "main": "index.js", //入口js
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",  //作者
  "license": "MIT"  //协议
}

3. 目录结构

• xvpackage
  • lib
    • index.js
  • test
    • test.js
  • node_modules
  • package.json
  • README.md
  • History.md

4. 新建lib/chineseOrderBy.js文件

'use strict';
//标记es6写法
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = tableOnSort;

    /**
   * 表格排序
   * @param {*数字字段名数组} numArr
   * @param {*数据集合} tableDataList
   * @param {* 字段名} dataIndex
   * @param {* 排序名} order
   */
function tableOnSort(numArr=[],tableDataList,dataIndex,order){
    let dataSource = tableDataList.sort(function(a, b) {

      if(numArr.includes(dataIndex)){
        let result = a[dataIndex] - b[dataIndex];
        return order === "asc" ? (result > 0 ? 1 : -1) : result > 0 ? -1 : 1;
      }

      return order === "asc" ? String(a[dataIndex]).localeCompare(String(b[dataIndex])) : String(b[dataIndex]).localeCompare(String(a[dataIndex]));
    });
    return dataSource;
  }
  module.exports = exports['default'];

5. 完善lib/index.js文件

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _ChineseOrderBy1 = require('./chineseOrderBy.js');
var _ChineseOrderBy2 = _interopRequireDefault(_ChineseOrderBy1);



function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default =_ChineseOrderBy2.default;
module.exports = exports['default'];

6. test/test.js

7. 初次发布

• npm官网创建账号
• 执行 npm adduser 发布（输入用户名，账号，邮箱）
• 激活邮件
• npm public

8. 再次发布

• 修改代码
• 修改package.json中的version
• npm publish

组价写法

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Cover = require('./modules/Cover');

var _Cover2 = _interopRequireDefault(_Cover);

var _Contain = require('./modules/Contain');

var _Contain2 = _interopRequireDefault(_Contain);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

var IceImg = (_temp = _class = function (_Component) {
  _inherits(IceImg, _Component);

  function IceImg(props) {
    _classCallCheck(this, IceImg);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.handleImgLoadError = function () {
      if (_this.props.errorImgSrc) {
        _this.setState({
          src: _this.props.errorImgSrc
        });
      }
      _this.props.onError && _this.props.onError();
    };

    _this.state = {
      src: props.src
    };
    return _this;
  }

  IceImg.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if ('src' in nextProps) {
      this.setState({
        src: nextProps.src
      });
    }
  };

  IceImg.prototype.render = function render() {
    var type = this.props.type;


    if (type === 'contain') {
      return _react2.default.createElement(_Contain2.default, _extends({}, this.props, this.state, {
        onError: this.handleImgLoadError
      }));
    }

    return _react2.default.createElement(_Cover2.default, _extends({}, this.props, this.state, {
      onError: this.handleImgLoadError
    }));
  };

  return IceImg;
}(_react.Component), _class.displayName = 'IceImg', _class.propTypes = {
  /**
   * 图片显示模式
   */
  type: _propTypes2.default.oneOf(['cover', 'contain']),
  /**
   * 图片 url
   */
  src: _propTypes2.default.string.isRequired,
  /**
   * 图片的 title，hover 上去会显示出来
   */
  title: _propTypes2.default.string,
  /**
   * 图片加载失败的兜底图片
   */
  errorImgSrc: _propTypes2.default.string,
  /**
   * 图片加载失败的回调方法
   */
  onError: _propTypes2.default.func,
  /**
   * 图片显示宽度
   */
  width: _propTypes2.default.number,
  /**
   * 图片显示高度
   */
  height: _propTypes2.default.number,
  /**
   * 图片的 alt 通常用于屏幕阅读器（盲人）识别
   */
  alt: _propTypes2.default.string,
  /**
   * 形状展现
   */
  shape: _propTypes2.default.string,
  /**
   * 启用阿里 CDN 图片优化压缩后缀
   */
  enableAliCDNSuffix: _propTypes2.default.bool
}, _class.defaultProps = {
  type: 'cover',
  alt: '',
  title: '',
  errorImgSrc: '',
  className: '',
  shape: 'sharp',
  enableAliCDNSuffix: false
}, _temp);
exports.default = IceImg;
module.exports = exports['default'];