DEV Community: toolkituse

toolkit-use npm changelog

toolkituse — Thu, 20 Jul 2023 02:24:46 +0000

0.1.1 (2023-07-20)

0.1.0 (2023-07-20)

Features

删除无用代码 (0b283cb)
使用 pnpm 下载包 (3b79f54)
添加贡献说明 (2adbadd)
添加贡献文档 (8f6216d)
新增 git 提交检验 (efdbb8a)
新增了git 提交验证 (63c778b)
新增命令行更新 package.json 版本号 (a63adf0)
修改共享方法的说明 (b6ba673)
修改说明 (f522448)

一个 NPM 包，帮助数十万程序员提高数十倍效率，难道不开源出来？

toolkituse — Wed, 19 Jul 2023 07:27:58 +0000

一个 NPM 包，帮助数十万程序员提高数十倍效率，难道不开源出来？（一）

首先贴下我们的官网

【预览页】

https://kennana.github.io/toolkit-use/

我们的推特

【toolkituse】

https://twitter.com/Toolkituse

我们的github

【toolkit-use】

https://github.com/KenNaNa/toolkit-use

数据类型是否为基础类型

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isPrimitive(v)

是否为引用类型或通过由new构造的类型

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isObject(obj)

是否为 Promise 函数

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isPromise(val)

转换为数字

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.toNumber(val)

The object to inspect

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isPlainObject(obj)

转换为字符串

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.toString(val)

将类数组对象转换为数组

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.toArray(list, start)

将属性赋予目标对象

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.extend(to, _from)

将对象数组合并到对象中

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.toObject(arr)

驼峰式变短横线分隔

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.capitalize(str)

驼峰式变短横线分隔

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.hyphenate(str)

短横线分隔变驼峰式

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.camelize(str)

删除数组项

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.remove(arr, item)

函数只执行一次

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.once(fn)

检测数组

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isArray(obj)

检测 map

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isMap(val)

检测 set

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isSet(val)

检测日期

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isDate(val)

检测函数

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isFunction(val)

检测字符串

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isString(val)

检测 symbol

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isSymbol(val)

判断是否为整数键值

import { ToolkitUseShared } from 'toolkit-use/dist/shared/index.esm'
ToolkitUseShared.isIntegerKey(val)

toolkit-use have add jest unit test

toolkituse — Fri, 14 Jul 2023 03:01:11 +0000

toolkit-use npm package have added some functions

toolkituse — Fri, 14 Jul 2023 00:40:57 +0000

https://kennana.github.io/toolkit-use/guide/date/date.html

日期格式化示例

<script setup lang="ts">
import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"

const date = new Date()

const str = ToolkitUseDate.formatDate(date, 'yyyy-MM-dd HH:mm:ss')
</script>

formatDate 参数说明

参数	说明	值类型
dateObj	date实例	date
format	格式化	string

判断润年

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.isLeap(year: number)

获取星期

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.getWeek(date: Date | string)

获取月份天数

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.getMonthDays(year: number, month: number)

数字补零

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.padLeftZero(str: number)

获取今天日期

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.getToday(str = 'yyyy-mm-dd')

获取上一天日期

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.getYesterday(str: string)

获取下一天日期

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.getTomorrow(str: string)

获取前n天日期

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.beforeNDay(date: string, n: number)

获取后n天日期

import { ToolkitUseDate } from "toolkit-use/dist/date/index.esm"
ToolkitUseDate.afterNDay(date: string, n: number)

New storage utility methods added to the toolkit-use npm package

toolkituse — Thu, 13 Jul 2023 03:55:07 +0000

link

https://kennana.github.io/toolkit-use/

Determine if Storage is supported

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.isSupportStorage()

Set Storage

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.setStorage(key, value, expire = 0)

Get Storage

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.getStorage(key)

Check if Storage exists

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.hasStorage(key)

Get all keys

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.getStorageKeys()

Get key by index

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.getStorageForIndex(index)

Get length of localStorage

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.getStorageLength()

