🔨 vitx

简单的编译工具

文档功能开发中

Features

支持 typescript
支持多目录workspaces编译
支持 cjs 和 esm
支持自定义 stream 扩展, 支持 gulp 插件
支持 sourcemap
支持 小程序编译
支持 增量编译
支持支持vue 和 react 文件编译
支持支持less编译
支持支持路径别名alias
支持 jest

Installation

Install vitx via yarn or npm.

$ yarn add vitx

Usage

# Bundle library
$ vitx build

# Watch dev
$ vitx build --watch

$ yarn add jest -D

# Bundle library
$ vitx test

注:

目录下添加 jest.config.js 或者 jest.config.ts 配置即可, 如果是 node 应用直接运行即可
默认配置可参考 jest-config

修改或覆盖:

import { IJestConfig } from 'vitx'

export default <IJestConfig>{
  // 如果是一个函数则会传入默认值最后返回新值
  // 如果是一个非函数值会进行直接覆盖
  collectCoverageFrom(memo) {
    return memo.concat([
      '!packages/vitx/src/jestConfig.ts',
      '!packages/vitx/src/cli.ts',
      '!packages/vitx/src/jestTransformer.ts',
      '!packages/vitx/src/jestRun.ts'
    ])
  }
}

Config

新建 .vitxrc.js or .vitxrc.ts 文件进行配置。

import { IConfig } from 'vitx'

export default {
  moduleType: 'cjs',
  target: 'node',
  alias: {
    '@': './src'
  }
} as IConfig

tsconfig.json

会自动读取 tsconfig.json 的 compilerOptions 的配置进行编译 ts or tsx

Options

moduleType

输出格式,打包方式等

Type: "cjs" | "esm" | "all"
Default: "esm"

all 会同时输出 cjs 和 esm 的格式文件

extraBabelPresets

配置额外的 Babel presets。

Type: array
Default: []

extraBabelPlugins

添加 Babel Plugins

Type: array
Default: []

target

node 库 or browser 库，只作用于语法层。

Type: "node" | "browser"
Default: "browser"

node，兼容到 node@6 browser，兼容到 ['last 2 versions', 'IE 10']

frame

支持.vue单文件编译及vue jsx or tsx (只支持 vue3) 支持react jsx or tsx 注意目前必须要指定框架

Type: "vue" | "react"
Default: ``

alias

路径别名, 参考 webpack alias 参数, 支持大部分主流文件类型, 支持小程序

Type: object
Default: undefined

import path from 'path'
const root = path.join(__dirname, './src')

export default {
  alias: {
    '@': root,
    '@pkg': path.join(root, 'index'),
    '@utils': path.join(root, 'utils')
  }
}

browserFiles

target 为 node 时，配置例外文件走 browser target。

Type: [string]
Default: []

注：所有 .tsx 和 .jsx 文件始终走 browser target。

nodeFiles

target 为 browser 时，配置例外文件走 node target。

Type: [string]
Default: []

runtimeHelpers

是否把 helper 方法提取到 @babel/runtime 里。

Type: boolean
Default: false

注：

配置了 runtimeHelpers，要在 dependencies 里安装 @babel/runtime 依赖
runtimeHelpers 只对 esm 有效

disableTypes

是否禁用类型检测, 将不会生成 d.ts

Type: boolean
Default: false

beforeReadWriteStream

编译中 hook, 在没有进行任何处理之前

Type: function({ through, gulpIf }):NodeJS.ReadWriteStream
Default: undefined

注：

会传入两个参数
- through2 https://github.com/rvagg/through2
- gulp-if https://github.com/robrich/gulp-if,
可以直接使用 gulp 插件

export default {
  beforeReadWriteStream({ through, gulpIf }) {
    return through.obj((chunk, _, cb) => {
      cb(null, chunk)
    })

    return gulpLess()
  }
}

afterReadWriteStream

编译中 hook, 在进行编译处理之后

Type: function({ through, gulpIf }):NodeJS.ReadWriteStream
Default: undefined

注：

会传入两个参数,
- through2 https://github.com/rvagg/through2
- gulp-if https://github.com/robrich/gulp-if,
可以直接使用 gulp 插件

export default {
  beforeReadWriteStream({ through, gulpIf }) {
    return through.obj((chunk, _, cb) => {
      cb(null, chunk)
    })
  }
}

afterHook

编译中 hook, 在进行编译完成之后

Type: function():void
Default: undefined

packages

在多目录构建中，有可能出现组件间有构建先后的需求 packages 允许你自定义 packages 目录下的构建顺序, 当使用packages的时候没有在packages里面的目录不会进行编译

Type: string[]
Default: []

export default {
  packages: ['packagesA', 'packagesB']
}

注:

packageDirName

Type: string
Default: packages

entry

编译监听目录

Type: string
Default: src

output

编译输出目录

Type: string
Default: lib

lessOptions

Type: { modifyVars?: Record<string, any> paths?: string[] plugins?: any[] relativeUrls?: boolean }
Default: object

gulp-less

sourcemap

Type: boolean
Default: false

基于 gulp-sourcemaps

zoy-l/vitx

zoy-l

Reviews

Repository Details