👋🏻 Introduction

Here at Pixium we often find ourselves creating web packages for various websites.

This means a simple package that you can integrate via the script tag and then use in your code for example:

<script src="https://mycdn.a/latest/bundle.js"></script>
<script>
    pixiumPackage.helloWorld()
</script>

During the development of this package we often find ourselves recreating all the package.json scripts and information. Thus we decided to create a template that can easily be setup.

In this post we will look at what tools we use and how we came to creating this kick-ass template!

🔧 Tools Used

Here is a quick list of tools used and a quick description of how it is used in the project

🗄️ Managing Structure

Let's take a look now at how we manage folders and files in our current project

webpack-demo/
├── README.md
├── dist
├────...
├── node_modules
├────...
├── package.json
├── snowpack.config.js
├── src
├────...
├── test
├────...
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

As we can see we have 4 main folders in our project:

🕸 Webpack

In this project we use webpack and ts-loader.

Webpack is used for bundling everything in a library that is exposed in the browser while ts-loader let's us handle all the typescript necessities.

For the webpack config we use the output:library property to specify the name of the exposed library.

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        // Define the package name
        library: 'pixiumPackage',
        libraryTarget: 'umd',
        globalObject: 'this',
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

This means we can then access the library like this:

<script>
    pixiumPackage.myFunctionName()
    pixiumPackage.myClassName()
</script>

❄️️ Snowpack

Snowpack is an awesome tool that we discovered recently at Pixium. It is a modern frontend build tool that is so fast!

In this project Snowpack has a very simple use. Rendering a test environment to visualize changes in real time. It supports Hot Module Replacement which means everytime webpack will recompile a new bundle after making some changes the test environment will reload

snowpack.config.js

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    mount: {
        test: '/',
        dist: '/dist',
    },
    plugins: ['@snowpack/plugin-typescript'],
    install: [
        /* ... */
    ],
    installOptions: {
        installTypes: true,
    },
};

Here the mount parameter is the most important.

• test: '/', means we will mount the test folder as the root of the web
• dist: '/dist' means we will mount the dist folder to /dist. This means that we can then require scripts from dist for instance <script src="./dist/bundle.js"></script>

💻 Exposing our Code

And now let's finish off with taking a look at the code and how we can expose our constants, functions, class.

To make code accessible through our library we simply have to use the export method. For instance:

/**
 * Say hello world in the console
 */
export const PixiumHello = () => {
    console.log(`hello world`)
}

We can then call this in the following way:

<script>
pixiumPackage.PixiumHello()
</script>

You can also easily interact with the DOM through classic functions:

// Set the inner text
document.getElementById("pixiumBanner").innerText = "Pixium Digital Pte Ltd";

🏁 Conclusion

We now have a very simple typescript bundling in place with a HMR system in place for easy testing.

There are a few command shortcuts implemented to easily push patches, minors, majors to npm.

All this coupled with a CDN and you get an awesome blazing fast library for your frontend.

Full repo bellow

yarn

yarn start

yarn build

npm login

private: true,

yarn patch

yarn minor

yarn major

Pixium Digital - Shaping your project with technology and innovation
https://pixiumdigital.com
https://github.com/pixiumdigital