Get all storage items

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.getStorageAll()

Remove storage item

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.removeStorage(key)

Clear storage

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.clearStorage()

Automatically add prefix to name

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.autoAddPrefix(key)

Remove previously added prefix

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.autoRemovePrefix(key)

Encryption method

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.encrypt(data)

Decryption method

import { ToolkitUseStorage } from 'toolkit-use'
ToolkitUseStorage.decrypt(data)

The toolkit-use npm package has added commonly used DOM methods.

toolkituse — Wed, 12 Jul 2023 07:44:11 +0000

dom utils

Get Hexadecimal Color

import { getColor } from 'toolkit-use/dist/dom/index.esm'
const color = getColor()

Event Utilities

import { eventUtils } from 'toolkit-use/dist/dom/index.esm'
// Add event listener
eventUtils.addHandler(element, type, handler)
// Remove event listener
eventUtils.removeHandler(element, type, handler)
// Get compatibility event
eventUtils.getEvent(event)
// Get actual target
eventUtils.getTarget(event)
// Prevent default event
eventUtils.preventDefault(event)
// Stop event propagation
eventUtils.stopPropagation(event)
// Get related target
eventUtils.getRelatedTarget(event)
// Get button code
eventUtils.getButton(event)
// Get wheel delta
eventUtils.getWheelDelta(event)
// Get char code
eventUtils.getCharCode(event)

Add Class Name

import { addClass } from 'toolkit-use/dist/dom/index.esm'
addClass(elem, className)

Remove Class Name

import { removeClass } from 'toolkit-use/dist/dom/index.esm'
removeClass(elem, className)

Get offsetLeft

import { getElementLeft } from 'toolkit-use/dist/dom/index.esm'
getElementLeft(elem)

Get offsetTop

import { getElementTop } from 'toolkit-use/dist/dom/index.esm'
getElementTop(elem)

Get Offset

import { getOffset } from 'toolkit-use/dist/dom/index.esm'
getOffset(elem)

Get Viewport Width and Height

import { getViewport } from 'toolkit-use/dist/dom/index.esm'
getViewport()

Traverse Element Attributes

import { outputAttributes } from 'toolkit-use/dist/dom/index.esm'
outputAttributes(elem)

The toolkit-use npm package has added some shared utility methods

toolkituse — Wed, 12 Jul 2023 01:40:00 +0000

The toolkit-use npm package has added some shared utility methods

Here is the translation of the provided code:

import { hyphenateRE, camelizeRE } from '../regex/index'

Check if a value is undefined or null

export const isUndef = (v: any) => {
  return v === undefined || v === null
}

Check if a value is defined and not null

export const isDef = (v: any) => {
  return v !== undefined && v !== null
}

Check if a value is true

export const isTrue = (v: any) => {
  return v === true
}

export const isFalse = (v: any) => {
  return v === false
}

Check if a value is a primitive type

export const isPrimitive = (v: any) => {
  return (
    typeof v === 'string' ||
    typeof v === 'number' ||
    typeof v === 'symbol' ||
    typeof v === 'boolean'
  )
}

Check if a value is an object (reference type) or created using the 'new' keyword

export const isObject = (obj: any) => {
  return obj !== null && typeof obj === 'object'  // Note the 'null' in the typeof check
}

Check if a value is a Promise function

