This article will show you how to develop a JavaScript class library for those interested.

The IDE is recommended to use VS Code, which has many useful plug-ins.

This article mainly uses the following technology stack:

  • Node.js + npm
  • TypeScript
  • rollup.js
  • commitizen
  • husky

Node.js

Node.js is an event-driven, non-blocking I/O server-side JavaScript environment running on Google V8 engine. As front-end engineers are more familiar with JS syntax, front-end code building and packaging tools are widely used in Node.js.

TypeScript

Why we choose TS rather than JS as the development language of the class library, summarize the following reasons:

  • Compared with JS, TS is rigorous and flexible, and carries out static type check during compilation, which can avoid a lot of low-level errors
  • IDE good code prompt, greatly improve work efficiency
  • Vue3 and React are all developed with TS, so it’s always good to keep up with the mainstream

Although there are some learning costs associated with getting started with TS, the benefits of learning ts well far outweigh the disadvantages, especially for large collaborative projects. You may never go back to JS after you get used to TS.

rollup.js

The reasons for choosing Rollup over WebPack as a library packaging tool are summarized as follows:

  • The Rollup design is smaller and faster to pack than WebPack
  • Based on ESmodules, redundant code is removed(Tree-shaking), build smaller packages
  • React, Vue3, three.js, Moment, d3 are all packed by rollup, and again, it’s always good to be mainstream

Of course, WebPack is also very powerful. Generally speaking, webPack is used when developing business applications (including image/ CSS/JS and other static resources) and rollup is preferred when developing class libraries (only JS)

commitizen

Git commit -m ‘XXXXXX’, the -m parameter is used to specify the commit message. But basically, you can write whatever you want. There are no rules.

Commitizen is a tool for binding commit message conventions. This article uses the most widely used Angular specification, the normalized Commit Message, to know the purpose of a commit at a sight. You can also generate a Changle log directly from the COMMIT.

After commitizen is installed, use git cz instead of git commit. At this point, a bootstrap prompt appears to generate a commit message that conforms to the specification.

husky

Git cz commit git cz commit git cz commit git cz

Husky + CommitLint works well with git commit. Husky is a Git Hooks tool that implements a variety of Hooks, such as the pre-commit Hook, which can be used to validate code such as the commit-msg Hook. At this point, you can verify the commit message format with commitLint to verify compliance with your desired commit specification.

Let’s get started

Install node.js

Visit the website: nodejs.org/zh-cn/, download the corresponding installation package or source code on your platform, and follow the instructions to install it.

// Check the node and NPM versions

Mac:Math fanyanbo$ node -v

v14.15.0

Mac:Math fanyanbo$ npm -v

6.14.8

Copy the code

If you want to install multiple versions of Node.js on your computer, check out this article: Switching Between Multiple Versions of Node.js

Create a project

Create the Math directory, run NPM init, fill in the version, description, keywords, author and other information, and generate package.json

Mac:juejin fanyanbo$ mkdir Math

Mac:juejin fanyanbo$ touch Math/README.md

Mac:juejin fanyanbo$ cd Math

Mac:Math fanyanbo$ npm init

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.



See `npm help init` for definitive documentation on these fields

and exactly what they do.



Use `npm install <pkg>` afterwards to install a package and

save it as a dependency in the package.json file.



Press ^C at any time to quit.

package name: (math) 

Version: (1.0.0)

description: a math library for javascript

entry point: (index.js) 

test command: 

git repository: 

keywords: math

author: kuiper

license: (ISC) MIT

About to write to /Users/fanyanbo/juejin/Math/package.json:



{

  "name": "math".

  "version": "1.0.0".

  "description": "a math library for javascript".

  "main": "index.js".

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "math"

].

  "author": "kuiper".

  "license": "MIT"

}





Is this OK? (yes) 



Copy the code

Write the code

NPM Taobao image is recommended to install typescript locally, which is much faster

Mac:Math fanyanbo$ npm i -D typescript --registry https://registry.npm.taobao.org

NPM WARN @ rollup/[email protected] requires a peer of rollup @ ^ 1.20.0 | | ^ 2.0.0 but none is installed. You must install peer dependencies yourself.

