Rollup

brief introduction

Rollup is a module packaging tool, which can output the source code built according to the ESM (ES2015 Module) specification in the following format:

• IIFE: self executing function, which can be loaded through the < script > tag
• AMD: load via {RequireJS}
• Commonjs: the default module specification of node, which can be loaded through Webpack +
• UMD: compatible with Iife, AMD and CJS module specifications
• ESM: ES2015 Module specification, which can be loaded with Webpack and Rollup

advantage:

Support dynamic import.

Support tree shaking. Load only the functions used in the module to reduce the file size.

Scope Hoisting. rollup can generate all small files into a large file, and all codes are in the same function scope: it won't wrap modules with many functions like Webpack.

No other redundant code, fast execution. Except for the necessary C JS and umd headers, the bundle code is basically the same as the source code, and there is nothing strange__ webpack_require__,  Object.defineProperty and so on,

Disadvantages:

Hot update function is not supported; For the commonjs module, additional plug-ins are required to convert it into es2015 for rollup processing; Cannot split public code.

Input:

options.input single / multi file entry point

Output:

rollup supports the generation of iife, cjs, amd, esm and umd files; Single / multiple js file output

File resource processing:

rollup compiles and processes various static resources through plug-ins:

• rollup-plugin-typescript2
• rollup-plugin-babel
• rollup-plugin-uglify
• rollup-plugin-commonjs
• rollup-plugin-postcss
• rollup-plugin-img
• rollup-plugin-json

Basic use reference

 https://www.cnblogs.com/tugenhua0707/p/8179686.html

Applicable scenarios:

A third-party library developed by pure js; Scenarios where a single umd file needs to be generated

Case:

Third party libraries written in pure js/ts:

React,Vue

UI component library evergreen

Use babel to compile js/ts into module files in {esm and cjs format, and use rollup to package the library into} evergreen in} umd format Min.js and evergreen JS, the packaged code is relatively clean.

SDK project for packaging TypeScript using rollup

Project directory:

 

 

Initialize project

npm init -y

Install project dependencies

npm install --save-dev  @babel/core @babel/plugin-external-helpers @babel/preset-env @babel/preset-typescript cross-env rollup rollup-plugin-babel  @babel/plugin-transform-runtime @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-node-resolve @types/jest @types/node babel-preset-latest jest rollup-plugin-replace rollup-plugin-terser rollup-plugin-uglify ts-jest ts-node

package.json is as follows

{
  "name": "xcplayer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "dev": "cross-env NODE_ENV=development rollup -c -w",
    "build": "cross-env NODE_ENV=production rollup -c",
    "build-dev": "cross-env NODE_ENV=development rollup -c",
    "unit": "jest --coverage"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.5.4"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/plugin-external-helpers": "^7.16.7",
    "@babel/plugin-transform-runtime": "^7.16.8",
    "@babel/preset-env": "^7.16.8",
    "@babel/preset-typescript": "^7.16.7",
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@types/jest": "^27.4.0",
    "@types/node": "^17.0.8",
    "babel-preset-latest": "^6.24.1",
    "cross-env": "^7.0.3",
    "jest": "^27.4.7",
    "rollup": "^2.63.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-uglify": "^6.0.4",
    "ts-jest": "^27.1.2",
    "ts-node": "^10.4.0"
  }
}

Create rollup config. JS can be modified according to specific needs

import commonjs from "@rollup/plugin-commonjs"
import json from "@rollup/plugin-json"
import { nodeResolve } from "@rollup/plugin-node-resolve" // tell rollup Where can I find a dependency library
import babel from "rollup-plugin-babel"
import replace from "rollup-plugin-replace"
import { terser } from "rollup-plugin-terser" // compress
const pkg = require("./package.json")
// Version
const pkgVersion =
  process.env.NODE_ENV === "production" ? pkg.version : `${pkg.version}_beta`

// Name of package
const pkgName = pkg.name

// banner
const banner =
  "/*!\n" +
  ` * xrtc.js v${pkgVersion}\n` +
  ` * (c) 2020-${new Date().getFullYear()} \n` +
  " * Released under the MIT License in iflytek.\n" +
  " */\n"

const isProduction = process.env.NODE_ENV === "production"

const destFolder = isProduction ? "dist" : "demo/lib"

const output = isProduction
  ? [
      {
        file: `./${destFolder}/${pkgName}-${pkgVersion}.js`,
        format: "umd", // Module output format: es,cjs,amd,umd,iife,system
        name: "XRTC", // Specifies the output result receiving variable of the packaged module
        globals: {
          crypto: "crypto",
        },
        banner: banner,
      },
      {
        file: `./${destFolder}/${pkgName}-${pkgVersion}.esm.js`,
        format: "esm", // Module output format: es,cjs,amd,umd,iife,system
        name: "XRTC", // Specifies the output result receiving variable of the packaged module
        globals: {
          crypto: "crypto",
        },
        banner: banner,
      },
    ]
  : [
      {
        file: `./${destFolder}/${pkgName}.js`,
        format: "esm", // Module output format: es,cjs,amd,umd,iife,system
        name: "XRTC", // Specifies the output result receiving variable of the packaged module
        globals: {
          crypto: "crypto",
        },
        banner: banner,
      },
    ]

const extensions = ["*", ".js", ".ts"]

const configuration = {
  input: "./src/index.ts",
  output,
  plugins: [
    json({
      namedExports: false,
    }),
    nodeResolve({
      extensions,
    }),
    babel({
      exclude: "node_modules/**", // exclude node_modules Files under
      runtimeHelpers: true,
      extensions,
    }),
    commonjs({
      sourceMap: true,
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV),
      __VERSION__: JSON.stringify(pkgVersion),
    }),
  ],
}

