😃 Simple transform tool
简单的编译工具
文档功能开发中
typescript
workspaces
编译cjs
和 esm
stream
扩展, 支持 gulp
插件sourcemap
小程序
编译增量编译
vue
和 react
文件编译less
编译alias
jest
Install vitx
via yarn or npm.
$ yarn add vitx
# Bundle library
$ vitx build
# Watch dev
$ vitx build --watch
$ yarn add jest -D
# Bundle library
$ vitx test
注:
jest.config.js
或者 jest.config.ts
配置即可, 如果是 node
应用直接运行即可修改或覆盖:
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'
])
}
}
新建 .vitxrc.js
or .vitxrc.ts
文件进行配置。
import { IConfig } from 'vitx'
export default {
moduleType: 'cjs',
target: 'node',
alias: {
'@': './src'
}
} as IConfig
会自动读取 tsconfig.json
的 compilerOptions
的配置进行编译 ts
or tsx
输出格式,打包方式等
"cjs" | "esm" | "all"
"esm"
all
会同时输出 cjs
和 esm
的格式文件
配置额外的 Babel presets。
array
[]
添加 Babel Plugins
array
[]
node 库 or browser 库,只作用于语法层。
"node" | "browser"
"browser"
node
,兼容到 node@6 browser
,兼容到 ['last 2 versions', 'IE 10']
支持.vue
单文件编译及vue jsx or tsx
(只支持 vue3) 支持react jsx or tsx
注意目前必须要指定框架
"vue" | "react"
路径别名, 参考 webpack
alias 参数, 支持大部分主流文件类型, 支持小程序
object
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')
}
}
target 为 node
时,配置例外文件走 browser
target。
[string]
[]
注:所有 .tsx
和 .jsx
文件始终走 browser
target。
target 为 browser
时,配置例外文件走 node
target。
[string]
[]
是否把 helper 方法提取到 @babel/runtime
里。
boolean
false
注:
runtimeHelpers
,要在 dependencies 里安装 @babel/runtime
依赖是否禁用类型检测, 将不会生成 d.ts
boolean
false
编译中 hook, 在没有进行任何处理之前
function({ through, gulpIf }):NodeJS.ReadWriteStream
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()
}
}
编译中 hook, 在进行编译处理之后
function({ through, gulpIf }):NodeJS.ReadWriteStream
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)
})
}
}
编译中 hook, 在进行编译完成之后
function():void
undefined
在多目录构建中,有可能出现组件间有构建先后的需求 packages
允许你自定义 packages 目录下的构建顺序, 当使用packages
的时候没有在packages
里面的目录不会进行编译
string[]
[]
export default {
packages: ['packagesA', 'packagesB']
}
注:
string
packages
编译监听目录
string
src
编译输出目录
string
lib
{ modifyVars?: Record<string, any> paths?: string[] plugins?: any[] relativeUrls?: boolean }
object
boolean
false