# datav-lib

**Repository Path**: ouyangzhigang/datav-lib

## Basic Information

- **Project Name**: datav-lib
- **Description**: 数据可视化lib库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-10
- **Last Updated**: 2024-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# data-view-lib
> This is a data visualization library

### Development technology stack

`rollup` `nodejs` `echarts` `tree-shaking` `vue` `babel` `x` `xx`

### Config

* rollup

  >> format
  ```javascript
    output: {
      file: resolver('./dist/index.js'),
      format: 'umd', // es | umd | cjs | amd
      name: 'dataViewLib'
    }
  ```  

* output

  >> single
  ```js
    {
      file: resolver('./dist/index.js'),
      format: 'umd',
      name: 'dataViewLib'
    }
  ```

  >> multiple
  ```js
    [{
      file: resolver('./dist/index.js'),
      format: 'umd',
      name: 'dataViewLib'
    }, { 
      file: resolver('./dist/index.es.js'),
      format: 'es',
      name: 'dataViewLib'
    }]
  ```

* tsconfig.json
  ```json
  {
    "compilerOptions": {
      "lib": [
        "es6"
      ],
      "module": "ESNext",
      "allowJs": true
    },
    "exclude": [
      "node_modules"
    ],
    "include": [
      "src/**/*"
    ]
  }
  ```

### Example
Script Import Method

* umd
```html
<script src="../dist/index.js"></script>
```

* es
```html
<script src="../dist/index.js" type="module"></script>
```


### Plugins

* @rollup/plugin-node-resolve
  > 插件允许我们es module加载第三方commonjs模块，可以通过es module引入模块，然后打包会把库代码一起打进去

* @rollup/plugin-commons
  > 插件将它们转换为ES6版本； 当我们引入cjs模块，又或者使用cjs模式开发的时候，打包可以通过它来处理成可识别输出

* @babel/node
  > 可以将cjs转化成es module输出执行, 还可以提供交互式命令执行工具
  
  install: 
  ```bash
  npm install -g @babel/node @babel/core
  ```

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

  ```bash
  babel-node src/index.js
  ```

* @rollup/plugin-babel
  > 在rollup项目中使用es6代码编译器

* @rollup/plugin-json
  > 打包的时候处理json引入

* @rollup-plugin-vue
  > 编译vue文件，附加需要一个vue编译器：`@vue/compiler-sfc` 

* rollup-plugin-postcss & rollup-plugin-sass
  > vue里边sass代码编译依赖

* @rollup/plugin-typescript
  > 项目中支持typescript。安装后发现有报错,提示我们要安装tslib和typescript

* rollup-plugin-terser & rollup-plugin-uglify
  > 代码压缩： 前端能转义压缩es6+， 后者只压缩es5

* rollup-plugin-serve
  > 启动一个服务

* rollup-plugin-livereload
  > 开启热更新

### Tree Shaking

是一种基于es module模式开发的追踪机制去实现的

* 在es module模块导出时使用`export`, 而不是`export default`
* 使用es module模式开发，避免cjs模式开发
* `import * as Alias from 'module'`的方式引入是不可取的


其实，`cjs`也是支持tree-shaking模式的，具体如下：
```javascript
// define cjs.js
exports.a = 1
exports.b = 2

// import index.js
import {a, b} from './cjs'

console.log(a)

export default a
```

#### external

去除不需要打进来的模块

rollup.config.dev.js
```
  external: ['vue', 'sam-test-data']
```

### FAQ

QUESTION 1
```
[!] (plugin commonjs--resolver) SyntaxError: Unexpected token (2:2) in D:\private\data-view-lib\src\App.vue?vue&type=template&id=7ba5bd90&lang.js
```

QUESTION 2
```
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
vue (guessing 'vue')

# resolve:

  output: [
    {
      file: resolver(pkg.module),
      format: "umd",
      name: pkg.name,
      global: {
        vue: 'vue'
      }
    },
    {
      file: resolver("./dist/index.es.js"),
      format: "es",
      name: pkg.name,
      global: {
        vue: 'vue'
      }
    },
  ],
```

### Reference

<https://www.jianshu.com/p/2f4181605654> // rollup错误锦集

<https://blog.csdn.net/kalrase/article/details/110186870> // 解决[QUESTION 1]

<https://blog.csdn.net/yutao618/article/details/116272769> // 配置rollup

<https://github.com/rollup/awesome>

<https://github.com/rollup/plugins>