监控平台之rollup打包

设计思路

1.根据模块,通过index.js去调用执行调用

2.WebEyeSDK.js暴露方法,同时定义init方法,去初始化config里的上报参数

3.rollup/build里入口文件为WebEyeSDK.js进行打包

4.打包编译用babel,同时安装babel/preset-env智能预设(可去webpack专栏查看)

5.bundle格式,原文件采用iife格式,原因是

  1. 创建只使用一次的函数,并立即执行它。
  2. 创建闭包,保存状态,隔离作用域。
  3. 作为独立模块存在(例子如jQuery),防止命名冲突,命名空间注入(模块解耦)。

6.其他格式,esm,cjs打包,静态异步和同步方式进行打包

项目整体架构流程图

rollup打包文件

plugin:

rollup/plugin-json 上报数据采用json格式保存,Rollup 会将 data.json 的内容嵌入到生成的 bundle.js 文件中,这样你就可以在最终的代码中使用 JSON 数据。

@rollup-plugin-babel:同babel/preset-env,进行智能预设,会根据版本,浏览器进行语法编译

复制代码
const path = require('path')
const json = require('@rollup/plugin-json')
const {babel} = require('@rollup/plugin-babel')

const resolveFile = function(filePath) {
    return path.join(__dirname, filePath)
}

const plugins= [
    json(
        {
            compact: true
        }
    ),
    babel({
        extensions: ['.js','.ts'],
        babelHelpers: 'bundled',
        presets: [
            [
                '@babel/env',
                {
                    targets: {
                        browsers: [
                            '> 1%',
                            'last 2 versions',
                            'not ie <= 8',
                        ]
                    }
                }
                ]
        ]
    })
]

module.exports = [
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.js'),
            format: 'iife',
            name: 'WebEyeSDK',
            soucemap: true,
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    },
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.js'),
            format: 'iife',
            name: 'WebEyeSDK',
            soucemap: true,
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    },
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.esm.js'),
            format: 'esm',
            name: 'WebEyeSDK',
            soucemap: true,
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    },
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.cjs.js'),
            format: 'cjs',
            name: 'WebEyeSDK',
            soucemap: true,//
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    }
]
相关推荐
万少1 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z12 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z15 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构21 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙27 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1128 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆33 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er37 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0640 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444043 分钟前
javaweb———html
前端·javascript·html