rollup & TypeScript & tslib All In One

rollup & TypeScript & tslib All In One

tslib is a runtime library for TypeScript that contains all of the TypeScript helper functions.

tslib 是一个包含所有 TypeScript 辅助函数的 TypeScript 运行时库。

https://www.npmjs.com/package/tslib

https://github.com/microsoft/tslib

rollup output.name

import * as pkg from "./package.json";

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';

// 入口文件
const input = 'src/index.ts';

export default [
  {
    input,
    output: {
      name: 'wcui_esm',
      file: pkg.main,
      format: 'esm',
    },
    plugins: [
      nodeResolve(),
      typescript(),
    ],
  },
  {
    input,
    output: {
      // cdn 方式引入时, 挂载在 window 对象上的名称
      name: 'wcui_umd',
      file: pkg.browser,
      // file 与 dir 只能选择一种
      // file: 'dist/index.umd.js',
      // dir: 'dist',
      format: 'umd',
      // globals: 'lit',
    },
    // external: ['lit'],
    plugins: [
      // json(),
      // terser(),
      nodeResolve(),
      typescript(),
    ],
  },
];

iife & esm & umd

{
  "version": "1.0.0",
  "main": "dist/how-long-till-lunch.cjs.js",
  "module": "dist/how-long-till-lunch.esm.js",
  "browser": "dist/how-long-till-lunch.umd.js",
}

https://github.com/rollup/rollup-starter-lib/blob/master/package.json#L4-L6

https://github.com/rollup/rollup-starter-lib/blob/master/rollup.config.js#L11-L16

https://github.com/rollup/rollup-starter-app/blob/master/rollup.config.js#L13

rollup plugins

@rollup/plugin-commonjs

A Rollup plugin to convert CommonJS modules to ES6, so they can be included in a Rollup bundle

一个将 CommonJS 模块转换为 ES6 模块的 Rollup 插件，以便它们可以包含在 Rollup 的包中

https://www.npmjs.com/package/@rollup/plugin-commonjs

@rollup/plugin-typescript

A Rollup plugin for seamless integration between Rollup and Typescript.

Rollup 插件，用于 Rollup 和 Typescript 之间的无缝集成。

https://www.npmjs.com/package/@rollup/plugin-typescript

typescript auto generator .d.ts file

// tsconfig.json

{
  "compilerOptions": {
    "declaration": true, // 根据ts文件自动生成.d.ts声明文件和js文件
    "emitDeclarationOnly": true, // 只输出.d.ts声明文件，不生成js文件
  }
}

-d or --declaration

  "scripts": {
    "dev": "yarn rm && yarn cp && rollup -w -c rollup.config.js",
    "build": "yarn rm && yarn tscd && rollup -c",
    "tscd": "tsc -d",
    "tscw": "tsc -w",
    "rm": "rm -rf ./dist/*.*",
    "cp": "cp ./test/index.html ./dist/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

declaration-files

https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html

https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html

https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html

refs

https://stackoverflow.com/questions/45101769/how-to-generate-d-ts-in-typescript

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---