3.1.12 • Published 17 days ago

rollupx v3.1.12

Weekly downloads
46
License
MIT
Repository
github
Last release
17 days ago

rollupx

Now the 3.0-alpha version has been released, supporting vue3.

JS/TS/Vue/Scss/Less to a library, and jsdoc to a JSON.

Usage

Install

npm install --save-dev rollupx

vue2

npm install --save-dev rollupx rollup-plugin-vue@5

Examples

SingleFile

  • config
// rollupx.config.js
module.exports = {
  inputFiles: ["index.ts"],
  singleFile: true,
  outputDir: "lib",
};
  • result
- src             =>  - lib
  - index.ts      =>    - index.js & index.d.ts
  - import1.ts    =>    - (bundle)
  - import2.ts    =>    - (bundle)
  - test.scss     =>    - (bundle)
  - test.css      =>    - (bundle)
  - test.png      =>    - test.png

MultiFile

  • config
// rollupx.config.js
module.exports = {
  outputDir: "lib",
};
  • result
- src             =>  - lib
  - index.ts      =>    - index.js & index.d.ts
  - import1.ts    =>    - import1.js & import1.d.ts
  - import2.ts    =>    - import2.js & import2.d.ts
  - test.scss     =>    - (bundle)
  - test.css      =>    - (bundle)
  - test.png      =>    - test.png

MultiFormat

  • config
// rollupx.config.js
module.exports = {
  outputDir: "lib",
  formats: [
    { format: "es", inputFiles: ["**/*"] },
    { format: "esm", inputFiles: ["index.ts"], outputFile: "/esm/[name][ext]" },
    { format: "esm", inputFiles: ["index.ts"], outputFile: "[name].esm.js" },
    { format: "cjs", inputFiles: ["index.ts"], outputFile: "/cjs/[name][ext]" },
    { format: "cjs", inputFiles: ["index.ts"], outputFile: "[name].cjs.js" },
    { format: "umd", inputFiles: ["index.ts"], outputFile: "[name].umd[ext]" },
  ],
};
  • result
- src             =>  - lib
  - index.ts      =>    - index.js & index.d.ts
  - import1.ts          - import1.js & import1.d.ts
  - import2.ts          - import2.js & import2.d.ts
  - test.scss     =>    - (bundle)
  - test.css      =>    - (bundle)
  - test.png      =>    - test.png

  - index.ts      =>    - esm
                  =>      - index.js

  - index.ts      =>    - cjs
                  =>      - index.js

  - index.ts      =>    - index.ems.js
  - index.ts      =>    - index.cjs.js
  - index.ts      =>    - index.umd.js

Config

types

export type Options = {
  // 输出文件头信息
  banner?: string;

  // 输入文件目录,相对与 cwd,默认 src
  inputDir?: string;
  // 输出目录,相对于 cwd,默认 lib
  outputDir?: string;
  // 输入文件,支持 glob 规则,相对于 inputDir
  inputFiles?: string[];
  // 排除文件,支持 glob 规则,相对于 inputDir
  excludeFiles?: string[];

  // 指定输出类型
  outputs?: ("js" | "styles" | "types")[];

  // 是否打包为单文件,默认 false 每个文件独立输出
  singleFile?: boolean;

  // 多种格式同时打包
  formats?: Options[];

  // 输出格式
  format?: "amd" | "cjs" | "es" | "iife" | "umd" | "system";

  // 输出文件地址,/ 开头时将基于 outputDir,例如:'/[name][ext]'
  outputFile?: string;
  // 模块导出名称
  outputName?: string;
  // 引入的全局属性,例如:{ jquery: '$' }
  outputGlobals?: Record<string, string>;
  // 引入的外链
  outputPaths?: string[];
  // 作为外部引入的库,例如:['jquery']
  external?: string[];

  // 扩展名配置
  extensions?: string[];
  // 路径别名配置
  aliasConfig?: Record<string, string>;
  // tsconfig.json 配置
  tsConfig?: TsConfig;

  // 样式目录名,相对于 inputDir
  stylesDir?: string;
  // 需要编译的样式文件,相对于 stylesDir,例如:index.scss 入口文件
  stylesParseFiles?: string[];
  // 需要拷贝的样式文件,相对于 stylesDir,例如:var.scss 变量文件
  stylesCopyFiles?: string[];

  // 输出的 d.ts 目录名
  typesOutputDir?: string;

  // 是否统计模块占用情况,仅在 singleFile 为 true 时生效,默认为 false
  stat?: boolean;

  // 是否为 node 模块
  node?: boolean;

  // 全局替换变量,例如:{ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }
  replace?: Record<string, string>;

  // 组合式 API
  compositionAPI?: boolean;

  // 监听模式
  watch?: boolean;
};

default config

