Giter VIP home page Giter VIP logo

vitx's Introduction

🔨 vitx

简单的编译工具

lerna GitHub license codecov <ORG_NAME>

文档功能开发中

Features

  • 支持 typescript
  • 支持 多目录workspaces编译
  • 支持 cjsesm
  • 支持 自定义 stream 扩展, 支持 gulp 插件
  • 支持 sourcemap
  • 支持 小程序编译
  • 支持 增量编译
  • 支持 支持vuereact 文件编译
  • 支持 支持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.jsoncompilerOptions 的配置进行编译 ts or tsx

Options

moduleType

输出格式,打包方式等

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

all 会同时输出 cjsesm 的格式文件

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

注:

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

disableTypes

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

  • Type: boolean
  • Default: false

beforeReadWriteStream

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

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

注:

  1. 会传入两个参数
  2. 可以直接使用 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

注:

  1. 会传入两个参数,
  2. 可以直接使用 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']
}

注:

  1. 子目录的配置文件会继承最外层的配置

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

vitx's People

Contributors

zoy-l avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.