Original link: https://www.cnblogs.com/yalong/p/15627449.html

background

In daily development, there are many common and common js functions. In order to facilitate subsequent reuse and improve development efficiency, we have built a js function library TBL js LIBS;

Project address: https://github.com/YalongYan/js-libs,

The project is implemented based on typescript. You can build your own js function library based on the project or refer to the writing method of the project

The library properties

• Based on typescript, the type declaration and prompt are complete, and the ts project is seamlessly accessed
• The packaging mode is ES module mode, which naturally supports tree shaking to avoid redundant code
• Unit testing based on mocha is more stable and reliable

Why not package code in umd format

• At present, all my projects are developed based on es module and do not need umd format
• Packaging into umd code increases the volume
• The es module naturally supports tree shaking, which is convenient
• When packaged into es module, tsc is mainly used to save trouble
• If necessary later, upgrade the function library

Project directory introduction

    |_ _ _  dist // tsc compiled directory
    |
    |_ _ _  src // Source code
    |       |
    |_ _ _  |_ _ _ array // Function collection of array class
    |       |     |
    |       |     |_ _ _arrayUnique.ts // Array de duplication function
    |       |
    |       |_ _ _ index.ts // Total entry of function
    |       |
    |       |
    |_ _ _  test // mocha test code
    |       |
    |       |_ _ _ arrayUnique.test.ts // Unit test code
    |
    |_ _ _  tsconfig.json // typescript compilation configuration file
    |
    |_ _ _  tsconfig.test.json // Configuration of unit test

The arrayique.ts code is as follows

/**
 * Array de duplication
 * @param arr {array} array
 * @returns {array} array
 */
export default function arrayUnique(arr: Array<any>): Array<any> {
  return [...new Set(arr)];
}

The arrayique.test.ts code is as follows

import 'mocha';
import { expect } from 'chai';
import arrayUnique from '../src/array/arrayUnique';

describe('arrayUnique function', function(){
  it('arrayUnique', function() {
    expect(arrayUnique([1,2,2,3,3])).to.deep.equal([1,2,3]);
  });
});

Introduction to script command

"build": "npm run clean && tsc -p tsconfig.json", 
"clean": "rimraf ./dist",
"test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha --require ts-node/register test/*.test.ts"

• build is the code that compiles typescript code as es5
• clean is to delete the dist directory
• Test is running a unit test

The contents of tsconfig.json are as follows

{
  "compilerOptions": {
    "outDir": "dist",
    // esnext is the standard es module format
    "module": "esnext",
    // What es version does it conform to after compilation
    "target": "es5",
    // Generate a corresponding. d.ts file for each TS file; Get TS prompt
    "declaration": true,
    "downlevelIteration": true,
    "noImplicitAny": true,
    "lib":["es5", "dom", "dom.iterable", "es2015", "es2016", "es2017"],
    "jsx": "react",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "src/**/*.test.tsx",
  ]
}

The contents of the tsconfig.test.json file are as follows

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "commonjs", // That's it. Change it to commonjs when running unit tests, or an error will be reported
    // What es version does it conform to after compilation
    "target": "es5",
    // Generate a corresponding. d.ts file for each TS file; Get TS prompt
    "declaration": true,
    "downlevelIteration": true,
    "noImplicitAny": true,
    "lib":["es5", "dom", "dom.iterable", "es2015", "es2016", "es2017"],
    "jsx": "react",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "src/**/*.test.tsx",
  ]
}

Publish npm process

1. First of all, there is an npm account. If not, go here to register https://www.npmjs.com/
2. npm login login
3. npm publish (remember to run npm run test to check whether the unit test passes before publishing)

usage method

Installation dependency: NPM I TBL JS LIBS - S

import { isEmpty } from 'tbl-js-libs';

export default () => {
  console.log(isEmpty([1, 2, 3])) // Use here
  return (
    <div className="homePage">
      I'm the test page
    </div>
  );
};

Summary of problems encountered in the development of function library

Question one

npm run test reports an error as follows:

import * as chai from 'chai';

^^^^^^

SyntaxError: Cannot use import statement outside a module

Solution look here

The solution is simply to create a new tsconfig.test.json and set the module field to commonjs

Supplementary notes

Here, the ts code is only compiled into es5 code, and the es module mode is adopted. If you want to package the function library into umd mode code, you can use webpack or rollup to package it

Reference link

Assertion library chai usage

mocha official website

Build your own JavaScript Arsenal