taro封装组件库小知识，大挑战！本文正在参与“程序员必备小知识”创作活动通过taro指令创建一个基础项目，因为第三方

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

通过taro指令创建一个基础项目，因为第三方的UI库和taro项目目录结构基本保持一致

创建完成项目之后便需要进行改造

创建src/componenets文件夹，里面存放的组件即为作为路由页面使用的组件
在src目录下增加一个入口文件index.js, 主要是用于输出UI组件，打包之后供宿主项目导入使用

export { default as Test } from './components/test/test'
export { default as Foo } from './components/foo/foo'

配置文件改造

为了打包出可以在 H5 端使用的组件库，需要在 config/index.js 文件中增加一些配置

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: 'taro-ui-sample'
      },
      externals: {
        nervjs: 'commonjs2 nervjs',
        classnames: 'commonjs2 classnames',
        '@tarojs/components': 'commonjs2 @tarojs/components',
        '@tarojs/taro-h5': 'commonjs2 @tarojs/taro-h5',
        'weui': 'commonjs2 weui'
      }
    })
  }
}

打包命令

通过打包指令便可以将其打包
```
$ TARO_BUILD_TYPE=ui taro build --ui
```

至此基础的第三方UI库准备工作已完成

此项目可以通过打包指令作为npm包使用，也可以作为独立的项目使用

当作为单独的项目使用时，将components中的路由页面引入放置在pages目录下，作为项目的组件进行使用即可

发布 npm

已经准备好第三方库，接下来便是将其作为npm包进行发版，在发布npm时除了常规的npm publish等常规操作之外，需要注意两点

.gitignore不能包含dist目录

执行TARO_BUILD_TYPE=ui taro build --ui便会将组件库打包，需要将打包生成的dist目录发布且上传
修改package.json的main属性、

当作为第三方库被下载引入使用时，需要指定入口

{
  "main": "dist/index.js",
  "main:h5": "dist/h5/index.js",
}

使用

npm包发版之后，便可以通过npm i xxx下载并在项目中使用

注意点

配置需要额外编译的源码模块在config/index.js增加esnextModules配置

由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项

const condif = {
  h5: {
    esnextModules: ['xxx'] // npm包名
  }
}

在项目中使用

import { Foo } from 'hb-market'

class Index extends Component{
  
  render() {
    return (
    	<View>
      	<Foo></Foo>
      </View>
    )
  }
}