taro从0开发一个组件插件包

前言

经常看到taro物料市场 上有很多好用的组件，因此我也想造轮子。

网上有很多现成的方案，可是我觉得不好，他们都是在一个完整的项目中开发依赖的，实际上我们可能不需要这么多无用的依赖和代码。

所以我抽丝剥茧，找到了仅打包需要的环境配置 最纯净版！

我的插件开发方案

创建一个空项目，把你需要打包的taro的源码放在src中。

安装必须的依赖

然后安装一些必须的依赖。

1、rollup // 打包必备
2、@babel/core、@rollup/plugin-babel // 编译代码核心工具babel
3、babel-preset-taro // babel用于转换taro的插件，taro官方提供
4、@babel/plugin-transform-runtime // babel运行时需要的包（这个不是特别明白为何需要）

可选

1、node-sass、postcss、rollup-plugin-postcss  // sass解析

增加配置文件

// rollup.config.js
import path from 'path'
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';  // 可选：处理sass

const resolveFile = source => path.resolve(__dirname, source)
export default {
    input: "src/index.jsx",
    output: [
        {
            file: resolveFile('lib/index.js'),
            format: 'es'
        }
    ],
    plugins: [
        postcss({ // 可选：处理sass
            extract: true
        }),
        babel({
            babelHelpers: 'runtime',
            "presets": [["taro", {
                framework: 'react'
            }]],
            "plugins": ["@babel/plugin-transform-runtime"]
        })]
};

打包

运行打包命令即可

npx rollup --c rollup.config.js

记得将入口文件改为打包后的文件路径

// package.json
{
  ...,
  "main": "lib/index.js",
  "files": [
    "package.json",
    "lib"
  ],
  ...
}

例子

taro-swiper-week

总结

为什么要选择rollup打包呢？

因为一般开发插件或者组件库都不会使用webpack，比如我组件里因为了三方库。

webpack在打包我组件库的时候就会将其打进去，这不是必要的，因为使用者默认都会（是一般使用webpack）处理的导入三方包的语句。我在这里提前处理意义不大，而且还徒增我自己插件或者组件库的体积。还让代码变得巨大不利于阅读。

那为什么不用esbuild或者其他打包工具呢？因为插件较少。