【源码】基于 Rollup 框架的 JavaScript 代码打包项目

项目简介

本项目基于 Rollup 框架开发。Rollup 作为强大的 JavaScript 模块打包器，可将小块代码编译成复杂的库或应用程序代码。项目深入解析 Rollup 原理，实现代码打包功能，同时支持多种高级特性与插件扩展。

项目的主要特性和功能

1. 多种打包模式：支持将代码打包成 CommonJS 等格式。
2. Tree Shaking 优化：利用 ES module 静态分析，消除无用 JavaScript 代码，优化性能。
3. 插件系统：插件可充当 loader 或传统 plugin，提供丰富钩子函数，用于 chunk 解析更改、加载模块合法解析及动态更新配置等。
4. 开发辅助：支持 watch 模式，实时监控文件变化并执行构建任务。

安装使用步骤

前提条件

假设用户已下载本项目的源码文件，并且已安装 Node.js 和 npm。

安装 Rollup

全局安装 Rollup： bash npm i rollup -g

配置 Rollup

创建 rollup.config.js 文件，示例配置如下： ```javascript import resolve from "@rollup/plugin-node-resolve";

export default { input: './src/main.js', output: [ { format: "cjs", file: pkg.main, sourcemap: true }, { file: './dist/bundle.js', format: 'cjs', name: 'bundleName' } ], plugins: [ resolve() ], external: [ 'some-externally-required-library', path.resolve('./src/some-local-file-that-should-not-be-bundled.js') ], globals: { jquery: '$' }, watch: { include: 'src/', exclude: 'node_modules/' } } ```

安装依赖插件（可选）

• 使用 Babel： bash cnpm install rollup-plugin-babel @babel/core @babel/preset-env --save-dev 添加 .babelrc 配置文件。
• 支持 Node 模块引用： bash cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev
• 使用 TypeScript： bash cnpm install @rollup/plugin-typescript --save-dev
• 编译 CSS： bash cnpm install rollup-plugin-postcss --save-dev 在 rollup.config.js 中添加： ```javascript import postcss from 'rollup-plugin-postcss';

plugins: [ postcss() ] ```

打包项目

在项目根目录下运行以下命令进行打包： bash rollup -c rollup.config.js

区分环境（可选）

将 rollup.config.js 拆分成 rollup.config.dev.js 和 rollup.config.build.js，分别用于开发和生产环境，在打包时指定对应的配置文件。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】