What is rollup, how not more introduction, here record yourself in the rollup document and related information, and then manually to tap some code, and in the form of blog input, deepen their understanding

The goal of this time

You are familiar with some basic configurations. There are fewer configuration items than webPack, although Webpack has both plugin and Loader. But Rollup seems to be plugin-only.

Since it is a packaging tool, then surely a package to say. Multiple files are imported into each other, and the output is packaged.

directory

│ ├─ dist // ├─ index.js │ ├─ index.js │ ├─ index.js │ ├─ dist ├─ index.js ├─ index.js ├─ index.js ├─ index.js └─ reduce.jsCopy the code

The code

Since we use rollup, we first install the rollup package, NPM install rollup -d or NPM install –save-dev rollup, and then to verify the results of the code, We are installing a library to convert ES6 to ES5 — @rollup/plugin-buble.

The package.json file ends up as follows

{" name ":" my - a rollup ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" build ": }, "author": "", "license": "ISC", "devDependencies": {" @ rollup/plugin - buble ":" ^ 0.21.3 ", "a rollup" : "^ 2.53.1"}}Copy the code

configurationrollup.config.jsfile

The environment in rollup.config.js is node, so for now you need to use commonJS syntax. Using plugins is also a configuration option for rollup, so include plugins directly in the exported objects, just to be familiar with it. Here are the details:

const path = require('path'); const buble = require('@rollup/plugin-buble'); const resolve = function(filePath) { return path.join(__dirname, '.. ', filePath) } module.exports = { input: resolve('src/index.js'), output: { file: resolve('dist/index.js'), format: 'iife' }, plugins: [ buble() ] }Copy the code

Write the code of the main program

src/index.js

import { add } from "./add"; import { reduce } from "./reduce"; const arr1 = ['a', 'b','c']; Const arr2 = (4 and 6); const result = [...arr1, ...arr2]; console.log(result); const a = 1, b = 2; const res = add(a, b); const d = reduce(a, b); console.log(res,);Copy the code

add.js 和 reducer.js

packaging

The code is written and used directly at the terminalnpm run build

Analysis packing sister

The result of the package is as follows:



And here we can simply conclude,rollupthetreeshakingIs based onesmGrammar. If the imported method is not used, it will not be added to the package result. But how did you do it we’ll talk about it later

Code execution result

The result of the execution of this code, you can see at a glance, I’ll put it out.

This article uses the Article Synchronization Assistant to synchronize