serpack/runtime

As you can see from the compilation results of serpack, you can see about 5 lines of definitions and other additional code to run.

You can hide this additional code using the runtime.

npx serpack ./src/index.ts --runtime

#APIs

#env()

Load runtime environment variables.

import { env } from 'serpack/runtime';
 
console.log(env().target === 'node'); // type target = "browser" | "node"

#createRequire() --runtime node-only

Receive a virtual module and create a requirement.

import { createRequire } from 'serpack/runtime';
 
// createRequire is node-only feature
process.env.__RUNTIME__ = JSON.stringify({ target: 'node' });
 
const $require = createRequire({
  1: (__serpack_require__, require, module, exports) => {
    module.exports = 'Hello World';
  },
});
 
console.log($require('sp:1')); // Hello World

#Size Reduction

• target: @playground/typescript/pages/index.ts

553 KB

Size reduced by 60%.

#Troubleshooting

#Error: Cannot find module '@swc/helpers'

This error occurs because the @swc/helpers package is damaged or missing.

npm i --save-dev @swc/helpers

#TypeError: __serpack_require__ is not a function

An error occurred because the target is not set to node. This can occur when you create a require using createRequire().

process.env.__RUNTIME__ = JSON.stringify({ target: 'node' });
// or window.__RUNTIME__ = JSON.stringify({ target: 'node' });

Change runtime environment to node.