手写Vue2源码系列之roolup的环境配置(一)

roolup是什么

Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式,而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。

roolup和其他打包工具的区别

相比于webpack,roolup更加轻量,会尽量保持代码精简于原有状态,但是功能点比较单一,没有webpack多。而最新的Vite就是基于roolup实现的打包构建工具,以后也肯定会逐渐被广泛使用。

rollup.js更专注于Javascript类库打包,所以一般来说,开发应用时用webpack,开发库时用roolup居多。

环境搭建

js 复制代码
npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D

新建src文件夹,文件夹底下新建index.js 在根目录底下新建index.html文件

配置config文件

这里具体内容可以看官网:命令行接口 | rollup.js 中文文档 | rollup.js中文网 (rollupjs.com)

首先添加rollup.config.js

js 复制代码
import babel from "rollup-plugin-babel";
import serve from "rollup-plugin-serve";
export default {
  input: "./src/index.js",
  output: {
    format: "umd", // 模块化类型
    file: "dist/vue.js",
    name: "Vue", // 打包后的全局变量的名字
    sourcemap: true,
  },
  plugins: [
    babel({
      exclude: "node_modules/**", //排除这个文件夹里的所有文件
    }),
    serve({
      //开启一个服务
      open: true,
      openPage: "/index.html",
      port: 3000,
      contentBase: "",
    }),
  ],
};

添加.babelrc文件

js 复制代码
{
    "presets": [
        "@babel/preset-env"  //babel预解析
    ]
}

最后的文件目录结构 最后当我们执行npm run dev时 会帮我把src/index.js文件打包到dist/index.js文件下,且当我们打开浏览器,输入localhost:3000时,roolup会自动帮我们找到根目录下的index.html文件。

综上所述,roolup的环境搭建就配置完成啦。

相关推荐
菜鸟una1 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴9 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟10 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@12311 小时前
CSS易忘属性
前端·css