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 的配置项，详细说明请查看相关文档

其他

输出文件名说明

输出文件名可通过相关配置项定义，整体上由以下优先级确定：

1. 具体输出格式指定的文件名
2. 顶层配置项指定的文件名
3. package.json 中入口字段的值
4. 打包入口文件的文件名

对于 ESM 输出格式：

1. 如果配置了 esm.file ：`${outDir}/${esm.file}.js`对于 mjs 文件：`${outDir}/${esm.file}.mjs`
2. 如果配置了 file ：`${outDir}/${file}.esm.js`对于 mjs 文件：`${outDir}/${file}.mjs`
3. 如果在 package.json 中定义了 module ：pkg.module对于 mjs 文件：`${getFileName(pkg.module)}.mjs`
4. 以上配置都不存在时 ：`${outDir}/${basename(entry, extname(entry))}.esm.js`对于 mjs 文件：`${outDir}/${basename(entry, extname(entry))}.mjs`

对于 CJS 输出格式：

1. 如果配置了 cjs.file ：`${outDir}/${cjs.file}.js`
2. 如果配置了 file ：`${outDir}/${file}.js`
3. 如果在 package.json 中定义了 main ：pkg.main
4. 以上配置都不存在时：`${outDir}/${basename(entry, extname(entry))}.js`

对于 UMD 输出格式：

1. 如果配置了 umd.file ：`${outDir}/${umd.file}.js`对于 minFile 文件：`${outDir}/${umd.file}.min.js`
2. 如果配置了 file ：`${outDir}/${file}.umd.js`对于 minFile 文件：`${outDir}/${file}.umd.min.js`
3. 如果在 package.json 中定义了 browser ：pkg.browser对于 minFile 文件：`${getFileName(pkg.browser)}.min.js`
4. 以上配置都不存在时：`${outDir}/${basename(entry, extname(entry))}.umd.js`对于 minFile 文件：`${outDir}/${basename(entry, extname(entry))}.umd.min.js`

对于 SystemJS 输出格式：

1. 如果配置了 system.file ：`${outDir}/${system.file}.js`
2. 如果配置了 file ：`${outDir}/${file}.system.js`
3. 如果在 package.json 中定义了 browser ：`${getFileName(pkg.browser)}.system.js`
4. 以上配置都不存在时：`${outDir}/${basename(entry, extname(entry))}.system.js`

对于 IIFE 输出格式：

1. 如果配置了 iife.file ：`${outDir}/${iife.file}.js`
2. 如果配置了 file ：`${outDir}/${file}.iife.js`
3. 如果在 package.json 中定义了 browser ：`${getFileName(pkg.browser)}.iife.js`
4. 以上配置都不存在时：`${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 {};
};