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

相关推荐
w_y_fan1 分钟前
Flutter 滚动组件总结
前端·flutter
wuli金居哇4 分钟前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort6 分钟前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手8 分钟前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码9 分钟前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码10 分钟前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗11 分钟前
VS Code 中手动和直接运行TS代码
前端
小高00713 分钟前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
Samsong13 分钟前
JavaScript逆向之反制无限debugger陷阱
前端·javascript