# rollup_dev

**Repository Path**: pipepandafeng/rollup_dev

## Basic Information

- **Project Name**: rollup_dev
- **Description**: 基于rollup的构建模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-09-24
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: rollup, Nodejs, HTML, CSS

## README

# 🌴 rollup

> 官网地址：https://www.rollupjs.com/guide/command-line-reference

## rollup 安装

使用 `npm install --global rollup` 进行安装

## js 高级语法转换为低级语法（能被大多数浏览器解析）

> babel 官网：https://www.babeljs.cn

> 三个核心包： `@rollup/plugin-babel` , `@babel/core` , `@babel/preset-env`

```js
import {
    getBabelOutputPlugin
} from "@rollup/plugin-babel";
export default {
    plugins: [
        getBabelOutputPlugin({
            presets: ["@babel/preset-env"],
        }),
    ],
};
```

## ES7或更高级语法的转义

> babel 官网：https://www.babeljs.cn

> 核心包： `@babel/plugin-transform-runtime`

## 打包第三方库 （将第三方包打入rollup构建包中，才能在浏览器中使用）

> 核心包： `@rollup/plugin-node-resolve` 和 `@rollup/plugin-commonjs`

- @rollup/plugin-node-resolve 

    - 该插件会允许加载在 node_modules中的第三方模块。🍣一个使用节点解析算法定位模块的 Rollup 插件，用于在node_modules

- @rollup/plugin-commonjs 
    - 🍣 将 CommonJS 模块转换为 ES6 的 Rollup 插件，因此它们可以包含在 Rollup 包中(引自官方的一句话)