Rollup

Rollup is a JavaScript module compiler that is lighter than WebPack. React and Vue use rollup for package builds.

To the body

  • To create arollup_demoThe directory where the
mkdir rollup_demo && cd rollup_demo
Copy the code

  • Create the source directory SRC and the entry file main.js

  • Initialize the project NPM init-y

  • Install dependencies

npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-babel 
@babel/core @babel/preset-env 
Copy the code

If you need to support more advanced ES6 + syntax or features, please install patches yourself

  • Entrance to the filemain.js
import { add, sum } from './moduleA.js'
import { multiply, divide } from './moduleB.js'
add();
sum();
multiply();
divide();
Copy the code
  • Module filemoduleA.js
export const add = function(){
  console.log(`this is add`);
}

export const sum = () = > {
  console.log(`this is sum`);
}
Copy the code
  • Module filemodeleB.js
export const multiply = () = > {
  console.log(`this is multiply`);
}
export const divide = () = > {
  console.log(`this is divide`);
}
Copy the code
  • rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
export default {
  input:'src/main.js'.output: {
    dir:'dist'.format: 'umd'
  },
  plugins: [
    resolve(),
    babel({
      babelHelpers: 'bundled'.exclude:'node_modules/**']}}),Copy the code
  • .babelrc
{
  "presets": [
    "@babel/env"]}Copy the code
  • ✅ Run commands
rollup -c rollup.config.js
Copy the code

The end of the

The result is a simple rollup and Babel configuration, which is very easy to use in companies that do not use engineering native development such as JQ, as well as some large open source library projects.

reference

rollup.js