NPM WARN [email protected] requires a peer of rollup@>=1.11.0 but none is installed. You must install peer dependencies yourself.

NPM WARN [email protected] requires a peer of rollup@>=1.26.3 but none is installed. You must install peer dependencies yourself.

NPM WARN [email protected] No Repository field.



+ [email protected]

added 1 package from 1 contributor in0.925 s



5 packages are looking for funding

  run `npm fund` for details

Copy the code

Create the SRC directory and the code file index.ts under the root directory

Mac:Math fanyanbo$ mkdir src

Mac:Math fanyanbo$ touch src/index.ts

Copy the code

The Math class library provides addition, subtraction, multiplication, and division of two numbers. The library content is not the focus of this article.

//src/index.ts

function add(x: number, y: number) :number {

    return x + y

}



function sub(x: number, y: number) :number {

    return x - y

}



function multi(x: number, y: number) :number {

    return x * y

}



function div(x: number, y: number) :number {

    if (y === 0) throw new Error("The divisor cannot be 0")

    return x / y

}



export {

    add, sub, multi, div

}

Copy the code

To learn more about TypeScript, click here

Build a package

  1. Rollup is installed globally, but local installation is also possible. I often use the rollup packaging tool, so I chose global installation.
// If sudo is installed on Mac, access error will be reported

Mac:Math fanyanbo$ npm install -g rollup

Mac:Math fanyanbo$ rollup -v

A rollup v1.24.0

Copy the code
  1. Rollup plug-ins are installed locally
Mac:Math fanyanbo$ npm i -D rollup-plugin-typescript2 --registry  https://registry.npm.taobao.org

NPM WARN [email protected] requires a peer of rollup@>=1.11.0 but none is installed. You must install peer dependencies yourself.

NPM WARN [email protected] requires a peer of rollup@>=1.26.3 but none is installed. You must install peer dependencies yourself.

NPM WARN [email protected] requires a peer of typescript@>=2.4.0 but none is installed. You must install peer dependencies yourself.

NPM WARN @ rollup/[email protected] requires a peer of rollup @ ^ 1.20.0 | | ^ 2.0.0 but none is installed. You must install peer dependencies yourself.

NPM WARN [email protected] No Repository field.



+ [email protected]

updated 1 package in2.087 s



1 package is looking for funding

  run `npm fund` for details

Copy the code

Rollup Converting TypeScript to JavaScript requires the rollup-plugin-typescript2 plug-in

  1. Configure a rollup. Config. Js
// Create the configuration file in the root directory

Mac:Math fanyanbo$ touch rollup.config.js

Copy the code
// rollup.config.js

import typescript2 from 'rollup-plugin-typescript2'



export default {

    input: './src/index.ts'.

    output: [

        {

            file: `dist/math-es.js`.

            format: 'es'

        },

        {

            file: `dist/math-cjs.js`.

            format: 'cjs'

        }

].

    plugins: [

        typescript2()

    ]

}

Copy the code

As shown above, the packaged entry file is SRC /index.ts, and the packaged file is output to the DIST directory in es standard and CommonJS standard respectively

  1. Generate library file
Mac:Math fanyanbo$ rollup -c



The. / SRC/index. Ts - dist/math - es. Js, dist/math - CJS. Js...

created dist/math-es.js, dist/math-cjs.js in 614ms

Copy the code

You can also configure “build”: “rollup -c” in package.json scripts and run NPM run build

  1. Use packaged library files
/ / createtestfile

Mac:Math fanyanbo$ mkdir test

Mac:Math fanyanbo$ touch test/index.js

Copy the code
// test/index.js

const math = require('.. /dist/math-cjs')



console.log(math.add(1.2))

console.log(math.sub(1.2))

console.log(math.multi(1.2))

console.log(math.div(1.2))

Copy the code
[Running] node "/Users/fanyanbo/juejin/Math/test/index.js"

3

- 1

2

0.5

Copy the code

To learn more about rollup packaging, please click here

Developing JavaScript libraries with TypeScript + rollup + Commitizen + Husky