if (isProduction) {
  const { terser } = require("rollup-plugin-terser")
  const output = configuration.output.map((output) => {
    const buildOutput = Object.assign({}, output)
    buildOutput.file = buildOutput.file.replace(/\.js$/, ".min.js")
    buildOutput.plugins = [
      terser({
        module: true,
        compress: {
          ecma: 2015,
          pure_getters: true,
        },
      }),
    ]
    return buildOutput
  })
  configuration.output = [...configuration.output, ...output]
}

export default configuration

add to. babelrc file

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime"
    ]
  ]
}

Add jest config. JS file

/*
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/en/configuration.html
 */

module.exports = {
  // All imported modules in your tests should be mocked automatically
  // automock: false,

  // Stop running tests after `n` failures
  // bail: 0,

  // The directory where Jest should store its cached dependency information
  // cacheDirectory: "C:\\Users\\kmchen\\AppData\\Local\\Temp\\jest",

  // Automatically clear mock calls and instances between every test
  clearMocks: true,

  // Indicates whether the coverage information should be collected while executing the test
  // collectCoverage: false,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
  // collectCoverageFrom: undefined,

  // The directory where Jest should output its coverage files
  coverageDirectory: "coverage",

  // An array of regexp pattern strings used to skip coverage collection
  // coveragePathIgnorePatterns: [
  //   "\\\\node_modules\\\\"
  // ],

  // Indicates which provider should be used to instrument code for coverage
  // coverageProvider: "babel",

  // A list of reporter names that Jest uses when writing coverage reports
  // coverageReporters: [
  //   "json",
  //   "text",
  //   "lcov",
  //   "clover"
  // ],

  // An object that configures minimum threshold enforcement for coverage results
  // coverageThreshold: undefined,

  // A path to a custom dependency extractor
  // dependencyExtractor: undefined,

  // Make calling deprecated APIs throw helpful error messages
  // errorOnDeprecated: false,

  // Force coverage collection from ignored files using an array of glob patterns
  // forceCoverageMatch: [],

  // A path to a module which exports an async function that is triggered once before all test suites
  // globalSetup: undefined,

  // A path to a module which exports an async function that is triggered once after all test suites
  // globalTeardown: undefined,

  // A set of global variables that need to be available in all test environments
  // globals: {},

  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
  // maxWorkers: "50%",

  // An array of directory names to be searched recursively up from the requiring module's location
  // moduleDirectories: [
  //   "node_modules"
  // ],

  // An array of file extensions your modules use
  // moduleFileExtensions: [
  //   "js",
  //   "json",
  //   "jsx",
  //   "ts",
  //   "tsx",
  //   "node"
  // ],

  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
  // moduleNameMapper: {},

  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
  // modulePathIgnorePatterns: [],

  // Activates notifications for test results
  // notify: false,

  // An enum that specifies notification mode. Requires { notify: true }
  // notifyMode: "failure-change",

  // A preset that is used as a base for Jest's configuration
  // preset: undefined,

  // Run tests from one or more projects
  // projects: undefined,

  // Use this configuration option to add custom reporters to Jest
  // reporters: undefined,

  // Automatically reset mock state between every test
  // resetMocks: false,

  // Reset the module registry before running each individual test
  // resetModules: false,

  // A path to a custom resolver
  // resolver: undefined,

  // Automatically restore mock state between every test
  // restoreMocks: false,

  // The root directory that Jest should scan for tests and modules within
  // rootDir: undefined,

  // A list of paths to directories that Jest should use to search for files in
  // roots: [
  //   "<rootDir>"
  // ],

  // Allows you to use a custom runner instead of Jest's default test runner
  // runner: "jest-runner",

  // The paths to modules that run some code to configure or set up the testing environment before each test
  // setupFiles: [],

  // A list of paths to modules that run some code to configure or set up the testing framework before each test
  // setupFilesAfterEnv: [],

  // The number of seconds after which a test is considered as slow and reported as such in the results.
  // slowTestThreshold: 5,

  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
  // snapshotSerializers: [],

  // The test environment that will be used for testing
  testEnvironment: "jest-environment-jsdom",

  // Options that will be passed to the testEnvironment
  // testEnvironmentOptions: {},

  // Adds a location field to test results
  // testLocationInResults: false,

  // The glob patterns Jest uses to detect test files
  // testMatch: [
  //   "**/__tests__/**/*.[jt]s?(x)",
  //   "**/?(*.)+(spec|test).[tj]s?(x)"
  // ],

  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
  // testPathIgnorePatterns: [
  //   "\\\\node_modules\\\\"
  // ],

  // The regexp pattern or array of patterns that Jest uses to detect test files
  // testRegex: [],

  // This option allows the use of a custom results processor
  // testResultsProcessor: undefined,

  // This option allows use of a custom test runner
  // testRunner: "jasmine2",

  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
  // testURL: "http://localhost",

  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
  // timers: "real",

  // A map from regular expressions to paths to transformers
  // transform: undefined,

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  // transformIgnorePatterns: [
  //   "\\\\node_modules\\\\",
  //   "\\.pnp\\.[^\\\\]+$"
  // ],

  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
  // unmockedModulePathPatterns: undefined,

  // Indicates whether each individual test should be reported during the run
  // verbose: undefined,

  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
  // watchPathIgnorePatterns: [],

  // Whether to use watchman for file crawling
  // watchman: true,
};