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:
https://kennana.github.io/toolkit-use/
Our Twitter handle:
https://twitter.com/Toolkituse
And our GitHub repository:
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.
Top comments (0)