stan-builder
集成
rollupbabel常用打包配置.
Install
Using npm:
npm install stan-builder --save-devFeatures
- ✔︎ 支持 typeScript
- ✔︎ 支持 cjs、esm、umd、systemjs 四种格式的打包
- ✔︎ esm 支持生成 mjs，直接为浏览器使用
- ✔︎ 支持 postcss
- ✔︎ 支持打包成 node browser 用的代码
Usage
# Bundle library
stan-builder --esm --cjs --minify
# Bundle dev
stan-builder -wConfig
新建配置文件 .stanrc.ts .stanrc.js .stanrc.tsx
// BundleOptions
export default {
esm: true,
umd: true,
target: 'browser',
}Bundle Options
entry
指定入口文件。
- Type:
string - Default：
src/index.js
默认会查找 src/index.tsx, src/index.ts, src/index.jsx, src/index.js, src/index.vue，如果存在，则会作为默认的 entry。如果库文件为 typescript，则需要在根目录配置tsconfig.json，否则会编译错误。
babel 模式下是编译 entry 所在文件夹的所有文件。
如果是
vue默认使用的是vue3rollup-plugin-vue@6.x, 如果是vue2请项目内安装rollup-plugin-vue@5.x
file
指定输出文件名。
- Type:
string - Default：与
entry相同的文件名，entry.[umd|cjs|esm].[min].js默认自动增加后缀。
[esm|cjs|umd].file优先级比这个高，没有配置则默认这个。
bundler
打包工具。
- Type:
rollup | babel
umdsystemjs规范只支持使用rollup。
runtimeHelpers
是否把 helper 方法不打包引入 @babel/runtime 。
- 推荐开启，减少打包体积，公用项目内的
runtime。- 开启
runtimeHelpers，一定要在 dependencies 里有@babel/runtime依赖runtimeHelpers只对 esm 有效，cjs 下无效，因为 cjs 已经不给浏览器用了。
minify
是否压缩代码。
- Type:
boolean - Default:
false
- 开启会自动生成
.min后缀的文件。css使用postcss，js使用terser。[esm|cjs|umd].minify优先级比这个高，没有配置则默认这个。
extractCSS
配置是否提取 css 为单独文件。
- Type:
boolean - Default:
false
injectCSS
是否在 <head> 里注入css。
- Type:
boolean - Default:
true
sourcemap
是否同步输出sourcemap。
- Type:
boolean - Default:
false
esm
输出esm规范的代码。
- Type：
"rollup" | "babel" | { type, file, mjs, bundler, minify, sourcemap, target, runtimeHelpers } |boolean``
cjs
输出cjs规范的代码。
- Type：
"rollup" | "babel" | { type, file, lazy, bundler, minify, sourcemap, target, runtimeHelpers } |boolean``
cjs.lazy
是否开启 lazy require。
- Type:
boolean - Default:
false
可加速命令行执行速度，同时减少依赖和耦合。
umd
输出umd规范的代码。
- Type：
"rollup" | "babel" | { type, file, name, global, bundler, minify, sourcemap, target, runtimeHelpers } |boolean``
umd.name
指定 rollup 的 name 配置。
- Type:
string - Default：默认 camelCase packages.json 中的
name
umd.global
指定 rollup 的 global 配置。
- Type:
react=React,react-dom=ReactDom | { pkg: global name }
external中的包默认会 camelCase 作为默认值。
system
输出systemjs规范的代码，默认使用rollup。
- Type：
boolean
target
配置是 node 库还是 browser 库，只作用于语法层。
- Type:
"node" | "browser" - Default:
"browser"
- 如果
entry后缀为.jsx|.tsx默认为browser。
extraBabelPlugins
配置额外的 babel plugins。
- Type:
array - Default:
[]
extraBabelPresets
配置额外的 babel preset。
- Type:
array - Default:
[]
extraExternals
配置一些依赖走 externals。
- Type:
array<string | RegExp> - Default: []
- rollup 的 external 保留内部默认处理，新增 external
- 打包esm, cjs时 dependencies 和 peerDependencies 里的内容会被 external
- 打包umd时 peerDependencies 会被 external
externalsExclude
配置一些依赖不走 externals。
- Type:
array<string | RegExp> - Default:
[]
externalPeerDependenciesOnly
只 externals peerDependencies 中的依赖。
- Type:
string[] - Default:
[]
extraPostCSSPlugins
配置额外 postcss plugin
- Type:
string[] - Default:
[]
extraRollupPlugins
配置额外 rollup plugin
- Type:
array - Default:
[]
analyze
是否可视化展示打包的模块大小，使用 rollup-plugin-visualizer 。
- Type:
boolean - Default:
false
copy.targets
是否打包同时复制文件。
- Type:
{ src, dest, rename, transform } | array - Default:
undefined
- 这里使用 globby 匹配文件。
- 如果 watch 模式，匹配到的文件也会 watch 并且copy。
copy.flatten
是否复制的时候删除目录结构。
- Type:
boolean - Default:
true
rollup plugin options
-
nodeResolveOpts: @rollup/plugin-node-resolve -
replaceOpts: @rollup/plugin-replace -
commonjsOpts: @rollup/plugin-commonjs -
injectOpts: @rollup/plugin-inject -
terserOpts: rollup-plugin-terser -
typescript2Opts: rollup-plugin-typescript2如果项目内有
typescript默认declaration: true -
aliasOpts: @rollup/plugin-alias -
visualizerOpts: rollup-plugin-visualizer -
postcssOpts: rollup-plugin-postcss
如果是 ts 可以参考
stan-builder/typings/types.d.ts中的BundleOptions
Usage in node
const builder = require('stan-builder');
builder({
verbose: true
}).then(() => {
console.log("Build complete.")
})