rollup结合babel做打包详细记录

原创

wx5dee3871df0ab 2022-10-18 18:09:04 ©著作权

©著作权归作者所有：来自51CTO博客作者wx5dee3871df0ab的原创作品，请联系作者获取转载授权，否则将追究法律责任

为什么用rollup？

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，一般用于第三方库的打包。大名鼎鼎的React和Vue就是使用rollup来做打包构建的

开始正文

· 创建一个rollup_demo的目录

mkdir rollup_demo && cd rollup_demo

· 创建源码目录src，以及入口文件main.js

· 初始化项目 npm init -y

· 安装依赖

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

如果你需要支持更高级的es6+语法或者特性，请自行安装补丁

· 入口文件main.js

import { add, sum } from './moduleA.js'
import { multiply, divide } from './moduleB.js'
add();
sum();
multiply();
divide();

· 模块文件moduleA.js

export const add = function(){
  console.log(`this is add`);
}

export const sum = () => {
  console.log(`this is sum`);
}

· 模块文件modeleB.js

export const multiply = () => {
  console.log(`this is multiply`);
}
export const divide = () => {
  console.log(`this is divide`);
}

· 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/**'
    }),
  ]
}

· .babelrc