在基于taro-ui-sample开发第三发组件库时,编译后无法安装使用

[snycloud]

问题描述
在基于taro-ui-sample开发第三发组件库
在测试时直接 run dev:h5, 没有问题, 可以正常运行
但是通过命令 TARO_BUILD_TYPE=ui taro build --ui 打包编译后 【没有报错, 也没有出现编译成功的提示 (在没有升级[email protected], [email protected] 前是有成功提示的)】,在其他项目中安装此组件库后, run dev:h5, 会报错报错信息如下

复现步骤
[复现问题的步骤]

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

源代码为:

import Taro, {Component} from '@tarojs/taro'
import PropTypes from 'prop-types'
import {View} from '@tarojs/components'
import './snPoint.scss'

/**
 * @description 实心圆点
 *
 * 所有 size 单位都为 rem
 *
 * 用法
 * import {SnPoint} from 'sn-taro-ui'
 *
 * <SnPoint size='0.5' color='#e56969' />
 *
 * */
export default class SnPoint extends Component {
  constructor(props) {
    super(...arguments);

    this.state = {
      size: props.size + 'rem',
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  static componentDidShow() {
  }

  static componentDidHide() {
  }

  render() {
    return (
      <View className='point-container'>
        <View
          className='out-view'
          style={
            {
              width: this.state.size,
              height: this.state.size,
              lineHeight: this.state.size,
              float: this.props.float,
              backgroundColor: this.props.color
            }
          }
        >
        </View>
      </View>
    )
  }
}

// 定义传参默认值
SnPoint.defaultProps = {
  size: '0.5',
  color: '#333',
  float: 'none',
};

// 定义传参类型
SnPoint.propTypes = {
  size: PropTypes.string,
  color: PropTypes.string,
  float: PropTypes.string,
};

编译后的H5版本为:

import Taro from '@tarojs/taro-h5';
import { Component } from "@tarojs/taro-h5";
import Nerv from "nervjs";
import PropTypes from 'prop-types';
import { View } from '@tarojs/components';
import './snPoint.scss';

/**
 * @description 实心圆点
 *
 * 所有 size 单位都为 rem
 *
 * 用法
 * import {SnPoint} from 'sn-taro-ui'
 *
 * <SnPoint size='0.5' color='#e56969' />
 *
 * */
export default class SnPoint extends Component {
  constructor(props) {
    super(...arguments);

    this.state = {
      size: props.size + 'rem'
    };
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  static componentDidShow() {}

  static componentDidHide() {}

  render() {
    return <View className="point-container">
        <View className="out-view" style={{
        width: this.state.size,
        height: this.state.size,
        lineHeight: this.state.size,
        float: this.props.float,
        backgroundColor: this.props.color
      }}>
        </View>
      </View>;
  }
}

// 定义传参默认值
SnPoint.defaultProps = {
  size: '0.5',
  color: '#333',
  float: 'none'
};

// 定义传参类型
SnPoint.propTypes = {
  size: PropTypes.string,
  color: PropTypes.string,
  float: PropTypes.string
};

编译后的weapp文件为:

import Taro, {Component} from '@tarojs/taro'
import PropTypes from 'prop-types'
import {View} from '@tarojs/components'
import './snPoint.scss'

/**
 * @description 实心圆点
 *
 * 所有 size 单位都为 rem
 *
 * 用法
 * import {SnPoint} from 'sn-taro-ui'
 *
 * <SnPoint size='0.5' color='#e56969' />
 *
 * */
export default class SnPoint extends Component {
  constructor(props) {
    super(...arguments);

    this.state = {
      size: props.size + 'rem',
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  static componentDidShow() {
  }

  static componentDidHide() {
  }

  render() {
    return (
      <View className='point-container'>
        <View
          className='out-view'
          style={
            {
              width: this.state.size,
              height: this.state.size,
              lineHeight: this.state.size,
              float: this.props.float,
              backgroundColor: this.props.color
            }
          }
        >
        </View>
      </View>
    )
  }
}

// 定义传参默认值
SnPoint.defaultProps = {
  size: '0.5',
  color: '#333',
  float: 'none',
};

// 定义传参类型
SnPoint.propTypes = {
  size: PropTypes.string,
  color: PropTypes.string,
  float: PropTypes.string,
};

第三方组件库的配置文件如下:

const path = require('path');

const config = {
  projectName: '*******',
  date: '2018-10-30',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: {
    babel: {
      sourceMap: true,
      presets: [
        'env'
      ],
      plugins: [
        'transform-class-properties',
        'transform-decorators-legacy',
        'transform-object-rest-spread'
      ]
    }
  },
  defineConstants: {
  },
  copy: {
     patterns: [
    ],
    options: {
    }
  },
  weapp: {
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        },
        url: {
          enable: true,
          limit: 10240
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    esnextModules: ['taro-ui'],
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        }
      }
    }
  }
};

if (process.env.TARO_BUILD_TYPE === 'ui') {
  Object.assign(config.h5, {
    enableSourceMap: false,
    enableExtract: false,
    enableDll: false
  });
  config.h5.webpackChain = chain => {
    chain.plugins.delete('htmlWebpackPlugin');
    chain.plugins.delete('addAssetHtmlWebpackPlugin');
    chain.merge({
      output: {
        path: path.join(process.cwd(), 'dist', 'h5'),
        filename: 'index.js',
        libraryTarget: 'umd',
        library: 'sn-taro-ui'
      },
      externals: {
        nervjs: 'commonjs2 nervjs',
        classnames: 'commonjs2 classnames',
        '@tarojs/components': 'commonjs2 @tarojs/components',
        '@tarojs/taro-h5': 'commonjs2 @tarojs/taro-h5',
        'weui': 'commonjs2 weui'
      }
    })
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
};

期望行为
第三方组件库可以正常打包给其他项目安装运行

报错信息

系统信息

• 操作系统: [Mac OS 10.14.1]
• Taro 版本 [1.2.0-beta.11]
• Node.js 版本 [10]
• 报错平台 [h5, weapp]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[xioxin]

在用第三方库的项目配置文件中增加

{
    h5: {
        esnextModules: ['第三方库名称']
    }
}

#1428 (comment)

[luckyadam]

Duplicate of #1428

[snycloud]

https://github.com/CozySnail/sn-taro-ui.git