export const isPromise = (val: any) => {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

Get the raw type string of a value

const _toString = Object.prototype.toString
export const toRawType = (val: any) => {
  return _toString.call(val).slice(8, -1)
}

Check if an object has a specific property

const hasOwnProperty = Object.prototype.hasOwnProperty
export const  hasOwn = (obj: any, key: any) => {
  return hasOwnProperty.call(obj, key)
}

Convert a value to a number

export const toNumber = (val: any) => {
  const n = parseFloat(val);
  return isNaN(n) ? val : n
}

The object to inspect

/**
 * @param {any} obj The object to inspect.
 * @returns {boolean} True if the argument appears to be a plain object.
 */
export function isPlainObject(obj) {
  if (typeof obj !== 'object' || obj === null) return false

  let proto = Object.getPrototypeOf(obj)
  // 1. edge case Object.create(null)
  if (proto === null) return true
  let baseProto = proto
  while (Object.getPrototypeOf(baseProto) !== null) {
    baseProto = Object.getPrototypeOf(baseProto)
  }
  // 2. Compare the first and last prototypes in the prototype chain
  return proto === baseProto
}

Convert a value to a string

export const toString = (val: any) => {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
      ? JSON.stringify(val, null, 2)  // For arrays or objects
      : String(val)
}

Convert an array-like object to an array

export function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

Assign properties of one object to another

export function extend (to, _from) {
  for (var key in _from) {
    to[key] = _from[key];
  }
  return to
}

Merge an array of objects into one object

export function toObject (arr) {
  var res = {};
  for (var i = 0; i < arr.length; i++) {
    if (arr[i]) {
      extend(res, arr[i]);
    }
  }
  return res
}

If the argument is a function, return a cached version of it

export function cached (fn) {
  var cache = Object.create(null);
  return (function cachedFn (str) {
    var hit = cache[str];  // Cache lookup
    return hit || (cache[str] = fn(str))
  })
}

Convert camelCase to kebab-case

export const capitalize = cached(function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
});

Convert camelCase to kebab-case

export const hyphenate = cached(function (str) {
  return str.replace(hyphenateRE, '-$1').toLowerCase()
});

Convert kebab-case to camelCase

