lib-tool
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    lib-tool

    零配置,用简单的方式来打包一个组件库 📦

    功能

    • 零配置。
    • 支持 JavaScript、TypeScript、React。
    • 同时支持 ESM 和 CJS 的打包。
    • 同时支持 Less、Sass、CSS 的打包。

    安装

    npm

    npm install -D lib-tool

    yarn

    yarn add lib-tool --dev

    使用

    package.json中引用。

    {
      "scripts": {
        "build": "lib-tool"
      }
    }

    或直接执行命令。

    $ lib-tool

    默认情况下,lib-tool会以匹配模式来打包,即会打包入口目录下的所有文件。

    lib-tool是文件到文件进行编译,这代表输出的结构会和输入的结构一致,而不会打包为一个bundle.js文件。

    配置文件

    如果你想添加更多配置,那么可以创建配置文件。

    新建toolrc.jstoolrc.ts,推荐使用.ts文件配置,因为可以获得类型提示。

    // toolrc.ts
    import type { UserConfig } from 'lib-tool'
    export default {
      entry: 'components/index.tsx',
      lessOptions: {
        javascriptEnabled: false, // 默认为 true
      },
      fileFilter: (filePath) => !filePath.includes('ignore_dir'),
    } as UserConfig

    配置项

    entry string

    打包入口,在match模式下可为入口目录,dependence模式下为入口文件路径,默认情况会寻找src/index.(js|jsx|ts|tsx)

    outDir OutDir

    打包输出目录,key为打包格式,默认值:

    {
      esm: 'es',
      cjs: 'lib',
    }

    mode Mode

    打包分为matchdependence两种模式,默认为match模式。

    • match 模式直接以入口目录作为匹配,打包目录下所有文件。
    • dependence模式只根据入口文件所依赖的文件打包。

    pattern string

    寻找文件的匹配符,只在match模式下生效,默认值:**/*.*(js|ts|jsx|tsx)

    copyStyles boolean

    是否拷贝原样式文件到输出目录,默认为false

    babelConfig (format: Format) => TransformOptions

    自定义babel配置项,format为当前的打包格式,cjsesm,默认配置:

    {
        presets: [
          [
            require.resolve('@babel/preset-typescript'),
            {
              isTSX,
              allExtensions: isTSX,
            },
          ],
          require.resolve('@babel/preset-react'),
          [
            require.resolve('@babel/preset-env'),
            {
              modules: format === 'esm' ? false : 'auto',
              targets: {
                browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 11'],
              },
            },
          ],
        ],
      }

    tsConfigPath string

    ts配置文件路径,dependence下生效,默认寻找根目录tsconfig.json

    webpackConfigPath string

    webpack配置文件路径,dependence下生效,默认寻找根目录webpack.config.js

    filter (path: string) => boolean

    过滤文件,可用于只打包某类文件。

    lessOptions Less.Options

    less的配置。

    sassOptions SassOptions

    sass的配置。

    Cli

    lib-tool 执行打包。

    • --entry 打包入口。
    • --mode 打包模式。
    • --outDir 输出目录。
    • --format打包格式。

    Example:

    lib-tool --entry entry/index.ts --mode dependence --format esm --outDir dist

    多配置

    配置文件可以导出一个多配置数组。

    Example:

    依赖打包components/index.tsxesm格式打包到dist目录,打包components目录下所有less文件到styles目录。

    import { UserConfig, babelConfig } from "lib-tool";
    
    export default [
      {
        entry: "components/index.tsx",
        outDir: {
          esm: "dist",
        },
        mode: "dependence",
        babelConfig: (format) => ({
          ...babelConfig(format),
          plugins: [
            [
              "module-resolver",
              {
                root: ".",
                alias: {
                  "@utils": "./components/utils",
                },
              },
            ],
          ],
        }),
      },
      {
        entry: "components",
        outDir: {
          esm: "styles",
        },
        filter: (path) => path.endsWith(".less"),
      },
    ] as UserConfig[];

    Keywords

    none

    Install

    npm i lib-tool

    DownloadsWeekly Downloads

    3

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    37.8 kB

    Total Files

    30

    Last publish

    Collaborators

    • zhangyu1995