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

相关推荐
杨进军4 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW19 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字25 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript