@autopack/vpack

[][typescript-5]

📦 基于 rollup 的 VUE 包基础核心构建工具 One common construction and package tool for VUE components based on Rollup 📦

✨ Features

• 基于 rollup 的基础核心构建工具

• 支持 Vue

• 支持自定义banner，可通过指定package中__cusBannerString__字段值修改本工具品牌名称

• Basic core build tools based on rollup

• Supports mutiple frameworks such as vue

• Support custom banner, you can modify the brand name of this tool by specifying the value of the cusBannerString field in the package

🚀 Quick Start

Installion

npm i -D @autopack/vpack@latest # OR yarn add -D @autopack/vpack@latest

Usage

First Step：Add the scripts in package.json：

  "scripts": {
    "build": "NODE_ENV=production vpack build --source=js"
  },

Second Step：Goes to the project directory and runs:

npm run build # OR yarn build

@autopack/vpack 默认以 src/index.ts 为入口，在 dist 目录输出 'umd', 'es', 'cjs', 'iife', 'amd' 五种格式的构建包（包含未压缩和已压缩版本）。

@autopack/vpack defaults to 'src/index.ts' as the entry, and outputs 'umd', 'es', 'cjs', 'iife', 'amd'' build packages (including uncompressed and compressed versions) in the 'dist' directory.

Custom Config

可在项目根目录新建 autopack.config.js 自定义 @autopack/vpack 构建配置（或在 package.json 中使用 autopackConfig 对象配置）。

You can create a new 'autopack.config.js' custom @autopack/vpack build configuration at the project root (or use the 'autopackConfig' object configuration in 'package.json')

支持自定义banner，可通过指定package.json文件中__cusBannerString__字段值修改本工具品牌名称。

Custom banners are supported, and you can modify the brand name of the tool by specifying the value of the cusBannerString field in the package.json file

如需指定打包需要隔离的依赖包，则可配置 formatConfig 属性对象

If you need to specify that packaging depends on packages that need to be isolated, you can configure the formatConfig property object

  "formatConfig": {
    [format]: {
      external: ['xxx']
    }
  },

如需整体隔离 dependences 全体依赖包，可指定 isolateDep: true

To isolate all dependent packages of dependences as a whole, specify isolateDep: true

  "formatConfig": {
    [format]: {
      isolateDep: true,
    }
  },

debug 并且非production环境状态会自动开启 rollup-serve，可配置 templateBase 属性指定模版 index.html 所在路径

The debug and development states automatically turns on rollup-serve, and you can configure the templateBase property to specify the path where the template index.html is located.

  "formatConfig": {
    templateBase: 'examples/',
  },

batchPackage 布尔状态会自动开启批量打包, 默认批量路径为"./packages"，可配置 input 数组属性指定input路径文件

  "batchPackage": true,

@autopack/vpack 默认配置/配置示例 Default Config

/**
 * @autopack/vpack 默认配置 Default Config
 */
module.exports = ({ pkg } = {}) => {
  return {
    // 输入 Input
    input: 'src/index.vue',

    // 输出 Output
    output: {
      // 目录 directory
      directory: 'dist',
      // 包名 name
      name: /\//.test(pkg.name) ? pkg.name.match(/\/(.+)/)[1] : pkg.name,
      // 格式 format
      format: ['umd', 'es', 'cjs', 'iife', 'amd'],
      // 顶部注释 banner
      banner: `/*!
* ${pkg.name} with v${pkg.version}
* Author: ${pkg.author}
* Built on ${new Date().toLocaleDateString()}
* Released under the ${
        pkg.license
      } License Copyright (c) 2021-${new Date().getFullYear()}
*/`
    },
    formatConfig: {
      umd: {
        // 打包屏蔽的外部模块 Shielded external modules
        external: ['lodash', 'moment'],
        // 外部pkg.dependences依赖不屏蔽 Isolate dependences not blocking
        isolateDep: false
      },
      es: {
        external: ['lodash', 'moment'],
        // 自动屏蔽全部pkg.dependences依赖 Blocking isolate dependences
        isolateDep: true
      },
      cjs: {
        external: [],
        isolateDep: false
      },
      iife: {
        external: [],
        isolateDep: false
      },
      amd: {
        external: [],
        isolateDep: false
      }
    },
    skipAlert: true, // 重复路径是否提示覆盖并继续构建，默认不提示 Whether the duplicate path prompts to override and continue building, it is not prompted by default
    templateBase: 'examples/', // rollup-plugin-serve build base
    // devServeInput: 'examples/index.js', // rollup-plugin-serve build input file
    batchPackage: false, //是否批量打包packages路径下的组件, 默认打包路径, 会覆盖input路径
    replaceMaps: {},
    stylusAlias: {
      '@': path.join(cwd, './node_modules/@')
    },
    styleExtract: false
  }
}

License

MIT

Copyright (c) 2022-present, YanPan