# vue2-source-code-parsing

**Repository Path**: webchenming/vue2-source-code-parsing

## Basic Information

- **Project Name**: vue2-source-code-parsing
- **Description**: 响应式原理、AST语法树、虚拟DOM、依赖收集、观察者
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-05-26
- **Last Updated**: 2024-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 安装依赖

`npm install rollup --save-dev` : 安装 rollup 开发依赖

## 安装插件

`npm install rollup-plugin-babel --save-dev` : 安装 babel 插件

`npm install @babel/core --save-dev` : 安装 babel 核心插件

`npm install @babel/preset-env --save-dev` : 安装babel ES6 转 ES5 插件

`npm install @rollup/plugin-node-resolve --save-dev` : 引入模块以 index 为入口

## 目录结构

```txt
|--node_modules
|--src
   |---index.js
|--package.json
|--rollup.config.js
```

## 配置文件

### package.json

```json
{
  "scripts": {
    "dev": "rollup -cw"
  }
}
```

`-c` : 指定配置文件(**rollu.config.js**)

`-w` : 监控文件状态

### .babelrc

```json
{
  "presets": [
    "@babel/preset-env"
  ]
}
```

### rollu.config.js

```js
// rollup 默认导出一个对象，作为打包的配置文件
import babel from 'rollup-plugin-babel'
export default {
  input: './src/index.js',
  output: {
    file: './dist/vue.js',
    name: 'Vue', // gloabl.Vue
    format: 'umd',
    sourcemap: true, // 可以用于调试源代码
  },
  plugins: [
    babel({
      exclude: 'node_modules/**', // 排除 node_modules 下所有文件
    })
  ]
}
```

`input` : 入口配置

`output`: 出口配置

| 参数      | 说明              |
| --------- | ----------------- |
| file      | 出口文件路径      |
| name      | 在全局上挂载实例  |
| format    | 打包成模块的规范  |
| sourcemap | 是否生成 map 文件 |

`format`

| 参数 | 说明                               |
| ---- | ---------------------------------- |
| esm  | es6模块                            |
| cjs  | commonjs模块                       |
| iife | 自执行函数                         |
| umd  | 统一模块规范(包含: cjs、adm、iife) |

`plugins` : 插件配置