Shouldn't an NPM package that helps hundreds of thousands of programmers increase their productivity tenfold be open-sourced?
Tags: npm, ts, rollup, opensource
Published: 2023-07-11 03:31:14

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/)

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

Our Twitter handle:

[ToolkitUse](https://twitter.com/Toolkituse)

https://twitter.com/Toolkituse

And our GitHub repository:

[Toolkit-Use](https://github.com/KenNaNa/toolkit-use)

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

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/071194ab08db4aa880450a5262b603c5~tplv-k3u1fbpfcp-watermark.image?)

## 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

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

### Core-js: Runtime plugin

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

### TypeScript Parsing

```bash
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.

```js
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`

```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`

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

### Configure `babel.config.js`

```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