TS Package with RollUp#

Init Project#

```bash
mkdir ts-rollup
cd ts-rollup
mkdir demo src
touch src/index.ts
touch rollup.config.js
npm init -y
npm install typescript tslib @rollup/plugin-typescript -D
npm install --save-dev rollup-plugin-terser
npx tsc --init

```

Config#

  • rollup.config.js

import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/bundle.min.js",
    format: "esm",
  },
  plugins: [typescript(), terser()],
};

  • package.json Use files to control what folders you want to upload to NPM.

{
  "name": "ts-rollup",
  "version": "1.0.0",
  "description": "",
  "main": "dist/bundle.min.js",
  "scripts": {
    "build": "tsc && rollup -c rollup.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "typings": "dist/types/index.d.ts",
  "files": ["dist", "src"],
  "repository": {
    "type": "git",
    "url": ""
  },
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-typescript": "^8.3.2",
    "rollup-plugin-terser": "^7.0.2",
    "tslib": "^2.4.0",
    "typescript": "^4.6.4"
  }
}

  • tsconfig.js

{
  "compilerOptions": {
    "target": "es5",
    "module": "ESNext",
    "declaration": true,
    "sourceMap": true,
    "declarationDir": "./dist/types"
  }
}

  • To allow script import after build Add multiple output in rollup.config.js

import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";

export default {
  input: "src/index.ts",
  output: [
    {
      file: "dist/bundle.esm.js",
      format: "esm",
    },
    {
      file: "dist/bundle.umd.js",
      format: "umd",
      name: "Skycoco",
    },
  ],
  plugins: [typescript(), terser()],
};

Then we need to modify package.json

{
  "main": "dist/bundle.umd.js",
  "moudle": "dist/bundle.esm.js"
}

main is for import

moudle is for require

  • In html script

<script src="../dist/bundle.umd.js"></script>
<body>
  <script>
    //   Skycoco.add(10,10)
    const util = window.Skycoco;
    console.log(util.add(10, 20));
  </script>
</body>

Rollup package .glsl/.vs/.fs/.vert/.fragment file#

  npm i rollup-plugin-glslify --save-dev

In rollup.config.js, more see (https://blog.meglody.com/diary/%E4%BD%BF%E7%94%A8TypeScript%E5%BC%80%E5%8F%91WebGL%EF%BC%88%E4%B8%80%EF%BC%89%E4%BD%BF%E7%94%A8%E7%9D%80%E8%89%B2%E5%99%A8/)

import glslify from "rollup-plugin-glslify";
export default {
  plugins: [typescript(), terser(), glslify()],
};

In root folder, create a index.d.ts file.

declare module "*.vert";
declare module "*.frag";
declare module "*.vs";
declare module "*.fs";
declare module "*.glsl";

Rollup url loader#

npm i @rollup/plugin-url -D

In rollup.config.js, more see (https://www.npmjs.com/package/@rollup/plugin-url)

import url from "@rollup/plugin-url";

export default {
  input: "src/index.js",
  output: {
    dir: "output",
    format: "cjs",
  },
  plugins: [url()],
};

In ts we can do

// src/index.js
import svg from "./image.svg";
console.log(`svg contents: ${svg}`);

Also in index.d.ts, we need to declare file. such as

declare module "*.svg";
declare module "*.hdr";

test js online#

jsbin

Upload steps#

  • Upload steps

        npm adduser / npm login
    npm publish .

  • Version use Semantic version

    1.2.3 1: major, when you make a big change 2: minor, when you add new functions 3: patch, when you fix something

    npm version major
    npm version minor
    npm version patch

Update for package .glsl/.vs/.fs/.vert/.fragment file#

  • Install these dependencies

npm i rollup-plugin-commonjs -D
npm i rollup-plugin-glslify -D
npm i rollup-plugin-node-resolve -D
npm i rollup-plugin-typescript2 -D
npm i glsl-blend-soft-light
npm i glsl-film-grain

  • config rollup.config.js

import path from "path";
import resolve from "rollup-plugin-node-resolve"; // 依赖引用插件
import commonjs from "rollup-plugin-commonjs"; // commonjs模块转换插件
import glslify from "rollup-plugin-glslify";
import ts from "rollup-plugin-typescript2";
const getPath = (_path) => path.resolve(__dirname, _path);
import packageJSON from "./package.json";

const extensions = [".js", ".ts", ".tsx"];

// 导入本地ts配置
const tsPlugin = ts({
  tsconfig: getPath("./tsconfig.json"),
  tsconfigOverride: { extensions },
});

// 基础配置
const commonConf = {
  // 入口文件
  input: getPath("./src/index.ts"),
  plugins: [
    resolve({
      extensions,
    }),
    glslify(),
    commonjs(),
    tsPlugin,
  ],
};

// 需要导出的模块类型
const outputMap = [
  {
    file: "dist/bundle.esm.js",
    format: "esm",
  },
  {
    file: "dist/bundle.umd.js",
    format: "umd",
    name: "Copper",
  },
];

const buildConf = (options) => Object.assign({}, commonConf, options);

export default outputMap.map((output) => {
  const conf = buildConf({
    output: {
      ...output,
      name: packageJSON.name,
    },
  });
  return conf;
});

  • In package.json

{
  "name": "gltfloader-plugin-test",
  "version": "1.2.0",
  "description": "for test",
  "main": "dist/bundle.umd.js",
  "moudle": "dist/bundle.esm.js",
  "types": "dist/types/index.d.ts",
  "scripts": {
    "build": "tsc && rollup -c rollup.config.js",
    "build:test": "rollup -c rollup.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "files": ["dist"]
}

recommand use npm run build to package.

  • load css

npm i rollup-plugin-postcss postcss --D

  • In rollup.config.js

  import postcss from 'rollup-plugin-postcss'
  export default {
    input: ...,
    output: ...,
    plugins:[
      postcss()
    ]
  }