// project/rollupx.config.js
// default config
module.exports = {
  banner:
    "/*!\n" +
    ` * (rollupx banner) v1.0.0\n` +
    ` * (c) 2019-${new Date().getFullYear()}\n` +
    " */\n",

  inputDir: "src",
  outputDir: "dist",
  // multi file
  inputFiles: ["**/*"],
  // single file
  // inputFiles: ['index.*'],

  excludeFiles: ["**/+(__tests__|__specs__)/**", "**/*.spec.*"],

  // output types
  outputs: ["js", "styles", "types"],

  singleFile: false,

  /**
   * custom build format, example:
   * ```
   * // rollupx.config.js
   * export default {
   *   format: 'umd',
   *   external: ['jquery'],
   *   outputName: 'MyBundle',
   *   outputGlobals: {
   *     jquery: '$'
   *   }
   * }
   * // bundle.js
   * // var MyBundle = (function ($) {
   * //   $.doSomeThing();
   * // }($));
   * ```
   */
  /** @type {'amd' | 'cjs' | 'es' | 'iife' | 'umd' | 'system'} */
  format: "es",
  outputName: undefined,
  outputGlobals: undefined,
  outputPaths: undefined,
  external: undefined,

  extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
  aliasConfig: {
    "@": "src",
    "~": process.cwd() + "/node_modules/",
  },
  tsConfig: undefined,

  stylesDir: "",
  stylesParseFiles: [],
  stylesCopyFiles: [],

  // inherit outputDir
  typesOutputDir: "",

  stat: false,
};

recommend config

example in your project/babel.config.js:

module.exports = {
  extends: "rollupx/babel.config.js",
  exclude: "node_modules/**",
};

example in your project/tsconfig.json:

{
  "extends": "rollupx/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["global.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

Build

$ rollupx

# only js
$ rollupx --outputs=js

# input files
$ rollupx --input-files=index.ts

more args see config's field.

Publish

  • update your package.json
    • name your package name
    • version current version
    • author your name
    • module main esm module
    • types main ts module
    • files need to publish files
    • dependencies your package required external dependencies
{
  "name": "xxx",
  "version": "1.1.1",
  "author": "your name",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": ["dist", "README.md"],
  "dependencies": {
    // must be includes --- start
    "@babel/runtime": "^7.x",
    "core-js": "^3.x",
    "style-inject": "^0.x",
    // must be includes --- end

    // your package required external
    "element-plus": "^2.x",
    "vue": "^3.x"
  }
}

@TODO

  • use esbuild
  • url(...) in style file can not be rebase path when multi-level nested import.
  • rollup-plugin-vue@5(vue2) has not updated for two years, required packages version too low:
    • postcss@7
  • gulp@4 has not updated for three years, required packages version too low:
    • glob-parent
3.1.12

17 days ago

3.1.11

21 days ago

3.1.11-beta.2

23 days ago

3.1.11-beta.1

24 days ago

3.1.11-beta.3

23 days ago

3.1.11-beta.0

25 days ago

3.1.10

3 months ago

3.1.9

3 months ago

3.1.9-beta.0

3 months ago

3.1.7

3 months ago

3.1.8

3 months ago

3.1.6

4 months ago

3.1.5

4 months ago

3.1.3

7 months ago

3.1.2

8 months ago

3.1.4

7 months ago

3.1.2-beta.0

10 months ago

3.1.2-beta.2

10 months ago

3.1.2-beta.1

10 months ago

3.1.2-beta.4

10 months ago

3.1.2-beta.3

10 months ago

3.1.2-beta.6

8 months ago

3.1.2-beta.5

10 months ago

2.0.28

1 year ago

2.0.29

1 year ago

2.0.31

1 year ago

2.0.32

1 year ago

2.0.30

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

2.0.31-beta.0

1 year ago

2.0.32-beta.1

1 year ago

2.0.32-beta.0

1 year ago

2.0.31-beta.1

1 year ago

2.0.31-beta.2

1 year ago

2.0.31-beta.3

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

2.0.27

1 year ago

2.0.27-beta.0

1 year ago

2.0.27-beta.1

1 year ago

2.0.26

2 years ago

2.0.25

2 years ago

3.0.0-alpha.1

2 years ago

3.0.0-alpha.0

2 years ago

3.0.0-alpha.3

2 years ago

2.0.7

2 years ago

3.0.0-alpha.2

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

3.0.0-alpha.4

2 years ago

2.0.8

2 years ago

2.0.15

2 years ago

2.0.16

2 years ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

2.0.19

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

2.0.24

2 years ago

2.0.22

2 years ago

2.0.23

2 years ago

2.0.20

2 years ago

2.0.21

2 years ago

2.0.5

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.4

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.3.16

2 years ago

1.3.14

3 years ago

1.3.15

2 years ago

1.3.13

3 years ago

1.3.12

3 years ago

1.3.7

3 years ago

1.3.6

3 years ago

1.3.10

3 years ago

1.3.11

3 years ago

1.3.9

3 years ago

1.3.8

3 years ago

1.3.5

3 years ago

1.3.4

3 years ago

1.3.3

3 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.12

3 years ago

1.2.10

3 years ago

1.2.11

3 years ago

1.2.8

3 years ago

1.2.9

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago