rollup的基本使用 基本配置与处理各种文件

rollup

rollup是一个javascript的模块化打包工具 可以帮助我们编译小的代码到一个大的负载的代码中 比如一个库或者一个应用

rollup与webpack的区别
rollup主要针对ES Module进行打包
另外webpack通常可以通过各种loader处理各种各样的文件 以及处理他们的依赖关系
rollup更多时候专注于处理javascript代码的（当然也可以处理css font vue等文件）
rollup的配置和理念相对于webpack来收 更加的简洁和容易理解
在早期webpack不支持tree shaking时 rollup具备更强的优势

通常在实际项目开发过程中 都会使用webpack

rollup的基本使用

npm install rollup

创建main.js 打包到bundle.js
打包浏览器的库
npx rollup ./src/main.js -f iife -o dist/bundle.js
打包AMD的库
npx rollup ./src/main.js -f amd -o dist/bundle.js
打包CommonJS的库
npx rollup ./src/main.js -f cjs --o dist/bundle.js
打包通用的库（必须跟上name）
npx rollup ./src/main.js -f umd --name mathUtil -o dist/bundle.js

rollup的配置

module.exports = {//入口input: "./lib/index.js",//出口output: [{format: "umd",name: "whyUtils",file: "./build/bundle.umd.js",},{format: "cjs",file: "./build/bundle.cjs.js",},{format: "amd",file: "./build/bundle.amd.js",},{format: "iife",file: "./build/bundle.browser.js",},],
};

解决rollup和第三方库的问题

安装解决commonjs的库
npm install @rollup/plugin-commonjs

安装解决node_modules的库
npm install @rollup/plugin-node-resolve

const commonjs = require("@rollup/plugin-commonjs")
const resolve = require("@rollup/plugin-node-resolve")module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [resolve(),commonjs()],
};

Babel转换代码

安装rollup对应的babel插件
npm install @rollup/plugin-babel
修改配置文件

const {babel} = require("@rollup/plugin-babel")module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [babel({babelHelpers: "bundled",exclude: /node_modules/})],
};

babel.config.js文件
npm install @babel/preset-env

module.exports = {presets: ["@babel/preset-env"]
}

Terser代码压缩

如果我们希望对代码进行压缩 可以使用@rollup/plugin-terser
npm install @rollup/plugin-terser

const {babel} = require("@rollup/plugin-babel")
const terser = require("@rollup/plugin-terser")
module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [babel({babelHelpers: "bundled",exclude: /node_modules/}),terser()],
};

处理css文件

npm install rollup-plugin-postcss postcss
配置postcss的插件

const postcss = require("rollup-plugin-postcss postcss");module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [postcss()],
};

处理vue文件

处理vue文件 我们需要使用rollup-plugin-vue插件
但是注意默认 情况下我们安装的是vue3.x的版本 所以我们这里指定了以下rollup-plugn-vue的版本
npm install rollup-plugin-vue @vue/compiler-sfc

使用vue插件

const vue = require("rollup-plugin-vue");
module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [vue()],
};

在我们打包vue项目后 汇报process is not edefined的错误
这时因为我们在打包的vue代码中 用到process.env.NODE_ENV 所以我们可以使用一个插件rollup-plugin-replace设置它对应的值
npm install rollup-plugin-replace

const vue = require("rollup-plugin-vue");
const replace = require("rollup-plugin-replace");module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [vue(),replace({"process.envNODE_ENV": JSON.stringify("production"),}),],
};

搭建本地服务器

第一步 使用rollup-plugin-serve搭建服务
npm install rollup-plugin-serve

const serve = require("rollup-plugin-serve");module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [serve({port: 8000,open: true,contentBase: ".",}),],
};

第二步 当文件发生变化 自动刷新浏览器
npm install rollup-plugin-livereload

const serve = require("rollup-plugin-serve");
const livereload = require("rollup-plugin-livereload")module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: [serve({port: 8000,open: true,contentBase: ".",}),libereload()],
};

第三步 启动时 开启文件监听
npx rollup -c -w

区分开发环境

我们可以在package.json中创建一个开发和构建的脚本

  "scripts": {"serve":"rollup -c --environment NODE_ENV=development -w","build":"rollup -c --environment NODE_ENV=production "},

const serve = require("rollup-plugin-serve");
const livereload = require("rollup-plugin-livereload");
const postcss = require("rollup-plugin-postcss postcss");
const terser = require("@rollup/plugin-terser");
const vue = require("rollup-plugin-vue");
const replace = require("rollup-plugin-replace");const isProduction = process.env.NODE_ENV === "production";const plugins = [postcss(),vue(),replace({"process.envNODE_ENV": JSON.stringify("production"),}),
];if (isProduction) {plugins.push(terser());
} else {const extraPlugins = [serve({port: 8000,open: true,contentBase: ".",}),livereload(),];plugins.push(...extraPlugins);
}module.exports = {//入口input: "./lib/index.js",//出口output: {format: "umd",name: "utils",file: "./build/bundle.umd.js",},plugins: plugins,
};