How to use rollup to package JS code and publish NPM packages

1. Create a project using NPM

Create a new directory, go to the directory, and execute NPM init. Follow the command line prompt to enter package name, description, entry, keyword…

2. Create an entry file

Create a main.js file in the directory

3. Write JS logic

// Write addition: SRC /addition.js
// To use es6 syntax, you need to use Babel to convert to ES5
const addition = (a, b) = > {
  return a + b;
}

export default addition;
Copy the code
// write subtraction: SRC /subtraction
function subtraction(a, b) {
  return a - b;
}

export default subtraction;
Copy the code
// Write the entry file: main.js
import addition from "./src/addition";
import subtraction from "./src/subtraction";

export default {
  addition,
  subtraction,
}
Copy the code

4. Configuration rollup

In the root directory:

  • performnpm install --save-dev rollupInstall rollup for packaging
  • performnpm install --save-dev @rollup/plugin-babelInstall @rollup/plugin-babel to package with Babel
  • Create the rollup configuration file rollup.config.js in the root directory 
    import babel from '@rollup/plugin-babel';

export default { 
  input: 'main.js'.// Import file
  output: [{file: './es/index.js'.format: 'esm'.// Save the package as an ES module file
      name: 'cssModuleVue'
    },
    {
      file: './dist/index.js'.format: 'cjs'.// CommonJS for Node and Browserify/Webpack
      name: 'cssModuleVue'.exports: 'default'}].watch: {  // Configure listening processing
    exclude: 'node_modules/**'
  },
  plugins: [
    // use plugin @rollup/plugin-babel
    babel({
      babelHelpers: 'bundled'.exclude: 'node_modules/**'}})];Copy the code

Tip: Refer to the configuration detailsThe rollup’s official website

5. Configuration Babel

In the root directory:

  • performnpm install @babel/preset-env --save-dev
  • Create file babel.config.json to configure Babel 
    {
  "presets": ["@babel/preset-env"]}Copy the code

Tip: Refer to the configuration detailsBabel’s official website

6. Add script commands to package.json

{
  "scripts": {
    "build": "rollup -c"."serve": "rollup -c -w"  // Use listening mode for local development}}Copy the code

7. Associate the remote warehouse

Push native code to the Github repository

8. Publish the NPM package

  • To register an NPM account, log in to the NPM official website and register an account
  • Ensure that the current source is the official source (npm set registry https://registry.npmjs.org/), otherwise the packet will fail to be sent. Switching sources can be done using the NRM tool, as described in the articleUse NRM to manage NPM sources; Also can switch directly, can refer to the articleSwitch NPM source – default source, Taobao source
  • Log in to the NPM account on the terminal. The inputnpm loginEnter the user name, password, and email address in sequence

  • Verify the correct version number and package name in package.json. The input terminalnpm publish. After the package is sent, you can log in to the NPM official website to view the released package.If the package name starts with @, it is considered private and can be usednpm publish --access publicTell NPM this is a public package.

#. Local debugging

  • Package in development: terminal usenpm linkAnd use listening modenpm run serve
  • Introduced in the project: terminal inputNPM link [package name]