package-cli-service

在这里插入图片描述

介绍

package-cli-service 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 create-package-tools 创建的项目中。

package-cli-service 是构建于 rollup 和 webpack 之上的。它包含了：

一个针对绝大部分 package 优化过的内部的 rollup 配置；
项目内部的 package-cli-service 命令，提供 serve-example、build-example、lint、fix、analyzer、build 、pub 、serve-storybook、build-storybook 命令。

如果你熟悉 @vue/cli-service 的话，package-cli-service 实际上大致等价于 @vue/cli-service，尽管功能集合不一样。并且package-cli-service 专注于为构建发布 npm包提供完整的工作流。

使用命令

package-cli-service 安装了一个名为 package-cli-service 的命令。你可以在 npm scripts 中以 package-cli-service、或者从终端中以 ./node_modules/.bin/package-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

"scripts": {
  "serve-example": "package-cli-service serve-example",
  "build-example": "package-cli-service build-example",
  "lint": "package-cli-service lint",
  "fix": "package-cli-service fix",
  "analyzer": "package-cli-service analyzer",
  "build": "package-cli-service build",
  "pub": "package-cli-service pub",
  "alpha": "package-cli-service pub --npm-tag=alpha",
  "beta": "package-cli-service pub --npm-tag=beta",
  "prepublishOnly": "package-cli-service prepublish",
  "serve-storybook": "package-cli-service serve-storybook -p 6006",
  "build-storybook": "package-cli-service build-storybook",
  "all-changelogs": "package-cli-service generate-all-changelogs"
},

你可以通过 npm 或 Yarn 调用这些 script：

npm run pub
# OR
yarn pub

如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命令：

npx package-cli-service pub

package-cli-service pub

用法：package-cli-service serve

选项：

  --npm-tag=alpha   				发布 alpha 版本
  --npm-tag=beta					发布 beta 版本
  --config   				   		自定义配置文件
  --skip-compile   					跳过编译
  --skip-append-changelog		  	跳过向 README.md 写入更新日志
  --skip-robot   					跳过机器人消息推送
  --skip-publish    				跳过发布
  --custom-version  				自定义版本号
  --skip-fetch-tags 				跳过拉取 git tags

package-cli-service pub 命令会发布组件。它是 package-cli-service 最重要最核心的功能，该命令集成了以下几个工作流：

package-cli-service pub 工作流

更新 version
自动生成changelog
编译打包
发布
机器人消息推送

package-cli-service serve-example

用法：package-cli-service serve-example

package-cli-service serve-example 命令会为 example 启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

package-cli-service build-example

用法：package-cli-service build-example

package-cli-service build-example 命令会打包 example 项目

package-cli-service lint

用法：package-cli-service lint

package-cli-service lint 命令会使用 eslint 默认检测 src、example 代码中的问题。

你也可以自定义你要检测的文件，只需要这样做 package-cli-service lint ./components1 ./components2

package-cli-service fix

用法：package-cli-service fix

package-cli-service fix 命令会使用 eslint 默认修复 src、example 代码中的问题。

你也可以自定义你要检测的文件，只需要这样做 package-cli-service fix ./components1 ./components2

package-cli-service analyzer

用法：package-cli-service analyzer

package-cli-service analyzer 命令会使用 rollup-plugin-visualizer 来可视化并分析组件包，以查看哪些模块占用了空间。

package-cli-service build

用法：package-cli-service build

选项：

  --config      自定义配置文件
  --watch       查看bundle中的文件并根据更改重新构建

package-cli-service build 命令只会编译打包组件，不进行发布

package-cli-service serve-storybook

用法：package-cli-service serve-storybook

选项：

  --port      	指定 storybook 运行的端口

package-cli-service serve-storybook 命令会启动 storybook，提供可视化组件及组件文档

package-cli-service build-storybook

用法：package-cli-service build-storybook

package-cli-service build-storybook 命令会编译打包storybook，输出一个静态资源dist-storybook，你可以将之发布在你的组件在线文档中

package-cli-service prepublish

用法：package-cli-service prepublish

package-cli-service prepublish 命令是组件包发布前的的拦截器，该命令会阻止非使用 package-cli-service 进行发布组件包。

如使用 npm publish 将会被阻止。

generate-all-changelogs

用法：package-cli-service generate-all-changelogs

package-cli-service generate-all-changelogs 命令是给组件包生成所有更新日志。

查看所有的可用命令

你可以运行以下命令查看所有命令：

npx package-cli-service help

你也可以这样学习每个命令可用的选项：

npx package-cli-service help [command]

配置参考 package-cli-service.config.js

input

包的入口点
Type: string | string []| { [entryName: string]: string }
Default: src/index.js

outputDir

定义输出 package 所创建的 bundle 的目录名
Type: string
Default: dist

cjsDir

定义输出 commonjs 所创建的 bundle 的目录名
Type: string
Default: lib

esDir

定义输出 ES module 所创建的 bundle 的目录名
Type: string
Default: es

umdDir

定义输出 umd 所创建的 bundle 的目录名
Type: string
Default: umd

output.umd

是否输出 umd 格式的 bundle
Type: boolean
Default: false

output.name

