【package-cli-service】为package提供完成的工作流,如更新 version、自动生成changelog、编译打包、发布、机器人消息推送、eslint、storybook...

package-cli-service

介绍

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

CLI 服务是构建于rollup、 webpack 和 webpack-dev-server 之上的。它包含了:

  • 一个针对绝大部分 package 优化过的内部的 rollup 配置;
  • 项目内部的 package-cli-service 命令,提供 serve-examplebuild-examplelintfixanalyzerbuildpubserve-storybookbuild-storybook 命令。

如果你熟悉 @vue/cli-service 的话,package-cli-service 实际上大致等价于 @vue/cli-service,尽管功能集合不一样。但package-cli-service 专注于为 package 提供完整的工作流。


使用命令

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 工作流

  1. 更新 version
  2. 自动生成changelog
  3. 编译打包
  4. 发布
  5. 机器人消息推送

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 默认检测 srcexample 代码中的问题。

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


package-cli-service fix

用法:package-cli-service fix

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

你也可以自定义你要检测的文件,只需要这样做 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插件,创建 importrequire 的别名,来确保模块引入变得更简单

  • 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插件,在打包时从代码中删除 debuggerassert.equalconsole.*

  • 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}

你可能感兴趣的:(Node.js,Rollup,Webpack,机器人,webpack,javascript)