Front-end component / tool library packaged configuration using actual rollup

Current mainstream front-end framework vue and react to adopt rollup package, in order to explore the wonders of rollup, and then let us step by step to explore and packaged scaffold based rollup build a library, to publish their own libraries and components.

Foreword

Write rollup article is because I recently decided to standardize business processes and front-end development framework, and provide internal component libraries and public library tool for team use. After lot of information and comparison of the advantages and disadvantages webpack and rollup, the final choice rollup package as a tool to achieve our ultimate install our component library and tool library by npm way:

// 安装
npm install @xuxi/tools
// 使用
import { sleep } from '@xuxi/tools'

Let us re-set rollup configuration process and best practices step by step.

rollup Introduction

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

Is generally meant is a JavaScript module Rollup said packer code can be compiled into small chunks complex code, for example, library or application. Rollup using a new standardized format for code modules, which are included in the standard version of JavaScript ES6, not like this particular CommonJS and AMD solutions.

rollup biggest highlight is the Tree-shaking, which can static analysis code import, and exclude any unused code. This architecture allows us to, existing tools and modules, without additional dependence or the size of the expansion project. If webpack do, although you can achieve tree-shaking, but needs its own configuration and packaging out of the code is very bloated, so for libraries and UI components, rollup more suitable.

Packaging scaffolding to build the library

1. rollup entry

First we install some rollup:

npm i rollup -g

Then create a project locally:

mkdir -p my-project
cd my-project

Secondly, we create an entry and write the following code:

// src/main.js
import say from './say.js';
export { say }

// src/say.js
export default function(name){
    console.log(name)
};

The basic code is ready after we wrote rollup configuration file (rollup.config.js in the root directory):

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

In this way, we have implemented in the terminal:

// --config 或 -c 来使用配置文件
rollup -c

Such files in the directory will generate a more bundle.js, what we want to package. We can also use package.json to set the configuration information pack, with npm run xxx to package and test code.

2.rollup plug-in uses

For a more flexible package library files, we can configure the plugin rollup, more practical plug-ins are:

rollup-plugin-node-resolve - help Rollup find external modules and import

rollup-plugin-commonjs - converting CommonJS Rollup processing module for ES2015

rollup-plugin-babel - so that we can use the new features to write code es6

rollup-plugin-terser - js code compression, the compression codes including es6

rollup-plugin-eslint - js code detection

A library packed with more plug-ins completely enough, but if you want to react implementation code and other components can have more plug-ins can be used here is not introduced one by one.

We can use similar plugin configuration webpack of:

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from "rollup-plugin-babel";
import { terser } from 'rollup-plugin-terser';
import { eslint } from 'rollup-plugin-eslint';

export default [
	{
		input: 'src/main.js',
		output: {
			name: 'timeout',
			file: '/lib/tool.js',
			format: 'umd'
		},
		plugins: [
                            resolve(),  // 这样 Rollup 能找到 `ms`
                            commonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块
                            eslint(),
                            babel(),
                            terser()
		]
	}
];

Is not it simple? Personally I feel a lot simpler than webpack configuration. With the above configuration, although able to achieve the basic javascript files are packaged, but not robust enough, then we refine the configuration step by step.

3. Use babel to compile the code es6

First, let's install babel related modules:

npm i core-js @babel/core @babel/preset-env @babel/plugin-transform-runtime

Then set .babelrc file

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "2.6.10",
        "targets": {
          "ie": 10
        }
      }
    ]
  ],
  "plugins": [
      // 解决多个地方使用相同代码导致打包重复的问题
      ["@babel/plugin-transform-runtime"]
  ],
  "ignore": [
      "node_modules/**"
    ]
}

@ Babel / preset-env may be automatically based on the target browser or operating environment configured to convert the code ES2015 + es5. Note that we set the "modules": false, otherwise Babel will have an opportunity Rollup do before processing, our module will turn into CommonJS, resulting in some processing Rollup failure.

