Rollup configuration TS package front-end tool libraries, such as LoDash, dayJS and other function tool libraries, enrich the function programming ecology.

Git repository

My configured warehouse address is placed on Github:

https://github.com/mySkey/mys-tools.git
Copy the code

Generate package.json

We can create a default package.json using the following command:

npm init -y
Copy the code

Generate the following:

{
  "name": "ktools"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git"."url": "git+https://github.com/kagol/ktools.git"
  },
  "keywords": []."author": ""."license": "MIT"
}
Copy the code

Configure TypeScript tsconfig.json

  • Install TypeScript globally
npm i -g typescript
Copy the code
  • 2. Generate the tsconfig.json configuration file
tsc --init
Copy the code

Generate the following:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "es5"./* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs"./* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */

    /* Strict Type-Checking Options */
    "strict": true./* Enable all strict type-checking options. */

    /* Module Resolution Options */
    "esModuleInterop": true./* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

    /* Advanced Options */
    "skipLibCheck": true./* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */}}Copy the code

Rollup rollup.config.js

Rollup is installed globally

npm i -g rollup
Copy the code
  • 1. Create configuration file rollup.config.js
touch rollup.config.js
Copy the code
  • 2. Copy the following content torollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript';
import pkg from './package.json';

export default {
  input: 'src/index.ts'.// Pack the entry
  output: { // Package export
  	name: 'mySkey'.file: pkg.browser, // The path and filename of the final packaged file, as configured in the browser: 'dist/index.js' field of package.json
    format: 'umd'.// UMD is compatible with AMD/CJS/IIFE common packaging format, suitable for browsers
  },
  plugins: [ // Package the plug-in
    resolve(), // Find and package third-party modules in node_modules
    commonjs(), // Convert CommonJS to ES2015 modules for Rollup processing
    typescript() / / TypeScript]};Copy the code
  • 3. Configure the browser field in package.json:
"browser": "dist/index.js".Copy the code
  • Install Rollup and TypeScript dependencies:
npm i -D rollup typescript tslib rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-typescript
Copy the code

Automatically publish scripts

If you do not use automatic publishing, you need to copy package.json to the dist directory and update the version number each time you manually publish

npm publish
Copy the code

Obviously, copying files from one release to another, changing package names and version numbers is a hassle, and scripts can be written to automate the process.

These two libraries need to be installed in advance:

npm i -D shelljs commander
Copy the code
  • 1. Copy files

Add the script to copy the file in package.json:

"copy": "cp package.json README.md dist",
Copy the code
  • 2. Modify the file

Create a new script /publish.js file and add the following:

const path = require('path');
const shelljs = require('shelljs');
const program = require('commander');

const targetFile = path.resolve(__dirname, '.. /dist/package.json');
const packagejson = require(targetFile);
const currentVersion = packagejson.version;
const versionArr = currentVersion.split('. ');
const [mainVersion, subVersion, phaseVersion] = versionArr;

// The default version number
const defaultVersion = `${mainVersion}.${subVersion}.${+phaseVersion+1}`;

let newVersion = defaultVersion;

// Get the version number from the command line argument
program
  .option('-v, --versions <type>'.'Add release version number', defaultVersion);

program.parse(process.argv);

if (program.versions) {
  newVersion = program.versions;
}

function publish() {
  shelljs.sed('-i'.'"name": "ktools"'.'"name": "@kagol/ktools"', targetFile); // Change the package name
  shelljs.sed('-i'.`"version": "${currentVersion}"`.`"version": "${newVersion}"`, targetFile); // Change the version number
  shelljs.cd('dist');
  shelljs.exec('npm publish'); / / release
}

publish();
Copy the code

Here are the two key steps:

1. Change the package name. 2Copy the code

Also add build script commands to package.json:

"build": "rollup -c && npm run copy",
"publish": "rollup -c && npm run copy && node scripts/publish.js"
Copy the code
  • 3, publish,

The publishing steps are relatively simple and are already in the publish.js script file.

Run the following commands in sequence for each release:

NPM run build NPM run publish -- -v 0.0.1Copy the code

5. References

  • Rollup package JS
  • Rollup: How to package and publish your toolset