This section outlines how to install and configure Packem to get you started. Based off a simple configuration, you could extend your needs further to fit your use-cases.
To install Packem, your system needs to meet a few requirements:
- Node (v10, v9 or v8) must be installed (with npm). If you use Yarn, then follow along with the appropriate commands.
Packem binaries are not available for Windows but are expected when v1.0-stable lands.
Through your terminal, run:
# Default installation method (with npm) npm install -g packem # For Yarn, run yarn global add packem
It is highly recommended to install Packem globally so that any version update could allow multiple projects using Packem to compile using the latest installed version. You can check more about the versionings here. Alternatively, you could install it locally then use a package runner like npx to run Packem on your project locally.
After installing Packem, setting up your workspace environment will be a matter of adding a single YAML file at the root of your project. Packem needs this configuration file to tell exactly what and how your code should be bundled.
In the root of your project’s file structure, add a
.packemrc (YAML) file. This file will contain all the necessary configuration options for your project. In this file, you’ll need to define the following fields:
input: "./src/index.js" output: "./dist/bundle.js" format: "iife"
Packem v0.1.4 and below require a
packem.config.ymlinstead. Using these versions are discouraged since they don’t conform with v1.0 APIs as much as v0.2.
input field is where the bundling process starts and the
output field is where your final concatenated bundle ends up. You need to point to an existing file (no dynamic file creations) to get the input point right. Packem takes care of the rest of the process according to how you’ve defined it.
inputfield is necessary. The
outputfield defaults to
"./build"if its not defined.
From the terminal, run the command
packem in the root directory of your project. When the bundling process is finish, return back to your project and check the output folder you specified (i.e.
./dist/bundle.js). If you get lost, run
packem --help to find more details on more command options.