阅读 408

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'
复制代码
  1. 配置文件改造

    为了打包出可以在 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'
          }
        })
      }
    }
    复制代码
  2. 打包命令

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

    $ 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.jsonmain属性、

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

{
  "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>
    )
  }
}
复制代码
文章分类
前端
文章标签