对于iife/umd包来说是必需的，在这种情况下，它是代表你的包的全局变量名
Type: string
Default: none

output.globals

指定umd/iife包中外部导入所需的 id: variableName 对
Type: { [id: string]: string }| ((id: string) => string)
Default: none

output.plugins

该选项用于指定输出插件，这是设置插件的唯一入口
Type: OutputPlugin | (OutputPlugin | void)[]

external

从输出的 bundle 中排除依赖，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
Type: (string | RegExp)[]| RegExp| string| (id: string, parentId: string, isResolved: boolean) => boolean
Default: none

eslintOptions

@rollup/plugin-eslint 的options。一个Rollup插件，它用于lint入口点和所有ESLint导入的文件
Type: object

externalsOptions

rollup-plugin-node-externals 的options。一个Rollup插件，自动将NodeJS内置模块声明为外部模块。也处理npm dependencies, devDependencies, peerDependencies and optionalDependencies
Type: object

aliasOptions

@rollup/plugin-alias 的options。一个Rollup插件，创建 import 或 require 的别名，来确保模块引入变得更简单
Type: object

Default:

entries: @ => src

customResolver:

resolve({
  extensions: ['.js', '.ts', '.jsx', '.tsx', '.less', '.scss', '.mjs']
})

resolveOptions

@rollup/plugin-node-resolve 的options。一个Rollup插件，可以让 Rollup 查找到外部模块
Type: object
Default:
- extensions: ['.js', '.ts', '.jsx', '.tsx', '.less', '.scss', '.mjs']

commonjsOptions

@rollup/plugin-commonjs 的options。一个Rollup插件，目前，NPM上的大多数包都输出为CommonJS模块。@rollup/plugin-commonjs 可以在Rollup处理CommonJS之前将它们转换为ES2015
Type: object

urlOptions

@rollup/plugin-url 的options。一个Rollup插件，可以导入JPG, PNG, GIF, SVG和WebP文件。
Type: object

Default:

{
  fileName: '[dirname][name][extname]',
  sourceDir: path.join(__dirname, 'src')
}

typescriptOptions

rollup-plugin-typescript2 的options。带有编译器错误的typescript Rollup插件
Type: object

babelOptions

@rollup/plugin-babel 的options。在rollup里应用 babel 解析ES6的桥梁
Type: object

Default:

{
  extensions: [
    ...DEFAULT_EXTENSIONS,
    ".ts",
    ".tsx",
  ],
  babelHelpers: "runtime",
  exclude: "node_modules/**",
  presets: [
    [
      "@babel/preset-env",
      {
        modules: false,
        useBuiltIns: "usage",
        corejs: 3,
      },
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  plugins: ["@babel/plugin-transform-runtime"],
}

postcssOptions

rollup-plugin-postcss 的options。Rollup和PostCSS之间的无缝集成。
Type: object

Default:

{
  plugins: [
    postcssUrl({
      url: "inline", // enable inline assets using base64 encoding
      maxSize: 100, // maximum file size to inline (in kilobytes)
      fallback: "copy",
      includeUriFragment: true, // 在 URI 末尾包含片段标识符
      ignoreFragmentWarning: true, // 内联带有片段的 SVG URL 时不发出警告
      optimizeSvgEncode: true, // 减小内联 svg 的大小（IE9+，Android 3+）
    }),
  ],
}

stripOptions

@rollup/plugin-strip 的options。一个Rollup插件，在打包时从代码中删除 debugger、assert.equal 和 console.*
Type: object
Default:
```
{
  labels: ["unittest"],
}
```

terserOptions

@rollup/plugin-terser 的options。一个Rollup插件，进行代码压缩
Type: object

deleteOptions

rollup-plugin-delete 的options。一个Rollup插件，当你想在打包之前清理dist或其他文件夹和文件时，这个插件是有用的
Type: object
Default:
```
{
  targets: `${outputDir}/*`,
}
```

visualizerOptions

rollup-plugin-visualizer 的options。一个Rollup插件，可视化并分析Rollup包，以查看哪些模块占用了空间。
Type: object

Default:

{
  filename: `./dist-visualizer/stats.html`,
  title: `${packageJson.name} visualizer`,
  open: true,
  template: "treemap",
  gzipSize: true,
}

copyOptions

rollup-plugin-copy 的options。一个Rollup插件，打包时复制文件和文件夹
Type: object

copyToDistExt

需要在打包时复制到outputDir目录的文件后缀
Type: string[]
Default: ['.less']

storybookConfig

storybook 配置
Type: object
- configDir:
  - .storybook 目录地址
  - Type: relative path
- outputDir:
  - build-storybook 输出目录
  - Type: string
  - Default: dist-storybook
- robotDetailUrl:
  - 详情地址
  - Type: string
  - Default: https://www.npmjs.com/package/${packageName}

robotConfig

package 发布|删除|废弃时推送飞书机器人消息
Type: object
- robotUrl:
  - 推送地址
  - Type: string
- packageName:
  - 包名
  - Type: string
  - Default: package.json name
- robotDetailUrl:
  - 详情地址
  - Type: string
  - Default: https://www.npmjs.com/package/${packageName}