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

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