使用Rollup搭建开发环境

刺骨的言语ヽ痛彻心扉 2022-09-12 13:45 260阅读 0赞

## Rollup介绍： ##

Rollup 是一个 JavaScript 模块打包器，专注于Javascript类库打包，所以开发库时使用Rollup，  
而开发应用时使用 webpack 打包

## 环境搭建 ##

### 目录结构： ###

├── dist   // 打包存放的目录
    ├── public  // 静态资源文件
    │   └── index.html
    ├── src
    │   ├── index.js       // 项目打包入口文件
    │   └── ...
    ├── .babelrc  // babel打包配置
    ├── package.json
    └── rollup.config.js

### 1. 安装rollup依赖： ###

npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D

> @babel/preset-env // 预设 es6 -> es5 插件的集合 @babel/core // 代码分析成ast  
> rollup-plugin-babel // 给rollup集成babel的插件  
> rollup-plugin-serve // rollup开启serve服务插件  
> cross-env // 运行跨平台设置和使用环境变量 (就是npm运行时不管是windows还是mac都能运行)

### 2. rollup.config.js配置如下： ###

import babel from 'rollup-plugin-babel';
    import serve from 'rollup-plugin-serve';
    
    // 常见的模块规范 import export (ESModule) module.exports require (commonjs)
    // AMD 比较老的模块规范 systemjs 模块规范
    
    // ES6Module commonjs umd(支持amd 和 cmd)
    export default { 
        input: './src/index.js',  // 打包入口
        output: { 
            format: 'umd', // 模块化类型
            file: 'dist/umd/myModule.js',  // 打包到dist内
            name: 'myModule', // 打包后的全局变量的名字
            sourcemap: true
        },
        plugins: [
            babel({  // 执行 babel 时自动去 .babelrc 文件加载对应配置
                exclude: 'node_modules/**'  // 排除
            }),
            process.env.ENV === 'development'? serve({  // 开端口
                open: true,
                openPage: '/public/index.html',
                port: 3000,
                contentBase: ''
            }) : null
        ]
    }

### 3. .babelrc配置： ###

{ 
        "presets": [
            "@babel/preset-env" // es6 -> es5
        ]
    }

### 4. package.json配置 ###

{ 
    	...
    	"scripts": { 
    		"build:dev": "rollup -c", //只打包
    		"serve": "cross-env ENV=development rollup -c -w" // -c打包 -w监听改变后重新执行-c打包
    	}
    	...
    }