Introduction to the

Whenever you need to use some utility functions in a project, you usually need to introduce some third-party libraries, and libraries like LoDash are very large, which affects the size of the packaged project. So it is necessary to encapsulate your own code base.

This article shows you how to use the rollup tool to generate your own code base; To improve code maintainability, code is written in typescript; To ensure code quality, code will be tested through JEST; The tool library requires documentation that can be consulted, and typeDoc is used to generate documentation to better support typescript.

Rely on the library

  • Rollup is a JavaScript module wrapper that compiles small pieces of code into large, complex pieces of code, such as libraries or applications.
  • A superset of typescript javascript that supports type definition.
  • Typedoc generates library documentation
  • Jest is used for code unit testing

Initialize the project

  • Create the directory and initialize the Node project.
mkdir myTools
cd myTools
npm init -y
Copy the code
  • The installationrollup
npm install rollup -D
Copy the code
  • First createmodulesDirectory, and then create entry files in the directoryindex.js
  • After creatingrollup.config.js, the configuration is as follows:
export default {
  input: "modules/index.js".output: [{file: "lib/bundle.cjs.js".format: "cjs"}, {file: "lib/bundle.esm.js".format: "es",}]};Copy the code

The configuration address: www.rollupjs.com/guide/big-l…

Amd -- Asynchronous module definition for module loaders like RequireJS CJS -- CommonJS for Node and Browserify/Webpack ESM -- Save packages as ES module files, Iife can be introduced in modern browsers via the <script type=module> tag - an auto-executing feature suitable as a <script> tag. (If you're creating a bundle for your application, you might want to use it because it makes the file size smaller.) Umd - Generic module definition, in amd, CJS and IIFE as one system-SystemJS loader formatCopy the code
  • Then add the run command to the package.json file
{..."scripts": {
        "build": "rollup --config"},... }Copy the code
  • Execute the commandnpm run buildWill automatically package the code tolibDirectory.

Add typescript support

  • Installing the Support Library
npm install typescript rollup-plugin-typescript tslib -D
Copy the code
  • Modify therollup.config.jsConfigure, AddtypesciptThe plug-in
import typescript from "rollup-plugin-typescript";
export default {
  input: "modules/index.ts",
  output: [
    {
      file: "lib/bundle.cjs.js",
      format: "cjs",
    },
    {
      file: "lib/bundle.esm.js",
      format: "es",
    },
  ],
  plugins: [
    typescript({
      exclude: "node_modules/**",
      typescript: require("typescript"),
    }),
  ],
};
Copy the code
  • willmodules/index.jsChange the entry file tomodules/index.ts

Jest test

Next, you need to configure the project to support JEST testing to ensure that the code is correct.

  • Start by installing JEST support
npm install --save-dev jest ts-jest @types/jest
Copy the code
  • Create it in the root directoryjest.config.jsfile
module.exports = {
  preset: "ts-jest".testEnvironment: "node"};Copy the code
  • inmodules/index.tsWrite the following code to export the version.
export const version: string = "1.0.0";
Copy the code
  • createtestDirectory and addindex.spec.tsThe test file contains the following contents:
import { version } from ".. /modules/index";
test("Current project version is 1.0.0".() = > {
  expect(version).toBe("1.0.0");
});
Copy the code
  • Next add the run command inpackage.jsonAdd:
"test": "jest --no-cache"
Copy the code
  • Then runnpm run testCommand to test,jestSee the official website for syntax details.

Document generation

  • The installationtypedocRely on
npm install typedoc -D
Copy the code
  • createtypedoc.jsonThe configuration file
{
    "inputFiles": ["./modules"]."mode": "modules"."out": "docs"."exclude": "modules/index.ts"
}
Copy the code
  • Write a comment

The way to write comments is here: TypeDoc

Comment the document in modules/index.ts

/** * The current library version */
export const version: string = "1.0.0";
Copy the code
  • inpackage.jsonTo add the command to generate the document
"doc": "typedoc --options typedoc.json"
Copy the code
  • runnpm run docCommand to generate document, document will be generated indocsDirectory, you can go throughgitpageShow the document.

The entry to write

Once the project structure is set up, you can add your own utility functions. In order to export them in a single JS file, you need to export all functions through index.ts. Here I wrote four utility functions in the Modules directory: Clone, cloneDeep, Debounce, and Throttle. I need to export all the functions in index.ts as follows:

// functoin
export { default as debounce } from "./debounce";
export { default as throttle } from "./throttle";
export { default as clone } from "./clone";
export { default as cloneDeep } from "./cloneDeep";
Copy the code

This can be done by importing {cloneDeep} from “myTools”.

My library is here github.com/wenonly/tut…