Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

A Rollup from 0 to 1 overhand front-end component library development | module builds

In text – a Rollup from 0 to 1 overhand front-end component library development | start

  • Rollup switches modular standards and multi-module builds
  • Rollup node-resolve and babel-node

Modular standard

  • Umd exports JS functions

  • CJS runs through CommonJS and is exported through module.exports

  • Es ES6 standard Export defaul

    • Add type=”module” to support this

Rollup Switches modular standards

const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.js") // Output path
module.exports = {
    input: inputPath,
    output: {
        file: outputPath, // Output path
        format: 'umd'.// The output of the module protocol umd, if you need to switch to modify the 'CJS ','es'
        name: "payfunRollbear" // Module name}}Copy the code

Rollup configures multi-module builds

const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.js") // Output path
const outputEsPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.es.js") // Output path
module.exports = {
    input: inputPath,
     output: [{file: outputUmdPath, // Output path
            format: 'umd'.// Output module protocol UMD
            name: "payfunRollbear" // Module name
        },
        {
            file: outputEsPath, // Output path
            format: 'es'.// The output module protocol es
            name: "payfunRollbear" // Module name}}]Copy the code
yarn dev
# Rollup package compilation outputs two modules├ ─ ─ dist │ ├ ─ ─ payfun. Rollbear. Dev. Es. Js │ └ ─ ─ payfun. Rollbear. Dev. Js └ ─ ─...Copy the code

Configure a rollup plugin – node – resolve

yarn add -D rollup-plugin-node-resolve

vim rollup.config.dev.js

const path = require('path')
const resolve = require("rollup-plugin-node-resolve")...module.exports = {
  // ...
  // Add code to resolve
    plugins:[
        resolve()
    ]
}
Copy the code

scenarioHow would our code perform if we were writing ES6 content?

  • yarn add @babel/cli global

  • yarn add @babel/core global

  • yarn add @babel/node global

  • yarn add @babel/preset-env global

  • Create the.babelrc configuration file

    • {
  "presets": [
    "@babel/preset-env"]}Copy the code
$ npx babel-node ./src/index.js  # to execute ES6 code ~

> Hello my first rollup demo!!
> Set(2) { 1, 2 }

Copy the code

Rollup-plugin-node-resolve rollup-plugin-node-resolve

Use rollup-plugin-node-resolve to mix the third party module with our code

If you do not use it, you will not find the third-party modules used in the project ~~

Configure plugins in the configuration file :[resolve()] to mix and package the third-party modules we use into our projectCopy the code