手写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的环境搭建就配置完成啦。

相关推荐
老坛00110 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00111 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾14 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐18 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价19 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花20 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101320 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树21 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜22 分钟前
跨平台UI自动化-Appium
前端
海底火旺23 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js