taro封装组件库

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

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

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

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

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

3. 配置文件改造

   为了打包出可以在 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'
         }
       })
     }
   }
   

4. 打包命令

   通过打包指令便可以将其打包

   $ TARO_BUILD_TYPE=ui taro build --ui
   

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

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

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

发布 npm

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

1. .gitignore不能包含dist目录

   执行TARO_BUILD_TYPE=ui taro build --ui便会将组件库打包，需要将打包生成的dist目录发布且上传

2. 修改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>
    )
  }
}