export const camelize = cached(function (str) {
  return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

Create a map

export function makeMap (
  str,
  expectsLowerCase
) {
  var map = Object.create(null);
  var list = str.split(',');
  for (var i = 0; i < list.length; i++) {
    map[list[i]] = true;
  }
  return expectsLowerCase
    ? function (val) { return map[val.toLowerCase()]; }
    : function (val) { return map[val]; }
}

Check if two objects are equal

export function looseEqual (a, b) {
  // Return true if a and b are strictly equal
  if (a === b) { return true }
  var isObjectA = isObject(a);
  var isObjectB = isObject(b);
  // Check if both are objects (reference types)
  if (isObjectA && isObjectB) {
    try {
      var isArrayA = Array.isArray(a);
      var isArrayB = Array.isArray(b);
      if (isArrayA && isArrayB) {
        // If both are arrays, compare their lengths and recursively check each item, return false if they differ
        return a.length === b.length && a.every(function (e, i) {
          return looseEqual(e, b[i])
        })
      } else if (a instanceof Date && b instanceof Date) {
        // If both are Date objects, compare them using their timestamps
        return a.getTime() === b.getTime()
      } else if (!isArrayA && !isArrayB) {
        // If both are objects, compare their property values recursively if their lengths match, return false if they differ
        var keysA = Object.keys(a);
        var keysB = Object.keys(b);
        return keysA.length === keysB.length && keysA.every(function (key) {
          return looseEqual(a[key], b[key])
        })
      } else {
        /* istanbul ignore next */
        return false
      }
    } catch (e) {
      /* istanbul ignore next */
      return false
    }
  } else if  (!isObjectA && !isObjectB) {
    // If both are not objects (primitive types), convert them to strings and compare
    return String(a) === String(b)
  } else {
    return false
  }
}

Remove an item from an array

export function remove (arr, item) {
  if (arr.length) {
    var index = arr.indexOf(item);
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

Execute a function only once

export function once (fn) {
  var called = false;
  return function () {
    if (!called) {
      called = true;
      fn.apply(this, arguments);
    }
  }
}

Compare two arrays for equality

export function looseCompareArrays(a, b) {
    // If the lengths differ, return false
    if (a.length !== b.length)
        return false;
    let equal = true;
    // If the lengths are the same, compare each item in the arrays
    for (let i = 0; equal && i < a.length; i++) {
        equal = looseEqual(a[i], b[i]);
    }
    return equal;
}

Define properties on an object

export const def = (obj, key, value) => {
  Object.defineProperty(obj, key, {
      configurable: true,  // Configurable
      enumerable: false,  // Not enumerable
      value
  });
};

Get the `toString` method from the object's prototype

export const objectToString = Object.prototype.toString;

Function to get the type string of a value

export const toTypeString = (value) => objectToString.call(value);

Check if a value is an array

export const isArray = Array.isArray;

Check if a value is a map

export const isMap = (val) => toTypeString(val) === '[object Map]';

Check if a value is a set

export const isSet = (val) => toTypeString(val) === '[object Set]';

Check if a value is a date

export const isDate = (val) => val instanceof Date;

Check if a value is a function

export const isFunction = (val) => typeof val === 'function';

Check if a value is a string

export const isString = (val) => typeof val === 'string';

Check if a value is a symbol

export const isSymbol = (val) => typeof val === 'symbol';

Check if a key is an integer key

export const isIntegerKey = (key) => isString(key) && key !== 'NaN' && key[0] !== '-' && '' + parseInt(key, 10) === key;

Invoke an array of functions with an argument

export const invokeArrayFns = (fns, arg) => {
  for (let i = 0; i < fns.length; i++) {
      fns[i](arg);
  }
};

Compare two values for equality using `Object.is`

export const hasChanged = (value, oldValue) => !Object.is(value, oldValue)
}

Please note that the translation provided may require further adjustment based on the specific context and usage of these utility methods.

a npm package: toolkit-use Introduction

toolkituse — Tue, 11 Jul 2023 03:41:11 +0000

Star History

Introduction

This project is an open-source project that serves as a collection of commonly used utility methods during the development process.

As an open-source project, we hope to receive support and appreciation from the community, and together maintain this toolkit.

ToolkitUse is a commonly used toolkit designed specifically for front-end developers, aiming to provide convenient and efficient solutions and tools to accelerate the front-end project development process. This article will introduce you to the main features and advantages of ToolkitUse, as well as the value it brings to front-end developers.

Key Features:

Feature-rich toolset: ToolkitUse offers a wide range of functional tools, including string manipulation, date operations, form validation, network requests, and more. These tools can assist developers in handling common front-end tasks and issues, enhancing development efficiency.

Lightweight and high-performance: ToolkitUse is designed to be a lightweight and high-performance toolkit, ensuring it does not introduce additional burden when used in projects. It has been optimized and tested to provide fast and stable performance across various browsers and devices.

Easy to use and integrate: ToolkitUse provides a concise and intuitive API, making it easy to learn and use. You can easily integrate ToolkitUse into your projects, and it is compatible with existing front-end frameworks and libraries.

Community support and documentation: ToolkitUse has an active developer community where you can seek support, advice, and solutions. Additionally, ToolkitUse offers detailed documentation and examples to help you get started quickly and understand the usage and functionality of each tool.

Advantages:

Improved development efficiency: ToolkitUse provides a rich set of tools for front-end developers, reducing repetitive work and simplifying common task handling. By using ToolkitUse, you can complete development tasks faster, thereby enhancing overall development efficiency.

Optimized code quality: ToolkitUse has been carefully designed and tested to ensure it provides high-quality solutions. It can help you write reliable and maintainable code, reducing errors and potential vulnerabilities.

Cross-platform and compatibility: ToolkitUse supports multiple front-end environments and frameworks, making it suitable for various projects. Whether you are developing applications based on React, Vue.js, or Angular, ToolkitUse can provide support and convenience.

Conclusion:
ToolkitUse is a commonly used toolkit for front-end developers, offering a rich set of functional tools to enhance development efficiency and optimize code quality. Whether you are a beginner or an experienced developer, using ToolkitUse can help you complete front-end projects more easily. Explore the features of ToolkitUse and apply them to your projects to experience the convenience and benefits it brings.

install

npm i toolkit-use

usage

<script setup lang='ts'>
import { 
  ToolkitUseClipboard, 
  ToolkitUseClipboardOptions,
  uniqueOptionsArr,
  uniqueValueArr,
  deepClone,
  formatDate,
  transformDecimal,
  toPercent,
  toPoint,
  frontUrlDownload,
  dataStreamDownloadExcelOrPdf,
  padStartZero,
} from 'toolkit-use'
</script>

Step-by-Step Guide to Building an NPM Package, Publishing to NPM Registry, and Setting Up Documentation (Part 2)

toolkituse — Tue, 11 Jul 2023 03:37:24 +0000

Translating the second part of the tutorial:

"I wrote the first article yesterday, and the response was average."

An NPM Package that Helps Hundreds of Thousands of Programmers Increase Efficiency Tenfold, Shouldn't It Be Open-Source? (Part 1)

First, let me share our official website:

Preview Page

https://kennana.github.io/toolkit-use/

Our Twitter handle:

ToolkitUse

https://twitter.com/Toolkituse

And our GitHub repository:

Toolkit-Use

https://github.com/KenNaNa/toolkit-use

Today, we will continue writing the second article to further optimize our tutorial. Let's implement a copy functionality.

First, we need to install the clipboard copy plugin:

yarn add clipboard

Create a new src directory and inside it, create clip/index.ts:

According to the clipboard documentation, we need to pass the copy content and the element for the copy action to its class.

import Clipboard from "clipboard";
import { ToolkitUseClipboardOptions } from "../../types/clip";

class ToolkitUseClipboard {
  private _data: string = '';
  private _class: string = '';
  private _clipboard: Clipboard;
  private _options: ToolkitUseClipboardOptions;

  constructor(options: ToolkitUseClipboardOptions) {
    this._class = options.className;
    this._data = options.message;
    this._clipboard = new Clipboard(this._class, {
      text: () => this._data
    });
    this._options = options;
  }

  copy(): Clipboard {
    this._clipboard.on('success', () => {
      this._options.onSuccess && this._options.onSuccess();
      this._clipboard.destroy();
    });

    this._clipboard.on('error', () => {
      this._options.onError && this._options.onError();
      this._clipboard.destroy();
    });

    return this._clipboard;
  }
}

export {
  ToolkitUseClipboardOptions,
  ToolkitUseClipboard
};

We still need to add a type. Create a new types/clip.ts file in the project's root directory:

export interface ToolkitUseClipboardOptions {
  message: string;
  className: string;
  onSuccess?: () => void;
  onError?: () => void;
}

Then export the copy function and the type in src/index.ts:

import { ToolkitUseClipboard, ToolkitUseClipboardOptions } from './clip/index';

export {
  ToolkitUseClipboard,
  ToolkitUseClipboardOptions,
};

After writing this, we need to configure the necessary settings in rollup.config.js:

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';

const extensions = ['.js', '.ts'];

const pkg = require('./package.json');

const version = pkg.version;
const license = pkg.license;
const author = pkg.author;

const banner =
    '/*!\n' +
    ` * ${pkg.name} v${version}\n` +
    ` * (c) 2020-${new Date().getFullYear()} ${author}\n` +
    ` * Released under the ${license} License.\n` +
    ' */';

module.exports = {
    input: 'src/index.ts',
    output: [
        {
            file: 'dist/index.umd.js',
            format: 'umd',
            name: 'utools',
            banner
        },
        {
            file: 'dist/index.esm.js',
            format: 'esm',
            name: 'utools',
            banner
        }
    ],
    plugins: [
        nodeResolve({
            extensions,
            modulesOnly: true
        }),
        commonjs(),
        typescript(),
        babel({
            babelHelpers: 'runtime',
            include: 'src/**',
            exclude: 'node_modules/**',
            extensions
        }),
        terser()
    ]
};

Execute the following command in the terminal:

npm run build

You will find the index.esm.js and index.umd.js files in the dist directory.

That's it for now. Stay tuned for more updates.

Shouldn't an NPM package that helps hundreds of thousands of programmers increase their productivity tenfold be open-sourced?

toolkituse — Tue, 11 Jul 2023 03:31:14 +0000

I knew you'd click on it and check it out. Just boasting, haha. But on a serious note, I'm actually moving in that direction. I hope everyone can encourage and support me. I hope you can click and like it, and follow along.

To be honest, the purpose of developing this project stems from my own experience of writing repetitive utility methods in my code. Whenever I start a new project, I end up rewriting the same methods again. Essentially, it's duplicating the code. That's why I created this project.

I made my first attempt at using Rollup to bundle my own NPM package, which includes commonly used utility methods from my work. If you're interested in contributing code, feel free to join and help make it stronger and more powerful.

Alright, this tutorial will likely be divided into several chapters. First, let me share our official website:

Preview Page

https://kennana.github.io/toolkit-use/

Our Twitter handle:

ToolkitUse

https://twitter.com/Toolkituse

And our GitHub repository:

Toolkit-Use

https://github.com/KenNaNa/toolkit-use

Introduction

Through long-term accumulation in the business line, we have developed numerous repetitive utility methods and business functional modules. We can leverage Rollup to build an NPM private service toolset, making it easier for future business use and reducing repetitive code writing.

Dependencies

We need to import the following dependencies:

Babel Converter: Transpiling ES6 to ES5

yarn add @babel/core @babel/cli @babel/preset-env -D

Core-js: Runtime plugin

yarn add core-js @babel/runtime
yarn add @babel/plugin-transform-runtime -D

TypeScript Parsing

yarn add typescript@4.3.5 -D
yarn add @babel/preset-typescript -D

Rollup

Since this project is a pure JavaScript project without any Vue or React-related business code, we will use Rollup for bundling.

yarn add rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-typescript2 tslib -D

Configure `rollup.config.js`

import babel from '@rollup/plugin-babel'; // Import Babel
import commonjs from '@rollup/plugin-commonjs'; // Import CommonJS plugin
import { nodeResolve } from '@rollup/plugin-node-resolve'; // Import resolve
import typescript from 'rollup-plugin-typescript2'; // TypeScript
import { terser } from 'rollup-plugin-terser'; // Minify bundled files

const extensions = ['.js', '.ts'];

const pkg = require('./package.json'); // Import from package.json

const version = pkg.version; // Project version
const license = pkg.license; // License
const author = pkg.author; // Author

// Banner for bundled files
const banner =
    '/*!\n' +
    ` * ${pkg.name} v${version}\n` +
    ` * (c) 2020-${new Date().getFullYear()} ${author}\n` +
    ` * Released under the ${license} License.\n` +
    ' */';

module.exports = {
    input: 'src/index.ts',
    output: [
        // Output file configuration
        {
            file: 'dist/index.umd.js', // Output location and file name
            format: 'umd',
            name: 'utools', // Global variable name for the package
            banner
        },
        {
            file: 'dist/index.esm.js', // Output location and file name
            format: 'esm',
            name: 'utools', // Global variable name for the package
            banner
        }
    ],
    plugins: [
        nodeResolve({
            extensions,
            modulesOnly: true
        }),
        commonjs(),
        typescript(),
        babel({
            babelHelpers: 'runtime',
            include: 'src/**',
            exclude: 'node_modules/**',
            extensions
        }),
        terser()
    ]
};

Add the following to `package.json`

"scripts:" { "build": "rollup -c" }

Configure `babel.config.js`

module.exports = {
  presets: [
      [
          '@babel/preset-env',
          {
              targets: '> 0.25%, not dead',
              useBuiltIns: 'usage',
              corejs: '3.6.5'
          },
          '@babel/preset-typescript'
      ]
  ],
  plugins: ['@babel/plugin-transform-runtime']
};

Project Guidelines

Eslint+commitlint

This is not configured yet, but I will set it up later.

So far, we have completed the basic configuration. To be continued, stay tuned.

https://kennana.github.io/toolkit-use/

https://github.com/KenNaNa/toolkit-use