rollup打包的简单配置

记录的初衷:经常忘记配置项,反复需要找资料或者找以前的项目,先写个最简单的配置

创建项目目录

mkdir my-rollup

package.json初始化并修改

pnpm init

package.json 复制代码
"scripts": {
    "serve": "rollup -c -w",
    "build": "rollup -c"
  },

安装rollup和ts解析器

pnpm add rollup rollup-plugin-typescript2 -D

创建本地入口文件src/index.ts

js 复制代码
const Hello = () => {
  console.log('Hello, world!')
}

export default Hello;

rollup配置

js 复制代码
import { defineConfig } from "rollup";
import typescript from "rollup-plugin-typescript2";
import path from "path";
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default defineConfig([
  {
    input: "src/index.ts", //入口文件
    output: [
      {
        file: path.resolve(__dirname, "lib/main.js"),
        format: "cjs",
        name: "main.cjs",
      },
      {
        file: path.resolve(__dirname, "./lib/main.umd.js"),
        format: "umd", // 打包成UMD模块
        name: "Hello" // 打包成UMD模式,需提供name
      },
      {
        file: path.resolve(__dirname, "./lib/main.iife.js"),
        name: "Hello",
        format: "iife" // iife 表示立即执行函数
      }
    ],
    plugins: [
      typescript(),
    ]
  },
]);

tsconfig.json

配置项不明白的可以看这里www.tslang.cn/docs/handbo...

tsconfig.json 复制代码
{
    "compilerOptions": {
      "module": "ESNext",
      "target": "ESNext",
      "outDir": "dist",
      "baseUrl": "./",
      "rootDir": "./src"
    },
    "exclude": ["node_modules", "dist"]
}

尝试打包cjs、umd和iife格式文件

pnpm build

umd和iife在项目中引入打包后的文件,将在windows中能找到Hello变量

创建exemple/index.html

index.html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript" src="../lib/main.umd.js"></script>
  </body>
</html>

插件Live Server运行index.html

打开服务后,控制台输入Hello(),将输出Hello, world!

相关推荐
Dream耀几秒前
Cookie:Web身份认证的基石
前端·javascript·http
Qinana2 分钟前
今日前端学习总结
javascript
学吧那就5 分钟前
JavaScript进阶之路(一)
javascript
十盒半价9 分钟前
闭包:JS 里的 “背包客”,背走了变量的秘密
前端·javascript·trae
FairyDiana10 分钟前
【JavaScript】一篇文章,带你拿捏JS中的类型判断
javascript·面试
江城开朗的豌豆39 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen02111 小时前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
Cacciatore->6 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端7 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13