0.0.3 • Published 3 years ago

lib-tool v0.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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[];