In order to address multiple places using the same code causes packaged duplicate questions, we need to configure @ babel / plugin-transform-runtime in .babelrc of plugins where we need to modify the rollup configuration file:

babel({
  exclude: 'node_modules/**', // 防止打包node_modules下的文件
  runtimeHelpers: true,       // 使plugin-transform-runtime生效
}),

If you are not familiar babel, you can see my previous article webpack or Quguan network learning.

4. distinguish between test and development environments

We can be configured with different execute scripts and environment variables package.json to do in different configurations on the development and production:

// package.json
"scripts": {
    "build": "NODE_ENV=production rollup -c",
    "dev": "rollup -c -w",
    "test": "node test/test.js"
  },

We can manually export NODE_ENV for the production and development to distinguish between production and development environment, and then to get the parameters process.env.NODE_ENV in the code. Here we are not used to set the compressed code in the development environment:

const isDev = process.env.NODE_ENV !== 'production';
// ...
plugins: [
  !isDev && terser()
]

Using detection codes do eslint

We can use the rollup-plugin-eslint to the above-mentioned configuration:

eslint({
    throwOnError: true,
    throwOnWarning: true,
    include: ['src/**'],
    exclude: ['node_modules/**']
})

Then create .eslintrc.js to detect specific configuration according to their own style:

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "ENV": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "linebreak-style": [
          "error",
          "unix"
        ],
        "quotes": [
          "error",
          "single"
        ]
    }
};

Detailed eslint can learn Quguan network configuration.

5. external properties

Use rollup package, we need to use third-party libraries in your library, for example lodash, etc., I do not want to appear in the final jquery generated package file. This time we need to use external attributes. For example, we used the lodash,

import _ from 'lodash'

// rollup.config.js
{
    input: 'src/main.js',
    external: ['lodash'],
    globals: {
        lodash: '_'
    },
    output: [
         { file: pkg.main, format: 'cjs' },
	{ file: pkg.module, format: 'es' }
    ]
}

6. Export mode

We can export to commonjs own code module, es, and means the browser can recognize, set up by:

{
  input: 'src/main.js',
  external: ['ms'],
  output: [
	{ file: pkg.main, format: 'cjs' },
	{ file: pkg.module, format: 'es' },
	{ file: pkg.module, format: 'umd' }
  ]
}

Publish to npm

If you are not registered before npm account, you can configure the following manner:

npm adduser

Enter your username, email, password, use npm publish the final release. Here are the package configuration file, namely package.json:

{
  "name": "@alex_xu/time",
  "version": "1.0.0",
  "description": "common use js time lib",
  "main": "dist/tool.cjs.js",
  "module": "dist/time.esm.js",
  "browser": "dist/time.umd.js",
  "author": "alex_xu",
  "homepage": "https://github.com/MrXujiang/timeout_rollup",
  "keywords": [
    "tools",
    "javascript",
    "library",
    "time"
  ],
  "dependencies": {
    // ...
  },
  "devDependencies": {
    // ...
  },
  "scripts": {
    "build": "NODE_ENV=production rollup -c",
    "dev": "rollup -c -w",
    "test": "node test/test.js",
    "pretest": "npm run build"
  },
  "files": [
    "dist"
  ]
}

name is the name of the package, you can write directly to the package name, such as loadash, or add a domain, similar to @ koa / router that, behind you! npm registered user name. key for the keyword package.

After the release, we can do something like the following installed in this way:

npm install @alex_xu/time
// 使用
import { sleep } from '@alex_xu/time'
// 或
const { sleep } = requrie('@alex_xu/time')

The following is a screenshot of the installation:

On npm you can also search his bag:

Is not it great sense of accomplishment? Just let people use you to develop a package with it!

At last

I have posted the full configuration file to github, if you want to know more webpack, gulp, css3, javascript, nodeJS, canvas and other front-end knowledge and actual combat, the public welcome No. "Something about front-end" Join us to learn together to discuss, explore the front boundary.