DEV Community

toolkituse
toolkituse

Posted on

1

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

image.png

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
Enter fullscreen mode Exit fullscreen mode

Core-js: Runtime plugin

yarn add core-js @babel/runtime
yarn add @babel/plugin-transform-runtime -D
Enter fullscreen mode Exit fullscreen mode

TypeScript Parsing

yarn add typescript@4.3.5 -D
yarn add @babel/preset-typescript -D
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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()
    ]
};
Enter fullscreen mode Exit fullscreen mode

Add the following to package.json

"scripts:" { "build": "rollup -c" }
Enter fullscreen mode Exit fullscreen mode

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']
};
Enter fullscreen mode Exit fullscreen mode

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

Hot sauce if you're wrong - web dev trivia for staff engineers

Hot sauce if you're wrong · web dev trivia for staff engineers (Chris vs Jeremy, Leet Heat S1.E4)

  • Shipping Fast: Test your knowledge of deployment strategies and techniques
  • Authentication: Prove you know your OAuth from your JWT
  • CSS: Demonstrate your styling expertise under pressure
  • Acronyms: Decode the alphabet soup of web development
  • Accessibility: Show your commitment to building for everyone

Contestants must answer rapid-fire questions across the full stack of modern web development. Get it right, earn points. Get it wrong? The spice level goes up!

Watch Video 🌶️🔥

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay