component-scripts v0.1.0
component-scripts
基于 rollup 封装的可打包资源文件的能力,支持打包 React 组件
功能
- 同时支持
CJS
、ESM
、UMD
、SystemJS
、IIFE
打包格式(默认CJS
、ESM
、UMD
) - 支持
TypeScript
代码打包及类型检查 - 大部分情况下只需要很少配置甚至无需配置(一般场景基本无需配置)
- 支持代码混淆压缩和
SourceMap
使用说明
安装
yarn add -D component-scripts
使用
# dev
npx component-scripts dev
# build
npx component-scripts build
import { dev, build } from "component-scripts";
// dev();
build();
配置文件
配置文件为 component.config.js
配置项说明
target
类型:"node" | "browser"
默认值:"browser"
指定编译结果的目标运行环境
说明:当配置为 "browser"
时,可通过 .browserslistrc
指定目标浏览器范围,详细说明请查看相关文档
analysis
类型:boolean
默认值:false
开启打包分析功能,会产出打包内容的体积等信息,主要用于打包体积调优过程
entry
类型:string | string[]
默认值:
打包入口,如果未配置,默认会按优先级自动查找
说明:优先级顺序 src/index.tsx
> src/index.ts
> src/index.jsx
> src/index.js
outDir
类型:string
默认值:"build"
配合 file
配置项使用,指定输出目录
file
类型:string
| Object
默认值:
指定输出文件路径和文件名,对于多entry的项目,可以传入entry名与输出名的Map
说明:输出文件的最终文件名由多个条件与配置项组合后形成,详细说明请查看输出文件名说明
esm
类型:false | Object
默认值:在 Watch Mode
下默认为 false
针对 ESM
输出格式的配置,如不需要 ESM
格式,可以配置为 false
esm.file
类型:string
默认值:
指定 ESM
输出格式的输出文件路径和文件名
说明:输出文件的最终文件名由多个条件与配置项组合后形成,详细说明请查看输出文件名说明
esm.mjs
类型:boolean
默认值:false
是否额外输出后缀为 .mjs
的文件
说明:.mjs
文件始终会进行混淆压缩,不受 esm.minify
配置项影响
esm.minify
类型:boolean
默认值:false
是否开启 ESM
输出格式的混淆压缩
cjs
类型:false | Object
默认值:在 Watch Mode
下默认为 false
针对 CJS
输出格式的配置,如不需要 CJS
格式,可以配置为 false
cjs.file
类型:string
默认值:
指定 CJS
输出格式的输出文件路径和文件名
说明:输出文件的最终文件名由多个条件与配置项组合后形成,详细说明请查看输出文件名说明
cjs.minify
类型:boolean
默认值:false
是否开启 CJS
输出格式的混淆压缩
umd
类型:false | Object
默认值:
针对 UMD
输出格式的配置,如不需要 UMD
格式,可以配置为 false
umd.file
类型:string
默认值:
指定 UMD
输出格式的输出文件路径和文件名
说明:输出文件的最终文件名由多个条件与配置项组合后形成,详细说明请查看输出文件名说明
umd.name
类型:string
默认值:
指定 UMD
输出格式暴露到全局的变量名
说明:默认会根据项目 package.json
中的 name
字段动态生成,规则为 camelCase(basename(pkg.name))
umd.globals
类型:Object
默认值:
指定外部依赖的全局变量名,详细说明请查看相关文档
umd.sourcemap
类型:boolean | "inline" | "hidden"
默认值:false
是否输出 SourceMap
,详细说明请查看相关文档
umd.minFile
类型:boolean
默认值:true
,在 Watch Mode
下默认为 false
是否额外输出 .min.js
文件,该文件会被混淆压缩
umd.onlyMinFile
类型:boolean
默认值:
是否仅输出 .min.js
文件
system
类型:false | Object
默认值:false
针对 SystemJS
输出格式的配置,如不需要 SystemJS
格式,可以配置为 false
system.file
类型:string
默认值:
指定 SystemJS
输出格式的输出文件路径和文件名
说明:输出文件的最终文件名由多个条件与配置项组合后形成,详细说明请查看输出文件名说明
system.minify
类型:boolean
默认值:false
是否开启 SystemJS
输出格式的混淆压缩
system.sourcemap
类型:boolean | "inline" | "hidden"
默认值:false
是否输出 SourceMap
,详细说明请查看相关文档
system.globals
类型:Object
默认值:
指定外部依赖的全局变量名,详细说明请查看相关文档
system.name
类型:string
默认值:
指定 SystemJS
输出格式注册的模块名称
iife
类型:false | Object
默认值:false
针对 IIFE
输出格式的配置,如不需要 IIFE
格式,可以配置为 false
iife.file
类型:string
默认值:
指定 IIFE
输出格式的输出文件路径和文件名
说明:输出文件的最终文件名由多个条件与配置项组合后形成,详细说明请查看输出文件名说明
iife.minify
类型:boolean
默认值:false
是否开启 IIFE
输出格式的混淆压缩
iife.sourcemap
类型:boolean | "inline" | "hidden"
默认值:false
是否输出 SourceMap
,详细说明请查看相关文档
iife.globals
类型:Object
默认值:
指定外部依赖的全局变量名,详细说明请查看相关文档
typescript
类型:Object
默认值:
额外的 rollup-plugin-typescript2
配置项,详细说明请查看相关文档
disableTypeCheck
类型:boolean
默认值:false
禁用类型检查
说明:该配置项主要是为了老的历史项目可以快速接入,过程中临时性禁用类型检查。对于新项目不建议禁用,类型检查可以帮助我们在编译阶段就发现可能的代码错误
runtimeHelpers
类型:boolean | string
默认值:true
配置是否开启 @babel/plugin-transform-runtime
,为 string
时作为 version
配置项透传给 @babel/plugin-transform-runtime
,详细说明请查看相关文档
corejs
类型:false | 2 | 3 | { version: 2 | 3; proposals: boolean }
默认值:false
透传给 @babel/plugin-transform-runtime
的 corejs
配置项,详细说明请查看相关文档
jsxRuntime
类型:"classic" | "automatic"
默认值:
透传给 @babel/preset-react
的 runtime
配置项,详细说明请查看相关文档
说明:会检查当前依赖的 react
版本是否支持 jsxRuntime
,如果不支持,统一设置为 "classic"
pragma
类型:string
默认值:
透传给 @babel/preset-react
的 pragma
配置项,详细说明请查看相关文档
pragmaFrag
类型:string
默认值:
透传给 @babel/preset-react
的 pragmaFrag
配置项,详细说明请查看相关文档
disableAutoReactRequire
类型:boolean
默认值:
配置是否排除 babel-plugin-react-require
。默认情况下不会排除,但如果 jsxRuntime
设置为 "automatic"
并且使用了支持新 JSX Runtime 的 React 版本,则默认排除
extraBabelPresets
类型:any[]
默认值:[]
额外的 Babel 插件集,推荐使用 .babelrc
配置文件代替该配置项
extraBabelPlugins
类型:any[]
默认值:[]
额外的 Babel 插件,推荐使用 .babelrc
配置文件代替该配置项
babelExclude
类型:string | RegExp | Array<string | RegExp>
默认值:"node_modules/**"
自定义的 babel 转换排除路径,默认排除 node_modules 下所有文件,详细说明请查看相关文档
babelInclude
类型:string | RegExp | Array<string | RegExp>
默认值:undefined
自定义的 babel 转换包含路径,详细说明请查看相关文档
nodeVersion
类型:string | "current" | true
默认值:
当 target
为 "node"
时,作为 @babel/preset-env
的 targets.node
配置项使用,详细说明请查看相关文档
extractCSS
类型:boolean | string
默认值:true
额外输出独立的 CSS
文件,详细说明请查看相关文档
injectCSS
类型:boolean | Object
默认值:true
是否在 JS
中添加注入样式文件的代码,在 extractCSS
为 true
时,该配置项始终为 false
,详细说明请查看相关文档
cssModules
类型:boolean | Object
默认值:false
是否开启 CSS Module
,详细说明请查看相关文档
less
类型:Object
默认值:
透传给 less
的选项,详细说明请查看相关文档
sass
类型:Object
默认值:
透传给 node-sass
的选项,详细说明请查看相关文档
autoprefixer
类型:Object
默认值:
额外的 autoprefixer
配置项,详细说明请查看相关文档
nodeResolve
类型:Object
默认值:{}
额外的 @rollup/plugin-node-resolve
配置项,详细说明请查看相关文档
commonjs
类型:Object
默认值:{}
额外的 @rollup/plugin-commonjs
配置项,详细说明请查看相关文档
说明:仅当 UMD
输出格式时,才会启用 @rollup/plugin-commonjs
插件
alias
类型:Object | Object[]
默认值:
额外的模块别名配置,功能与 webpack
的 resolve.alias
类似,详细说明请查看相关文档
说明:对于在 tsconfig.json
中配置了 paths
的别名,无需额外配置
extraExternals
类型:string[]
默认值:[]
配置额外的外部依赖
说明:如果是已加入到 peerDependencies
或 dependencies
中的依赖,无需额外配置,详情说明请查看外部依赖说明
externalsExclude
类型:string[]
默认值:[]
配置外部依赖的排除项,需要精确到具体引用文件
inject
类型:Object
默认值:
透传给 @rollup/plugin-inject
,详细说明请查看相关文档
replace
类型:Object
默认值:
透传给 @rollup/plugin-replace
,详细说明请查看相关文档
terser
类型:Object
默认值:{}
额外的 rollup-plugin-terser
配置项,详细说明请查看相关文档
json
类型:Object
默认值:{}
透传给 @rollup/plugin-json
,详细说明请查看相关文档
yaml
类型:Object
默认值:{}
透传给 @rollup/plugin-yaml
,详细说明请查看相关文档
wasm
类型:boolean | Object
默认值:false
开启对 WebAssembly
模块的打包支持。当配置成对象时,作为 @rollup/plugin-wasm
的配置项,详细说明请查看相关文档
其他
输出文件名说明
输出文件名可通过相关配置项定义,整体上由以下优先级确定:
- 具体输出格式指定的文件名
- 顶层配置项指定的文件名
package.json
中入口字段的值- 打包入口文件的文件名
对于 ESM
输出格式:
- 如果配置了
esm.file
:`${outDir}/${esm.file}.js`
对于mjs
文件:`${outDir}/${esm.file}.mjs`
- 如果配置了
file
:`${outDir}/${file}.esm.js`
对于mjs
文件:`${outDir}/${file}.mjs`
- 如果在
package.json
中定义了module
:pkg.module
对于mjs
文件:`${getFileName(pkg.module)}.mjs`
- 以上配置都不存在时 :
`${outDir}/${basename(entry, extname(entry))}.esm.js`
对于mjs
文件:`${outDir}/${basename(entry, extname(entry))}.mjs`
对于 CJS
输出格式:
- 如果配置了
cjs.file
:`${outDir}/${cjs.file}.js`
- 如果配置了
file
:`${outDir}/${file}.js`
- 如果在
package.json
中定义了main
:pkg.main
- 以上配置都不存在时:
`${outDir}/${basename(entry, extname(entry))}.js`
对于 UMD
输出格式:
- 如果配置了
umd.file
:`${outDir}/${umd.file}.js`
对于minFile
文件:`${outDir}/${umd.file}.min.js`
- 如果配置了
file
:`${outDir}/${file}.umd.js`
对于minFile
文件:`${outDir}/${file}.umd.min.js`
- 如果在
package.json
中定义了browser
:pkg.browser
对于minFile
文件:`${getFileName(pkg.browser)}.min.js`
- 以上配置都不存在时:
`${outDir}/${basename(entry, extname(entry))}.umd.js`
对于minFile
文件:`${outDir}/${basename(entry, extname(entry))}.umd.min.js`
对于 SystemJS
输出格式:
- 如果配置了
system.file
:`${outDir}/${system.file}.js`
- 如果配置了
file
:`${outDir}/${file}.system.js`
- 如果在
package.json
中定义了browser
:`${getFileName(pkg.browser)}.system.js`
- 以上配置都不存在时:
`${outDir}/${basename(entry, extname(entry))}.system.js`
对于 IIFE
输出格式:
- 如果配置了
iife.file
:`${outDir}/${iife.file}.js`
- 如果配置了
file
:`${outDir}/${file}.iife.js`
- 如果在
package.json
中定义了browser
:`${getFileName(pkg.browser)}.iife.js`
- 以上配置都不存在时:
`${outDir}/${basename(entry, extname(entry))}.iife.js`
外部依赖说明
默认根据项目 package.json
中的 dependencies
和 peerDependencies
自动设置
- 对于
ESM
和CJS
输出格式,默认使用dependencies
和peerDependencies
的并集作为external
特别说明:对于.mjs
文件,仅使用peerDependencies
作为external
- 对于
UMD
输出格式,默认使用peerDependencies
作为external
扩展 postcss
配置
支持通过项目根目录下定义 postcss.config.js
文件进行扩展
// postcss.config.js
module.exports = context => {
console.log(context.options.entry); // 入口文件
console.log(context.options.type); // 输出格式
console.log(context.options.bundleOpts); // 配置项
return {};
};